diff options
| author | ARC <arjunrc@gmail.com> | 2015-05-17 11:43:25 -0400 |
|---|---|---|
| committer | ARC <arjunrc@gmail.com> | 2015-05-17 11:43:25 -0400 |
| commit | 8c877315a6b3fe6abe4168ca8c39f161a0b6da86 (patch) | |
| tree | e822ba2256bfa55485e4931485661f6186e32000 /www/lib/Chart.js/samples/line.html | |
| parent | 24d9325ede86d5688bbe14979e499effe5e5a284 (diff) | |
Switched from google-chart back to chart.js - I couldn't get axis animations right with google
Diffstat (limited to 'www/lib/Chart.js/samples/line.html')
| -rw-r--r-- | www/lib/Chart.js/samples/line.html | 54 |
1 files changed, 54 insertions, 0 deletions
diff --git a/www/lib/Chart.js/samples/line.html b/www/lib/Chart.js/samples/line.html new file mode 100644 index 00000000..ccd0dad9 --- /dev/null +++ b/www/lib/Chart.js/samples/line.html @@ -0,0 +1,54 @@ +<!doctype html> +<html> + <head> + <title>Line Chart</title> + <script src="../Chart.js"></script> + </head> + <body> + <div style="width:30%"> + <div> + <canvas id="canvas" height="450" width="600"></canvas> + </div> + </div> + + + <script> + var randomScalingFactor = function(){ return Math.round(Math.random()*100)}; + var lineChartData = { + labels : ["January","February","March","April","May","June","July"], + datasets : [ + { + label: "My First dataset", + fillColor : "rgba(220,220,220,0.2)", + strokeColor : "rgba(220,220,220,1)", + pointColor : "rgba(220,220,220,1)", + pointStrokeColor : "#fff", + pointHighlightFill : "#fff", + pointHighlightStroke : "rgba(220,220,220,1)", + data : [randomScalingFactor(),randomScalingFactor(),randomScalingFactor(),randomScalingFactor(),randomScalingFactor(),randomScalingFactor(),randomScalingFactor()] + }, + { + label: "My Second dataset", + fillColor : "rgba(151,187,205,0.2)", + strokeColor : "rgba(151,187,205,1)", + pointColor : "rgba(151,187,205,1)", + pointStrokeColor : "#fff", + pointHighlightFill : "#fff", + pointHighlightStroke : "rgba(151,187,205,1)", + data : [randomScalingFactor(),randomScalingFactor(),randomScalingFactor(),randomScalingFactor(),randomScalingFactor(),randomScalingFactor(),randomScalingFactor()] + } + ] + + } + + window.onload = function(){ + var ctx = document.getElementById("canvas").getContext("2d"); + window.myLine = new Chart(ctx).Line(lineChartData, { + responsive: true + }); + } + + + </script> + </body> +</html> |