123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354 |
- <!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>
|