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

   1 <!doctype html>
   2 <html>
   3         <head>
   4                 <title>Bar Chart</title>
   5                 <script src="../Chart.js"></script>
   6         </head>
   7         <body>
   8                 <div style="width: 50%">
   9                         <canvas id="canvas" height="450" width="600"></canvas>
  10                 </div>
  11
  12
  13         <script>
  14         var randomScalingFactor = function(){ return Math.round(Math.random()*100)};
  15
  16         var barChartData = {
  17                 labels : ["January","February","March","April","May","June","July"],
  18                 datasets : [
  19                         {
  20                                 fillColor : "rgba(220,220,220,0.5)",
  21                                 strokeColor : "rgba(220,220,220,0.8)",
  22                                 highlightFill: "rgba(220,220,220,0.75)",
  23                                 highlightStroke: "rgba(220,220,220,1)",
  24                                 data : [randomScalingFactor(),randomScalingFactor(),randomScalingFactor(),randomScalingFactor(),randomScalingFactor(),randomScalingFactor(),randomScalingFactor()]
  25                         },
  26                         {
  27                                 fillColor : "rgba(151,187,205,0.5)",
  28                                 strokeColor : "rgba(151,187,205,0.8)",
  29                                 highlightFill : "rgba(151,187,205,0.75)",
  30                                 highlightStroke : "rgba(151,187,205,1)",
  31                                 data : [randomScalingFactor(),randomScalingFactor(),randomScalingFactor(),randomScalingFactor(),randomScalingFactor(),randomScalingFactor(),randomScalingFactor()]
  32                         }
  33                 ]
  34
  35         }
  36         window.onload = function(){
  37                 var ctx = document.getElementById("canvas").getContext("2d");
  38                 window.myBar = new Chart(ctx).Bar(barChartData, {
  39                         responsive : true
  40                 });
  41         }
  42
  43         </script>
  44         </body>
  45 </html>