bar.html 1.3 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445
  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. <script>
  12. var randomScalingFactor = function(){ return Math.round(Math.random()*100)};
  13. var barChartData = {
  14. labels : ["January","February","March","April","May","June","July"],
  15. datasets : [
  16. {
  17. fillColor : "rgba(220,220,220,0.5)",
  18. strokeColor : "rgba(220,220,220,0.8)",
  19. highlightFill: "rgba(220,220,220,0.75)",
  20. highlightStroke: "rgba(220,220,220,1)",
  21. data : [randomScalingFactor(),randomScalingFactor(),randomScalingFactor(),randomScalingFactor(),randomScalingFactor(),randomScalingFactor(),randomScalingFactor()]
  22. },
  23. {
  24. fillColor : "rgba(151,187,205,0.5)",
  25. strokeColor : "rgba(151,187,205,0.8)",
  26. highlightFill : "rgba(151,187,205,0.75)",
  27. highlightStroke : "rgba(151,187,205,1)",
  28. data : [randomScalingFactor(),randomScalingFactor(),randomScalingFactor(),randomScalingFactor(),randomScalingFactor(),randomScalingFactor(),randomScalingFactor()]
  29. }
  30. ]
  31. }
  32. window.onload = function(){
  33. var ctx = document.getElementById("canvas").getContext("2d");
  34. window.myBar = new Chart(ctx).Bar(barChartData, {
  35. responsive : true
  36. });
  37. }
  38. </script>
  39. </body>
  40. </html>