index.html 4.8 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142
  1. <!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
  2. <html>
  3. <head>
  4. <meta http-equiv="Content-Type" content="text/html; charset=utf-8">
  5. <title>Flot Examples: Real-time updates</title>
  6. <link href="../examples.css" rel="stylesheet" type="text/css">
  7. <script language="javascript" type="text/javascript" src="../../source/jquery.js"></script>
  8. <script language="javascript" type="text/javascript" src="../../source/jquery.canvaswrapper.js"></script>
  9. <script language="javascript" type="text/javascript" src="../../source/jquery.colorhelpers.js"></script>
  10. <script language="javascript" type="text/javascript" src="../../source/jquery.flot.js"></script>
  11. <script language="javascript" type="text/javascript" src="../../source/jquery.flot.saturated.js"></script>
  12. <script language="javascript" type="text/javascript" src="../../source/jquery.flot.browser.js"></script>
  13. <script language="javascript" type="text/javascript" src="../../source/jquery.flot.drawSeries.js"></script>
  14. <script language="javascript" type="text/javascript" src="../../source/jquery.flot.errorbars.js"></script>
  15. <script language="javascript" type="text/javascript" src="../../source/jquery.flot.uiConstants.js"></script>
  16. <script language="javascript" type="text/javascript" src="../../source/jquery.flot.logaxis.js"></script>
  17. <script language="javascript" type="text/javascript" src="../../source/jquery.flot.symbol.js"></script>
  18. <script language="javascript" type="text/javascript" src="../../source/jquery.flot.flatdata.js"></script>
  19. <script language="javascript" type="text/javascript" src="../../source/jquery.flot.navigate.js"></script>
  20. <script language="javascript" type="text/javascript" src="../../source/jquery.flot.fillbetween.js"></script>
  21. <script language="javascript" type="text/javascript" src="../../source/jquery.flot.stack.js"></script>
  22. <script language="javascript" type="text/javascript" src="../../source/jquery.flot.touchNavigate.js"></script>
  23. <script language="javascript" type="text/javascript" src="../../source/jquery.flot.hover.js"></script>
  24. <script language="javascript" type="text/javascript" src="../../source/jquery.flot.touch.js"></script>
  25. <script language="javascript" type="text/javascript" src="../../source/jquery.flot.time.js"></script>
  26. <script language="javascript" type="text/javascript" src="../../source/jquery.flot.axislabels.js"></script>
  27. <script language="javascript" type="text/javascript" src="../../source/jquery.flot.selection.js"></script>
  28. <script language="javascript" type="text/javascript" src="../../source/jquery.flot.composeImages.js"></script>
  29. <script language="javascript" type="text/javascript" src="../../source/jquery.flot.legend.js"></script>
  30. <script type="text/javascript">
  31. $(function() {
  32. // We use an inline data source in the example, usually data would
  33. // be fetched from a server
  34. var data = [],
  35. totalPoints = 300;
  36. function getRandomData() {
  37. if (data.length > 0)
  38. data = data.slice(1);
  39. // Do a random walk
  40. while (data.length < totalPoints) {
  41. var prev = data.length > 0 ? data[data.length - 1] : 50,
  42. y = prev + Math.random() * 10 - 5;
  43. if (y < 0) {
  44. y = 0;
  45. } else if (y > 100) {
  46. y = 100;
  47. }
  48. data.push(y);
  49. }
  50. // Zip the generated y values with the x values
  51. var res = [];
  52. for (var i = 0; i < data.length; ++i) {
  53. res.push([i, data[i]])
  54. }
  55. return res;
  56. }
  57. // Set up the control widget
  58. var updateInterval = 30;
  59. $("#updateInterval").val(updateInterval).change(function () {
  60. var v = $(this).val();
  61. if (v && !isNaN(+v)) {
  62. updateInterval = +v;
  63. if (updateInterval < 1) {
  64. updateInterval = 1;
  65. } else if (updateInterval > 2000) {
  66. updateInterval = 2000;
  67. }
  68. $(this).val("" + updateInterval);
  69. }
  70. });
  71. var plot = $.plot("#placeholder", [ getRandomData() ], {
  72. series: {
  73. shadowSize: 0 // Drawing is faster without shadows
  74. },
  75. yaxis: {
  76. min: 0,
  77. max: 100
  78. },
  79. xaxis: {
  80. show: false
  81. }
  82. });
  83. function update() {
  84. plot.setData([getRandomData()]);
  85. // Since the axes don't change, we don't need to call plot.setupGrid()
  86. plot.draw();
  87. setTimeout(update, updateInterval);
  88. }
  89. update();
  90. // Add the Flot version string to the footer
  91. $("#footer").prepend("Flot " + $.plot.version + " &ndash; ");
  92. });
  93. </script>
  94. </head>
  95. <body>
  96. <div id="header">
  97. <h2>Real-time updates</h2>
  98. </div>
  99. <div id="content">
  100. <div class="demo-container">
  101. <div id="placeholder" class="demo-placeholder"></div>
  102. </div>
  103. <p>You can update a chart periodically to get a real-time effect by using a timer to insert the new data in the plot and redraw it.</p>
  104. <p>Time between updates: <input id="updateInterval" type="text" value="" style="text-align: right; width:5em"> milliseconds</p>
  105. </div>
  106. <div id="footer">
  107. Copyright &copy; 2007 - 2014 IOLA and Ole Laursen
  108. </div>
  109. </body>
  110. </html>