You can not select more than 25 topics Topics must start with a letter or number, can include dashes ('-') and can be up to 35 characters long.

data_label_combo-bar-line.html 3.7KB

1234567891011121314151617181920212223242526272829303132333435363738394041424344454647484950515253545556575859606162636465666768697071727374757677787980818283848586878889909192939495
  1. <!doctype html>
  2. <html>
  3. <head>
  4. <title>Combo Bar-Line Chart</title>
  5. <script src="http://cdnjs.cloudflare.com/ajax/libs/jquery/2.1.3/jquery.min.js"></script>
  6. <script src="../dist/Chart.bundle.js"></script>
  7. <style>
  8. canvas {
  9. -moz-user-select: none;
  10. -webkit-user-select: none;
  11. -ms-user-select: none;
  12. }
  13. </style>
  14. </head>
  15. <body>
  16. <div style="width: 75%">
  17. <canvas id="canvas"></canvas>
  18. </div>
  19. <button id="randomizeData">Randomize Data</button>
  20. <script>
  21. var randomScalingFactor = function() {
  22. return (Math.random() > 0.5 ? 1.0 : -1.0) * Math.round(Math.random() * 100);
  23. };
  24. var randomColorFactor = function() {
  25. return Math.round(Math.random() * 255);
  26. };
  27. var barChartData = {
  28. labels: ["January", "February", "March", "April", "May", "June", "July"],
  29. datasets: [{
  30. type: 'bar',
  31. label: 'Dataset 1',
  32. backgroundColor: "rgba(151,187,205,0.5)",
  33. data: [randomScalingFactor(), randomScalingFactor(), randomScalingFactor(), randomScalingFactor(), randomScalingFactor(), randomScalingFactor(), randomScalingFactor()],
  34. borderColor: 'white',
  35. borderWidth: 2
  36. }, {
  37. type: 'line',
  38. label: 'Dataset 2',
  39. backgroundColor: "rgba(151,187,205,0.5)",
  40. data: [randomScalingFactor(), randomScalingFactor(), randomScalingFactor(), randomScalingFactor(), randomScalingFactor(), randomScalingFactor(), randomScalingFactor()],
  41. borderColor: 'white',
  42. borderWidth: 2
  43. }, {
  44. type: 'bar',
  45. label: 'Dataset 3',
  46. backgroundColor: "rgba(220,220,220,0.5)",
  47. data: [randomScalingFactor(), randomScalingFactor(), randomScalingFactor(), randomScalingFactor(), randomScalingFactor(), randomScalingFactor(), randomScalingFactor()]
  48. }, ]
  49. };
  50. window.onload = function() {
  51. var ctx = document.getElementById("canvas").getContext("2d");
  52. window.myBar = new Chart(ctx, {
  53. type: 'bar',
  54. data: barChartData,
  55. options: {
  56. responsive: true,
  57. title: {
  58. display: true,
  59. text: 'Chart.js Combo Bar Line Chart'
  60. },
  61. animation: {
  62. onComplete: function () {
  63. var chartInstance = this.chart;
  64. var ctx = chartInstance.ctx;
  65. ctx.textAlign = "center";
  66. Chart.helpers.each(this.data.datasets.forEach(function (dataset, i) {
  67. var meta = chartInstance.controller.getDatasetMeta(i);
  68. Chart.helpers.each(meta.data.forEach(function (bar, index) {
  69. ctx.fillText(dataset.data[index], bar._model.x, bar._model.y - 10);
  70. }),this)
  71. }),this);
  72. }
  73. }
  74. }
  75. });
  76. };
  77. $('#randomizeData').click(function() {
  78. $.each(barChartData.datasets, function(i, dataset) {
  79. dataset.backgroundColor = 'rgba(' + randomColorFactor() + ',' + randomColorFactor() + ',' + randomColorFactor() + ',.7)';
  80. dataset.data = [randomScalingFactor(), randomScalingFactor(), randomScalingFactor(), randomScalingFactor(), randomScalingFactor(), randomScalingFactor(), randomScalingFactor()];
  81. });
  82. window.myBar.update();
  83. });
  84. </script>
  85. </body>
  86. </html>