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

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