area-stacked.js 2.6 KB

1234567891011121314151617181920212223242526272829303132333435363738394041424344454647484950515253545556575859606162636465666768697071727374757677787980818283848586
  1. /*=========================================================================================
  2. File Name: area-stacked.js
  3. Description: google area stacked 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 Stacked 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(drawAreaStacked);
  16. // Callback that creates and populates a data table, instantiates the pie chart, passes in the data and draws it.
  17. function drawAreaStacked() {
  18. // Create the data table.
  19. var data = google.visualization.arrayToDataTable([
  20. ['Year', 'Product1', 'Product2', 'Product3', 'Product4'],
  21. ['2010', 880, 1200, 1500, 1800],
  22. ['2011', 530, 850, 750, 960],
  23. ['2012', 425, 650, 450, 350],
  24. ['2013', 750, 350, 820, 670],
  25. ['2014', 550, 780, 1220, 980],
  26. ['2015', 880, 300, 1340, 1240]
  27. ]);
  28. // Set chart options
  29. var options_area_stacked = {
  30. title: 'Company Performance',
  31. height: 400,
  32. fontSize: 12,
  33. curveType: 'function',
  34. colors: ['#DA4453', '#F6BB42', '#37BC9B', '#3BAFDA'],
  35. isStacked: true,
  36. pointSize: 5,
  37. areaOpacity: 0.5,
  38. chartArea: {
  39. left: '5%',
  40. width: '90%',
  41. height: 350
  42. },
  43. vAxis: {
  44. gridlines:{
  45. color: '#e9e9e9',
  46. count: 10
  47. },
  48. minValue: 0
  49. },
  50. legend: {
  51. position: 'top',
  52. alignment: 'center',
  53. textStyle: {
  54. fontSize: 12
  55. }
  56. }
  57. };
  58. // Instantiate and draw our chart, passing in some options.
  59. var area = new google.visualization.AreaChart(document.getElementById('area-stacked'));
  60. area.draw(data, options_area_stacked);
  61. }
  62. // Resize chart
  63. // ------------------------------
  64. $(function () {
  65. // Resize chart on menu width change and window resize
  66. $(window).on('resize', resize);
  67. $(".menu-toggle").on('click', resize);
  68. // Resize function
  69. function resize() {
  70. drawAreaStacked();
  71. }
  72. });