histogram.js 3.3 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103
  1. /*=========================================================================================
  2. File Name: histogram.js
  3. Description: google histogram 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. // Histogram 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(drawHistogram);
  16. // Callback that creates and populates a data table, instantiates the pie chart, passes in the data and draws it.
  17. function drawHistogram() {
  18. // Create the data table.
  19. var data = google.visualization.arrayToDataTable([
  20. ['Dinosaur', 'Length'],
  21. ['Acrocanthosaurus (top-spined lizard)', 12.2],
  22. ['Albertosaurus (Alberta lizard)', 9.1],
  23. ['Allosaurus (other lizard)', 12.2],
  24. ['Apatosaurus (deceptive lizard)', 22.9],
  25. ['Archaeopteryx (ancient wing)', 0.9],
  26. ['Argentinosaurus (Argentina lizard)', 36.6],
  27. ['Baryonyx (heavy claws)', 9.1],
  28. ['Brachiosaurus (arm lizard)', 30.5],
  29. ['Ceratosaurus (horned lizard)', 6.1],
  30. ['Coelophysis (hollow form)', 2.7],
  31. ['Compsognathus (elegant jaw)', 0.9],
  32. ['Deinonychus (terrible claw)', 2.7],
  33. ['Diplodocus (double beam)', 27.1],
  34. ['Dromicelomimus (emu mimic)', 3.4],
  35. ['Gallimimus (fowl mimic)', 5.5],
  36. ['Mamenchisaurus (Mamenchi lizard)', 21.0],
  37. ['Megalosaurus (big lizard)', 7.9],
  38. ['Microvenator (small hunter)', 1.2],
  39. ['Ornithomimus (bird mimic)', 4.6],
  40. ['Oviraptor (egg robber)', 1.5],
  41. ['Plateosaurus (flat lizard)', 7.9],
  42. ['Sauronithoides (narrow-clawed lizard)', 2.0],
  43. ['Seismosaurus (tremor lizard)', 45.7],
  44. ['Spinosaurus (spiny lizard)', 12.2],
  45. ['Supersaurus (super lizard)', 30.5],
  46. ['Tyrannosaurus (tyrant lizard)', 15.2],
  47. ['Ultrasaurus (ultra lizard)', 30.5],
  48. ['Velociraptor (swift robber)', 1.8]
  49. ]);
  50. // Set chart options
  51. var options_histogram = {
  52. height: 400,
  53. fontSize: 12,
  54. colors: ['#bba9e8'],
  55. chartArea: {
  56. left: '5%',
  57. width: '90%',
  58. height: 350
  59. },
  60. vAxis: {
  61. gridlines:{
  62. color: '#e9e9e9',
  63. count: 10
  64. },
  65. minValue: 0
  66. },
  67. legend: {
  68. position: 'top',
  69. alignment: 'center',
  70. textStyle: {
  71. fontSize: 12
  72. }
  73. }
  74. };
  75. // Instantiate and draw our chart, passing in some options.
  76. var bar = new google.visualization.Histogram(document.getElementById('histogram'));
  77. bar.draw(data, options_histogram);
  78. }
  79. // Resize chart
  80. // ------------------------------
  81. $(function () {
  82. // Resize chart on menu width change and window resize
  83. $(window).on('resize', resize);
  84. $(".menu-toggle").on('click', resize);
  85. // Resize function
  86. function resize() {
  87. drawHistogram();
  88. }
  89. });