bar-stacked.js 2.5 KB

12345678910111213141516171819202122232425262728293031323334353637383940414243444546474849505152535455565758596061626364656667686970717273747576777879808182
  1. /*=========================================================================================
  2. File Name: bar-stacked.js
  3. Description: google horizontal stacked 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. // Stacked 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(drawBarStacked);
  16. // Callback that creates and populates a data table, instantiates the pie chart, passes in the data and draws it.
  17. function drawBarStacked() {
  18. // Create the data table.
  19. var data = google.visualization.arrayToDataTable([
  20. ['Genre', 'Fantasy & Sci Fi', 'Romance', 'Mystery/Crime', 'General', 'Western', { role: 'annotation' } ],
  21. ['2000', 10, 15, 25, 35, 45, ''],
  22. ['2010', 12, 20, 25, 32, 36, ''],
  23. ['2020', 5, 24, 20, 34, 17, ''],
  24. ['2030', 18, 25, 30, 38, 24, ''],
  25. ['2040', 16, 22, 23, 28, 15, ''],
  26. ['2050', 8, 26, 20, 42, 30, ''],
  27. ['2060', 24, 17, 24, 35, 14, '']
  28. ]);
  29. // Set chart options
  30. var options_bar_stacked = {
  31. height: 400,
  32. fontSize: 12,
  33. colors: ['#99B898','#FECEA8', '#FF847C', '#E84A5F', '#474747'],
  34. chartArea: {
  35. left: '5%',
  36. width: '90%',
  37. height: 350
  38. },
  39. isStacked: true,
  40. hAxis: {
  41. gridlines:{
  42. color: '#e9e9e9',
  43. count: 10
  44. },
  45. minValue: 0
  46. },
  47. legend: {
  48. position: 'top',
  49. alignment: 'center',
  50. textStyle: {
  51. fontSize: 12
  52. }
  53. }
  54. };
  55. // Instantiate and draw our chart, passing in some options.
  56. var bar = new google.visualization.BarChart(document.getElementById('stacked-bar-chart'));
  57. bar.draw(data, options_bar_stacked);
  58. }
  59. // Resize chart
  60. // ------------------------------
  61. $(function () {
  62. // Resize chart on menu width change and window resize
  63. $(window).on('resize', resize);
  64. $(".menu-toggle").on('click', resize);
  65. // Resize function
  66. function resize() {
  67. drawBarStacked();
  68. }
  69. });