line.html 1.5 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354
  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. <script>
  14. var randomScalingFactor = function(){ return Math.round(Math.random()*100)};
  15. var lineChartData = {
  16. labels : ["January","February","March","April","May","June","July"],
  17. datasets : [
  18. {
  19. label: "My First dataset",
  20. fillColor : "rgba(220,220,220,0.2)",
  21. strokeColor : "rgba(220,220,220,1)",
  22. pointColor : "rgba(220,220,220,1)",
  23. pointStrokeColor : "#fff",
  24. pointHighlightFill : "#fff",
  25. pointHighlightStroke : "rgba(220,220,220,1)",
  26. data : [randomScalingFactor(),randomScalingFactor(),randomScalingFactor(),randomScalingFactor(),randomScalingFactor(),randomScalingFactor(),randomScalingFactor()]
  27. },
  28. {
  29. label: "My Second dataset",
  30. fillColor : "rgba(151,187,205,0.2)",
  31. strokeColor : "rgba(151,187,205,1)",
  32. pointColor : "rgba(151,187,205,1)",
  33. pointStrokeColor : "#fff",
  34. pointHighlightFill : "#fff",
  35. pointHighlightStroke : "rgba(151,187,205,1)",
  36. data : [randomScalingFactor(),randomScalingFactor(),randomScalingFactor(),randomScalingFactor(),randomScalingFactor(),randomScalingFactor(),randomScalingFactor()]
  37. }
  38. ]
  39. }
  40. window.onload = function(){
  41. var ctx = document.getElementById("canvas").getContext("2d");
  42. window.myLine = new Chart(ctx).Line(lineChartData, {
  43. responsive: true
  44. });
  45. }
  46. </script>
  47. </body>
  48. </html>