index.htm 2.9 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596
  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. <script type="text/javascript">
  8. $(function () {
  9. $(document).ready(function() {
  10. Highcharts.setOptions({
  11. global: {
  12. useUTC: false
  13. }
  14. });
  15. var chart;
  16. $('#container').highcharts({
  17. chart: {
  18. type: 'spline',
  19. animation: Highcharts.svg, // don't animate in old IE
  20. marginRight: 10,
  21. events: {
  22. load: function() {
  23. // set up the updating of the chart each second
  24. var series = this.series[0];
  25. setInterval(function() {
  26. var x = (new Date()).getTime(), // current time
  27. y = Math.random();
  28. series.addPoint([x, y], true, true);
  29. }, 1000);
  30. }
  31. }
  32. },
  33. title: {
  34. text: 'Live random data'
  35. },
  36. xAxis: {
  37. type: 'datetime',
  38. tickPixelInterval: 150
  39. },
  40. yAxis: {
  41. title: {
  42. text: 'Value'
  43. },
  44. plotLines: [{
  45. value: 0,
  46. width: 1,
  47. color: '#808080'
  48. }]
  49. },
  50. tooltip: {
  51. formatter: function() {
  52. return '<b>'+ this.series.name +'</b><br/>'+
  53. Highcharts.dateFormat('%Y-%m-%d %H:%M:%S', this.x) +'<br/>'+
  54. Highcharts.numberFormat(this.y, 2);
  55. }
  56. },
  57. legend: {
  58. enabled: false
  59. },
  60. exporting: {
  61. enabled: false
  62. },
  63. series: [{
  64. name: 'Random data',
  65. data: (function() {
  66. // generate an array of random data
  67. var data = [],
  68. time = (new Date()).getTime(),
  69. i;
  70. for (i = -19; i <= 0; i++) {
  71. data.push({
  72. x: time + i * 1000,
  73. y: Math.random()
  74. });
  75. }
  76. return data;
  77. })()
  78. }]
  79. });
  80. });
  81. });
  82. </script>
  83. </head>
  84. <body>
  85. <script src="../../js/highcharts.js"></script>
  86. <script src="../../js/modules/exporting.js"></script>
  87. <div id="container" style="min-width: 310px; height: 400px; margin: 0 auto"></div>
  88. </body>
  89. </html>