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

   1 <!doctype html>
   2 <html>
   3         <head>
   4                 <title>Line Chart</title>
   5                 <script src="../Chart.js"></script>
   6         </head>
   7         <body>
   8                 <div style="width:30%">
   9                         <div>
  10                                 <canvas id="canvas" height="450" width="600"></canvas>
  11                         </div>
  12                 </div>
  13
  14
  15         <script>
  16                 var randomScalingFactor = function(){ return Math.round(Math.random()*100)};
  17                 var lineChartData = {
  18                         labels : ["January","February","March","April","May","June","July"],
  19                         datasets : [
  20                                 {
  21                                         label: "My First dataset",
  22                                         fillColor : "rgba(220,220,220,0.2)",
  23                                         strokeColor : "rgba(220,220,220,1)",
  24                                         pointColor : "rgba(220,220,220,1)",
  25                                         pointStrokeColor : "#fff",
  26                                         pointHighlightFill : "#fff",
  27                                         pointHighlightStroke : "rgba(220,220,220,1)",
  28                                         data : [randomScalingFactor(),randomScalingFactor(),randomScalingFactor(),randomScalingFactor(),randomScalingFactor(),randomScalingFactor(),randomScalingFactor()]
  29                                 },
  30                                 {
  31                                         label: "My Second dataset",
  32                                         fillColor : "rgba(151,187,205,0.2)",
  33                                         strokeColor : "rgba(151,187,205,1)",
  34                                         pointColor : "rgba(151,187,205,1)",
  35                                         pointStrokeColor : "#fff",
  36                                         pointHighlightFill : "#fff",
  37                                         pointHighlightStroke : "rgba(151,187,205,1)",
  38                                         data : [randomScalingFactor(),randomScalingFactor(),randomScalingFactor(),randomScalingFactor(),randomScalingFactor(),randomScalingFactor(),randomScalingFactor()]
  39                                 }
  40                         ]
  41
  42                 }
  43
  44         window.onload = function(){
  45                 var ctx = document.getElementById("canvas").getContext("2d");
  46                 window.myLine = new Chart(ctx).Line(lineChartData, {
  47                         responsive: true
  48                 });
  49         }
  50
  51
  52         </script>
  53         </body>
  54 </html>