showrealtime.js 3.2 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144
  1. var apiName="all";
  2. function createChart(div,title,api,item) {
  3. Highcharts.chart(div, {
  4. chart: {
  5. type: 'spline'
  6. },
  7. title: {
  8. text: title
  9. },
  10. accessibility: {
  11. announceNewData: {
  12. enabled: true,
  13. minAnnounceInterval: 15000,
  14. announcementFormatter: function (allSeries, newSeries, newPoint) {
  15. if (newPoint) {
  16. return 'New point added. Value: ' + newPoint.y;
  17. }
  18. return false;
  19. }
  20. }
  21. },
  22. data: {
  23. csvURL: './pref_realtime_get.php?api='+api+'&item='+item,
  24. enablePolling: true,
  25. dataRefreshRate: 60
  26. }
  27. });
  28. }
  29. function create_live(container,title,api){
  30. Highcharts.chart(container, {
  31. chart: {
  32. type: 'gauge',
  33. plotBackgroundColor: null,
  34. plotBackgroundImage: null,
  35. plotBorderWidth: 0,
  36. plotShadow: false
  37. },
  38. title: {
  39. text: title
  40. },
  41. pane: {
  42. startAngle: -150,
  43. endAngle: 150,
  44. background: [{
  45. backgroundColor: {
  46. linearGradient: { x1: 0, y1: 0, x2: 0, y2: 1 },
  47. stops: [
  48. [0, '#FFF'],
  49. [1, '#333']
  50. ]
  51. },
  52. borderWidth: 0,
  53. outerRadius: '109%'
  54. }, {
  55. backgroundColor: {
  56. linearGradient: { x1: 0, y1: 0, x2: 0, y2: 1 },
  57. stops: [
  58. [0, '#333'],
  59. [1, '#FFF']
  60. ]
  61. },
  62. borderWidth: 1,
  63. outerRadius: '107%'
  64. }, {
  65. // default background
  66. }, {
  67. backgroundColor: '#DDD',
  68. borderWidth: 0,
  69. outerRadius: '105%',
  70. innerRadius: '103%'
  71. }]
  72. },
  73. // the value axis
  74. yAxis: {
  75. min: 0,
  76. max: 5000,
  77. minorTickInterval: 'auto',
  78. minorTickWidth: 1,
  79. minorTickLength: 10,
  80. minorTickPosition: 'inside',
  81. minorTickColor: '#666',
  82. tickPixelInterval: 30,
  83. tickWidth: 2,
  84. tickPosition: 'inside',
  85. tickLength: 10,
  86. tickColor: '#666',
  87. labels: {
  88. step: 2,
  89. rotation: 'auto'
  90. },
  91. title: {
  92. text: '毫秒/API'
  93. },
  94. plotBands: [{
  95. from: 0,
  96. to: 2000,
  97. color: '#55BF3B' // green
  98. }, {
  99. from: 2000,
  100. to: 3500,
  101. color: '#DDDF0D' // yellow
  102. }, {
  103. from: 3500,
  104. to: 5000,
  105. color: '#DF5353' // red
  106. }]
  107. },
  108. series: [{
  109. name: 'Speed',
  110. data: [80],
  111. tooltip: {
  112. valueSuffix: ' ms/s'
  113. }
  114. }]
  115. },
  116. // Add some life
  117. function (chart) {
  118. if (!chart.renderer.forExport) {
  119. setInterval(function () {
  120. $.get("./pref_live.php?api="+api+"&item=average",function(data){
  121. var point = chart.series[0].points[0];
  122. newVal = parseInt(data);
  123. point.update(newVal);
  124. });
  125. }, 3000);
  126. }
  127. });
  128. }