updating.html 1.3 KB

12345678910111213141516171819202122232425262728293031323334353637383940414243444546474849
  1. <!doctype html>
  2. <head>
  3. <script src="http://cdnjs.cloudflare.com/ajax/libs/jquery/2.0.3/jquery.min.js"></script>
  4. <script src="http://cdnjs.cloudflare.com/ajax/libs/raphael/2.1.2/raphael-min.js"></script>
  5. <script src="../morris.js"></script>
  6. <script src="http://cdnjs.cloudflare.com/ajax/libs/prettify/r224/prettify.min.js"></script>
  7. <script src="lib/example.js"></script>
  8. <link rel="stylesheet" href="lib/example.css">
  9. <link rel="stylesheet" href="http://cdnjs.cloudflare.com/ajax/libs/prettify/r224/prettify.min.css">
  10. <link rel="stylesheet" href="../morris.css">
  11. </head>
  12. <body>
  13. <h1>Updating data</h1>
  14. <div id="graph"></div>
  15. <div id="reloadStatus">
  16. <pre id="code" class="prettyprint linenums">
  17. var nReloads = 0;
  18. function data(offset) {
  19. var ret = [];
  20. for (var x = 0; x <= 360; x += 10) {
  21. var v = (offset + x) % 360;
  22. ret.push({
  23. x: x,
  24. y: Math.sin(Math.PI * v / 180).toFixed(4),
  25. z: Math.cos(Math.PI * v / 180).toFixed(4)
  26. });
  27. }
  28. return ret;
  29. }
  30. var graph = Morris.Line({
  31. element: 'graph',
  32. data: data(0),
  33. xkey: 'x',
  34. ykeys: ['y', 'z'],
  35. labels: ['sin()', 'cos()'],
  36. parseTime: false,
  37. ymin: -1.0,
  38. ymax: 1.0,
  39. hideHover: true
  40. });
  41. function update() {
  42. nReloads++;
  43. graph.setData(data(5 * nReloads));
  44. $('#reloadStatus').text(nReloads + ' reloads');
  45. }
  46. setInterval(update, 100);
  47. </pre>
  48. </body>