bar-intervals.js 3.1 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101
  1. /*=========================================================================================
  2. File Name: bar-intervals.js
  3. Description: google bar interval chart
  4. ----------------------------------------------------------------------------------------
  5. Item Name: Robust - Responsive Admin Theme
  6. Version: 1.2
  7. Author: PIXINVENT
  8. Author URL: http://www.themeforest.net/user/pixinvent
  9. ==========================================================================================*/
  10. // Bar Intervals
  11. // ------------------------------
  12. // Load the Visualization API and the corechart package.
  13. google.load('visualization', '1.0', {'packages':['corechart']});
  14. // Set a callback to run when the Google Visualization API is loaded.
  15. google.setOnLoadCallback(drawBarIntervals);
  16. // Callback that creates and populates a data table, instantiates the pie chart, passes in the data and draws it.
  17. function drawBarIntervals() {
  18. // Create the data table.
  19. var data = new google.visualization.DataTable();
  20. data.addColumn('number', 'x');
  21. data.addColumn('number', 'values');
  22. data.addColumn({id:'i0', type:'number', role:'interval'});
  23. data.addColumn({id:'i1', type:'number', role:'interval'});
  24. data.addColumn({id:'i2', type:'number', role:'interval'});
  25. data.addColumn({id:'i2', type:'number', role:'interval'});
  26. data.addColumn({id:'i2', type:'number', role:'interval'});
  27. data.addColumn({id:'i2', type:'number', role:'interval'});
  28. data.addRows([
  29. [1, 100, 90, 110, 85, 96, 104, 120],
  30. [2, 120, 95, 130, 90, 113, 124, 140],
  31. [3, 130, 105, 140, 100, 117, 133, 139],
  32. [4, 90, 85, 95, 85, 88, 92, 95],
  33. [5, 70, 74, 63, 67, 69, 70, 72],
  34. [6, 30, 39, 22, 21, 28, 34, 40],
  35. [7, 80, 77, 83, 70, 77, 85, 90],
  36. [8, 100, 90, 110, 85, 95, 102, 110]]);
  37. // Set chart options
  38. var options_bar_interval = {
  39. curveType: 'function',
  40. series: [{'color': '#f4a911'}],
  41. intervals: { style: 'bars' },
  42. height: 400,
  43. fontSize: 12,
  44. chartArea: {
  45. left: '5%',
  46. width: '90%',
  47. height: 350
  48. },
  49. vAxis: {
  50. gridlines:{
  51. color: '#e9e9e9',
  52. count: 5
  53. },
  54. minValue: 0
  55. },
  56. hAxis: {
  57. gridlines:{
  58. color: '#e9e9e9',
  59. count: 5
  60. },
  61. minValue: 0.5,
  62. maxValue: 8.5
  63. },
  64. legend: {
  65. position: 'top',
  66. alignment: 'center',
  67. textStyle: {
  68. fontSize: 12
  69. }
  70. }
  71. };
  72. // Instantiate and draw our chart, passing in some options.
  73. var bar = new google.visualization.LineChart(document.getElementById('bar-intervals'));
  74. bar.draw(data, options_bar_interval);
  75. }
  76. // Resize chart
  77. // ------------------------------
  78. $(function () {
  79. // Resize chart on menu width change and window resize
  80. $(window).on('resize', resize);
  81. $(".menu-toggle").on('click', resize);
  82. // Resize function
  83. function resize() {
  84. drawBarIntervals();
  85. }
  86. });