bar.js 2.2 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384
  1. /*=========================================================================================
  2. File Name: bar.js
  3. Description: google horizontal bar 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 chart
  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(drawBar);
  16. // Callback that creates and populates a data table, instantiates the pie chart, passes in the data and draws it.
  17. function drawBar() {
  18. // Create the data table.
  19. var data = google.visualization.arrayToDataTable([
  20. ['Year', 'Sales', 'Costs'],
  21. ['2011', 880, 250],
  22. ['2012', 730, 300],
  23. ['2013', 960, 450],
  24. ['2014', 1340, 430],
  25. ['2015', 1560, 540]
  26. ]);
  27. // Set chart options
  28. var options_bar = {
  29. height: 400,
  30. fontSize: 12,
  31. colors:['#2494be','#F6B75A'],
  32. chartArea: {
  33. left: '5%',
  34. width: '90%',
  35. height: 350
  36. },
  37. hAxis: {
  38. gridlines:{
  39. color: '#e9e9e9',
  40. },
  41. },
  42. vAxis: {
  43. gridlines:{
  44. count: 10
  45. },
  46. minValue: 0
  47. },
  48. legend: {
  49. position: 'top',
  50. alignment: 'center',
  51. textStyle: {
  52. fontSize: 12
  53. }
  54. }
  55. };
  56. // Instantiate and draw our chart, passing in some options.
  57. var bar = new google.visualization.BarChart(document.getElementById('bar-chart'));
  58. bar.draw(data, options_bar);
  59. }
  60. // Resize chart
  61. // ------------------------------
  62. $(function () {
  63. // Resize chart on menu width change and window resize
  64. $(window).on('resize', resize);
  65. $(".menu-toggle").on('click', resize);
  66. // Resize function
  67. function resize() {
  68. drawBar();
  69. }
  70. });