client-freqwatch/Chart.js/samples/doughnut.html

   1 <!doctype html>
   2 <html>
   3         <head>
   4                 <title>Doughnut Chart</title>
   5                 <script src="../Chart.js"></script>
   6                 <style>
   7                         body{
   8                                 padding: 0;
   9                                 margin: 0;
  10                         }
  11                         #canvas-holder{
  12                                 width:30%;
  13                         }
  14                 </style>
  15         </head>
  16         <body>
  17                 <div id="canvas-holder">
  18                         <canvas id="chart-area" width="500" height="500"/>
  19                 </div>
  20
  21
  22         <script>
  23
  24                 var doughnutData = [
  25                                 {
  26                                         value: 300,
  27                                         color:"#F7464A",
  28                                         highlight: "#FF5A5E",
  29                                         label: "Red"
  30                                 },
  31                                 {
  32                                         value: 50,
  33                                         color: "#46BFBD",
  34                                         highlight: "#5AD3D1",
  35                                         label: "Green"
  36                                 },
  37                                 {
  38                                         value: 100,
  39                                         color: "#FDB45C",
  40                                         highlight: "#FFC870",
  41                                         label: "Yellow"
  42                                 },
  43                                 {
  44                                         value: 40,
  45                                         color: "#949FB1",
  46                                         highlight: "#A8B3C5",
  47                                         label: "Grey"
  48                                 },
  49                                 {
  50                                         value: 120,
  51                                         color: "#4D5360",
  52                                         highlight: "#616774",
  53                                         label: "Dark Grey"
  54                                 }
  55
  56                         ];
  57
  58                         window.onload = function(){
  59                                 var ctx = document.getElementById("chart-area").getContext("2d");
  60                                 window.myDoughnut = new Chart(ctx).Doughnut(doughnutData, {responsive : true});
  61                         };
  62
  63
  64
  65         </script>
  66         </body>
  67 </html>