sample_gauge.html 2.5 KB

12345678910111213141516171819202122232425262728293031323334353637383940414243444546474849505152535455565758596061626364656667686970717273747576777879808182838485
  1. <html>
  2. <head>
  3. <style type="text/css">
  4. #chart_div1 {
  5. background-color: #e0e0a0;
  6. }
  7. #chart_div2 {
  8. background-color: #c0c0a0;
  9. }
  10. </style>
  11. <script type='text/javascript' src='https://www.google.com/jsapi'></script>
  12. <script type='text/javascript'>
  13. google.load('visualization', '1', {packages:['gauge']});
  14. google.setOnLoadCallback(drawCharts);
  15. function drawChart1() {
  16. var data = new google.visualization.DataTable();
  17. data.addRows(4);
  18. data.addColumn('number', 'Label');
  19. data.setValue(0, 0, 0);
  20. data.setValue(1, 0, 5);
  21. data.setValue(2, 0, 10);
  22. data.setValue(3, 0, 15);
  23. data.addColumn('number', 'Delta');
  24. data.setValue(0, 1, 40);
  25. data.setValue(1, 1, 45);
  26. data.setValue(2, 1, 50);
  27. data.setValue(3, 1, 55);
  28. data.addColumn('number', 'Second');
  29. data.setValue(0, 2, 85);
  30. data.setValue(1, 2, 90);
  31. data.setValue(2, 2, 95);
  32. data.setValue(3, 2, 100);
  33. var chart1 = new google.visualization.Gauge(document.getElementById('chart_div1'));
  34. var options = {
  35. width: 600, height: 450,
  36. greenFrom: 0, greenTo: 30,
  37. redFrom: 90, redTo: 100,
  38. yellowFrom:70, yellowTo: 90,
  39. minorTicks: 5};
  40. chart1.draw(data, options);
  41. }
  42. function drawChart2() {
  43. var data = new google.visualization.DataTable();
  44. data.addRows(1);
  45. data.addColumn('number', '11211');
  46. data.setValue(0, 0, 0);
  47. data.addColumn('number', '11212');
  48. data.setValue(0, 1, 20);
  49. data.addColumn('number', '11213');
  50. data.setValue(0, 2, 40);
  51. data.addColumn('number', '11214');
  52. data.setValue(0, 3, 60);
  53. data.addColumn('number', '11215');
  54. data.setValue(0, 4, 80);
  55. data.addColumn('number', '11216');
  56. data.setValue(0, 5, 100);
  57. var chart2 = new google.visualization.Gauge(document.getElementById('chart_div2'));
  58. var options = {
  59. width: 600, height: 400,
  60. greenFrom: 0, greenTo: 30, // greenColor: '#206020',
  61. redFrom: 90, redTo: 100, // redColor: '#ff4040',
  62. yellowFrom:30, yellowTo: 90, // yellowColor: '#e0e000',
  63. minorTicks: 5}
  64. chart2.draw(data, options);
  65. }
  66. function drawCharts() {
  67. drawChart1();
  68. drawChart2();
  69. }
  70. </script>
  71. </head>
  72. <body>
  73. <div id='chart_div1'></div>
  74. <div id='chart_div2'></div>
  75. </body>
  76. </html>