3d-pie-exploded.js 2.2 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475
  1. /*=========================================================================================
  2. File Name: 3d-pie-exploded.js
  3. Description: google 3D pie exploded 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. // 3D pie exploded 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(drawPie3dExploded);
  16. // Callback that creates and populates a data table, instantiates the pie chart, passes in the data and draws it.
  17. function drawPie3dExploded() {
  18. // Create the data table.
  19. var data = google.visualization.arrayToDataTable([
  20. ['Task', 'Hours per Day'],
  21. ['Work', 11],
  22. ['Eat', 2],
  23. ['Commute', 2],
  24. ['Watch TV', 2],
  25. ['Sleep', 7]
  26. ]);
  27. // Set chart options
  28. var options_pie3d_exploded = {
  29. title: 'My Daily Activities',
  30. is3D: true,
  31. pieSliceText: 'label',
  32. height: 400,
  33. fontSize: 12,
  34. colors:['#99B898','#FECEA8', '#FF847C', '#E84A5F', '#474747'],
  35. chartArea: {
  36. left: '5%',
  37. width: '90%',
  38. height: 350
  39. },
  40. slices: {
  41. 1: {offset: 0.20},
  42. 2: {offset: 0.15},
  43. 3: {offset: 0.16},
  44. 4: {offset: 0.12},
  45. }
  46. };
  47. // Instantiate and draw our chart, passing in some options.
  48. var pie3dExploded = new google.visualization.PieChart(document.getElementById('pie-3d-exploded'));
  49. pie3dExploded.draw(data, options_pie3d_exploded);
  50. }
  51. // Resize chart
  52. // ------------------------------
  53. $(function () {
  54. // Resize chart on menu width change and window resize
  55. $(window).on('resize', resize);
  56. $(".menu-toggle").on('click', resize);
  57. // Resize function
  58. function resize() {
  59. drawPie3dExploded();
  60. }
  61. });