You can not select more than 25 topics Topics must start with a letter or number, can include dashes ('-') and can be up to 35 characters long.

175 lines
4.3 KiB

9 years ago
  1. <!DOCTYPE HTML>
  2. <html>
  3. <head>
  4. <meta http-equiv="Content-Type" content="text/html; charset=utf-8">
  5. <title>Highcharts Example</title>
  6. <script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.8.2/jquery.min.js"></script>
  7. <style type="text/css">
  8. ${demo.css}
  9. </style>
  10. <script type="text/javascript">
  11. $(function () {
  12. var gaugeOptions = {
  13. chart: {
  14. type: 'solidgauge'
  15. },
  16. title: null,
  17. pane: {
  18. center: ['50%', '85%'],
  19. size: '140%',
  20. startAngle: -90,
  21. endAngle: 90,
  22. background: {
  23. backgroundColor: (Highcharts.theme && Highcharts.theme.background2) || '#EEE',
  24. innerRadius: '60%',
  25. outerRadius: '100%',
  26. shape: 'arc'
  27. }
  28. },
  29. tooltip: {
  30. enabled: false
  31. },
  32. // the value axis
  33. yAxis: {
  34. stops: [
  35. [0.1, '#55BF3B'], // green
  36. [0.5, '#DDDF0D'], // yellow
  37. [0.9, '#DF5353'] // red
  38. ],
  39. lineWidth: 0,
  40. minorTickInterval: null,
  41. tickPixelInterval: 400,
  42. tickWidth: 0,
  43. title: {
  44. y: -70
  45. },
  46. labels: {
  47. y: 16
  48. }
  49. },
  50. plotOptions: {
  51. solidgauge: {
  52. dataLabels: {
  53. y: 5,
  54. borderWidth: 0,
  55. useHTML: true
  56. }
  57. }
  58. }
  59. };
  60. // The speed gauge
  61. $('#container-speed').highcharts(Highcharts.merge(gaugeOptions, {
  62. yAxis: {
  63. min: 0,
  64. max: 200,
  65. title: {
  66. text: 'Speed'
  67. }
  68. },
  69. credits: {
  70. enabled: false
  71. },
  72. series: [{
  73. name: 'Speed',
  74. data: [80],
  75. dataLabels: {
  76. format: '<div style="text-align:center"><span style="font-size:25px;color:' +
  77. ((Highcharts.theme && Highcharts.theme.contrastTextColor) || 'black') + '">{y}</span><br/>' +
  78. '<span style="font-size:12px;color:silver">km/h</span></div>'
  79. },
  80. tooltip: {
  81. valueSuffix: ' km/h'
  82. }
  83. }]
  84. }));
  85. // The RPM gauge
  86. $('#container-rpm').highcharts(Highcharts.merge(gaugeOptions, {
  87. yAxis: {
  88. min: 0,
  89. max: 5,
  90. title: {
  91. text: 'RPM'
  92. }
  93. },
  94. series: [{
  95. name: 'RPM',
  96. data: [1],
  97. dataLabels: {
  98. format: '<div style="text-align:center"><span style="font-size:25px;color:' +
  99. ((Highcharts.theme && Highcharts.theme.contrastTextColor) || 'black') + '">{y:.1f}</span><br/>' +
  100. '<span style="font-size:12px;color:silver">* 1000 / min</span></div>'
  101. },
  102. tooltip: {
  103. valueSuffix: ' revolutions/min'
  104. }
  105. }]
  106. }));
  107. // Bring life to the dials
  108. setInterval(function () {
  109. // Speed
  110. var chart = $('#container-speed').highcharts(),
  111. point,
  112. newVal,
  113. inc;
  114. if (chart) {
  115. point = chart.series[0].points[0];
  116. inc = Math.round((Math.random() - 0.5) * 100);
  117. newVal = point.y + inc;
  118. if (newVal < 0 || newVal > 200) {
  119. newVal = point.y - inc;
  120. }
  121. point.update(newVal);
  122. }
  123. // RPM
  124. chart = $('#container-rpm').highcharts();
  125. if (chart) {
  126. point = chart.series[0].points[0];
  127. inc = Math.random() - 0.5;
  128. newVal = point.y + inc;
  129. if (newVal < 0 || newVal > 5) {
  130. newVal = point.y - inc;
  131. }
  132. point.update(newVal);
  133. }
  134. }, 2000);
  135. });
  136. </script>
  137. </head>
  138. <body>
  139. <script src="../../js/highcharts.js"></script>
  140. <script src="../../js/highcharts-more.js"></script>
  141. <script src="../../js/modules/solid-gauge.js"></script>
  142. <div style="width: 600px; height: 400px; margin: 0 auto">
  143. <div id="container-speed" style="width: 300px; height: 200px; float: left"></div>
  144. <div id="container-rpm" style="width: 300px; height: 200px; float: left"></div>
  145. </div>
  146. </body>
  147. </html>