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

   1 <!doctype html>
   2 <html>
   3         <head>
   4                 <title>Doughnut Chart</title>
   5                 <script src="../src/Chart.Core.js"></script>
   6                 <script src="../src/Chart.Doughnut.js"></script>
   7                 <style>
   8                         body{
   9                                 padding: 0;
  10                                 margin: 0;
  11                         }
  12                         #canvas-holder{
  13                                 width:30%;
  14                         }
  15                 </style>
  16         </head>
  17         <body>
  18                 <div id="canvas-holder">
  19                         <canvas id="chart-area" width="500" height="500"/>
  20                 </div>
  21
  22
  23         <script>
  24
  25                 var doughnutData = [
  26                                 {
  27                                         value: 1,
  28                                         label: "One"
  29                                 },
  30                                 {
  31                                         value: 2,
  32                                         label: "Two"
  33                                 },
  34                                 {
  35                                         value: 3,
  36                                         label: "Three"
  37                                 },
  38                                 {
  39                                         value: 4,
  40                                         label: "Four"
  41                                 },
  42                                 {
  43                                         value: 5,
  44                                         label: "Five"
  45                                 }
  46
  47                         ];
  48
  49                         window.onload = function(){
  50                                 var ctx = document.getElementById("chart-area").getContext("2d");
  51                                 window.myDoughnut = new Chart(ctx).Doughnut(doughnutData, {responsive : true});
  52                         };
  53
  54
  55
  56         </script>
  57         </body>
  58 </html>