pie-diff-invert.js 2.5 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384
  1. /*=========================================================================================
  2. File Name: pie-diff-invert.js
  3. Description: google pie diff invert 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. // Pie diff invert 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(drawPieDiffInvert);
  16. // Callback that creates and populates a data table, instantiates the pie chart, passes in the data and draws it.
  17. function drawPieDiffInvert() {
  18. // Create the data table.
  19. // Old data
  20. var oldData = google.visualization.arrayToDataTable([
  21. ['Major', 'Degrees'],
  22. ['Business', 256070], ['Education', 108034],
  23. ['Social Sciences & History', 127101], ['Health', 81863],
  24. ['Psychology', 74194]
  25. ]);
  26. // New data
  27. var newData = google.visualization.arrayToDataTable([
  28. ['Major', 'Degrees'],
  29. ['Business', 358293], ['Education', 101265],
  30. ['Social Sciences & History', 172780], ['Health', 129634],
  31. ['Psychology', 97216]
  32. ]);
  33. // Set chart options
  34. var options_diff_invert = {
  35. title: 'My Daily Activities',
  36. height: 400,
  37. fontSize: 12,
  38. colors:['#99B898','#FECEA8', '#FF847C', '#E84A5F', '#474747'],
  39. chartArea: {
  40. left: '5%',
  41. width: '90%',
  42. height: 350
  43. },
  44. diff: {
  45. oldData: {
  46. inCenter: false,
  47. }
  48. }
  49. };
  50. // Instantiate and draw our chart, passing in some options.
  51. var pieDiffRadius = new google.visualization.PieChart(document.getElementById('pie-diff-invert'));
  52. // Set data
  53. var diffData = pieDiffRadius.computeDiff(oldData, newData);
  54. pieDiffRadius.draw(diffData, options_diff_invert);
  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. drawPieDiffInvert();
  65. }
  66. });