area-stacked-stepped.js 2.5 KB

12345678910111213141516171819202122232425262728293031323334353637383940414243444546474849505152535455565758596061626364656667686970717273747576777879808182
  1. /*=========================================================================================
  2. File Name: area-stacked-stepped.js
  3. Description: google area stacked stepped 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. // Area stack stepped 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(drawAreaStackedStepped);
  16. // Callback that creates and populates a data table, instantiates the pie chart, passes in the data and draws it.
  17. function drawAreaStackedStepped() {
  18. // Create the data table.
  19. var data = google.visualization.arrayToDataTable([
  20. ['Year', 'Colonial', 'Victorian', 'Modern', 'Contemporary'],
  21. ['2011', 5.2, 3.6, 2.8, 2 ],
  22. ['2012', 5.6, 4, 2.8, 3 ],
  23. ['2013', 7.2, 2.2, 2.2, 6 ],
  24. ['2014', 8, 1.7, 0.8, 4 ]
  25. ]);
  26. // Set chart options
  27. var options_bar = {
  28. height: 400,
  29. fontSize: 12,
  30. isStacked: 'relative',
  31. colors: ['#DA4453', '#F6BB42', '#37BC9B', '#3BAFDA'],
  32. chartArea: {
  33. left: '5%',
  34. width: '90%',
  35. height: 350
  36. },
  37. vAxis: {
  38. gridlines:{
  39. color: '#e9e9e9',
  40. count: 10
  41. },
  42. ticks: [0, .3, .6, .9, 1],
  43. minValue: 0
  44. },
  45. legend: {
  46. position: 'top',
  47. alignment: 'center',
  48. maxLines: 3,
  49. textStyle: {
  50. fontSize: 12
  51. }
  52. }
  53. };
  54. // Instantiate and draw our chart, passing in some options.
  55. var bar = new google.visualization.SteppedAreaChart(document.getElementById('area-stacked-stepped'));
  56. bar.draw(data, options_bar);
  57. }
  58. // Resize chart
  59. // ------------------------------
  60. $(function () {
  61. // Resize chart on menu width change and window resize
  62. $(window).on('resize', resize);
  63. $(".menu-toggle").on('click', resize);
  64. // Resize function
  65. function resize() {
  66. drawAreaStackedStepped();
  67. }
  68. });