line.js 2.3 KB

1234567891011121314151617181920212223242526272829303132333435363738394041424344454647484950515253545556575859606162636465666768697071727374757677787980818283
  1. /*=========================================================================================
  2. File Name: line.js
  3. Description: google line 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. // Line 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(drawLine);
  16. // Callback that creates and populates a data table, instantiates the line chart, passes in the data and draws it.
  17. function drawLine() {
  18. // Create the data table.
  19. var data = google.visualization.arrayToDataTable([
  20. ['Year', 'Sales', 'Costs'],
  21. ['2010', 880, 250],
  22. ['2011', 530, 350],
  23. ['2012', 425, 650],
  24. ['2013', 750, 350],
  25. ['2014', 550, 780],
  26. ['2015', 880, 300]
  27. ]);
  28. // Set chart options
  29. var options_line = {
  30. height: 400,
  31. fontSize: 12,
  32. curveType: 'function',
  33. colors: ['#37BC9B', '#DA4453'],
  34. pointSize: 5,
  35. chartArea: {
  36. left: '5%',
  37. width: '90%',
  38. height: 350
  39. },
  40. vAxis: {
  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 line = new google.visualization.LineChart(document.getElementById('line-chart'));
  57. line.draw(data, options_line);
  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. drawLine();
  68. }
  69. });