area-stepped.js 2.3 KB

1234567891011121314151617181920212223242526272829303132333435363738394041424344454647484950515253545556575859606162636465666768697071727374757677787980
  1. /*=========================================================================================
  2. File Name: area-stepped.js
  3. Description: google area 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 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(drawAreaStepped);
  16. // Callback that creates and populates a data table, instantiates the pie chart, passes in the data and draws it.
  17. function drawAreaStepped() {
  18. // Create the data table.
  19. var data = google.visualization.arrayToDataTable([
  20. ['Director (Year)', 'Rotten Tomatoes', 'IMDB'],
  21. ['Alfred Hitchcock (1935)', 8.4, 7.9],
  22. ['Ralph Thomas (1959)', 6.9, 6.5],
  23. ['Don Sharp (1978)', 6.5, 6.4],
  24. ['James Hawes (2008)', 4.4, 6.2]
  25. ]);
  26. // Set chart options
  27. var options_bar = {
  28. height: 400,
  29. fontSize: 12,
  30. isStacked: true,
  31. colors: ['#37BC9B', '#DA4453'],
  32. chartArea: {
  33. left: '5%',
  34. width: '90%',
  35. height: 350
  36. },
  37. vAxis: {
  38. gridlines:{
  39. color: '#e9e9e9',
  40. count: 10
  41. },
  42. minValue: 0
  43. },
  44. legend: {
  45. position: 'top',
  46. alignment: 'center',
  47. textStyle: {
  48. fontSize: 12
  49. }
  50. }
  51. };
  52. // Instantiate and draw our chart, passing in some options.
  53. var bar = new google.visualization.SteppedAreaChart(document.getElementById('area-stepped'));
  54. bar.draw(data, options_bar);
  55. }
  56. // Resize chart
  57. // ------------------------------
  58. $(function () {
  59. // Resize chart on menu width change and window resize
  60. $(window).on('resize', resize);
  61. $(".menu-toggle").on('click', resize);
  62. // Resize function
  63. function resize() {
  64. drawAreaStepped();
  65. }
  66. });