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.

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