index.htm 2.4 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101
  1. <!DOCTYPE HTML>
  2. <html>
  3. <head>
  4. <meta http-equiv="Content-Type" content="text/html; charset=utf-8">
  5. <meta name="viewport" content="width=device-width, initial-scale=1">
  6. <title>Highstock Example</title>
  7. <style type="text/css">
  8. </style>
  9. </head>
  10. <body>
  11. <script src="../../code/highstock.js"></script>
  12. <script src="../../code/modules/data.js"></script>
  13. <script src="../../code/modules/exporting.js"></script>
  14. <div id="container" style="height: 400px; min-width: 310px"></div>
  15. <script type="text/javascript">
  16. Highcharts.getJSON('https://cdn.jsdelivr.net/gh/highcharts/highcharts@v7.0.0/samples/data/large-dataset.json', function (data) {
  17. // Create a timer
  18. var start = +new Date();
  19. // Create the chart
  20. Highcharts.stockChart('container', {
  21. chart: {
  22. events: {
  23. load: function () {
  24. if (!window.TestController) {
  25. this.setTitle(null, {
  26. text: 'Built chart in ' + (new Date() - start) + 'ms'
  27. });
  28. }
  29. }
  30. },
  31. zoomType: 'x'
  32. },
  33. rangeSelector: {
  34. buttons: [{
  35. type: 'day',
  36. count: 3,
  37. text: '3d'
  38. }, {
  39. type: 'week',
  40. count: 1,
  41. text: '1w'
  42. }, {
  43. type: 'month',
  44. count: 1,
  45. text: '1m'
  46. }, {
  47. type: 'month',
  48. count: 6,
  49. text: '6m'
  50. }, {
  51. type: 'year',
  52. count: 1,
  53. text: '1y'
  54. }, {
  55. type: 'all',
  56. text: 'All'
  57. }],
  58. selected: 3
  59. },
  60. yAxis: {
  61. title: {
  62. text: 'Temperature (°C)'
  63. }
  64. },
  65. title: {
  66. text: 'Hourly temperatures in Vik i Sogn, Norway, 2009-2017'
  67. },
  68. subtitle: {
  69. text: 'Built chart in ...' // dummy text to reserve space for dynamic subtitle
  70. },
  71. series: [{
  72. name: 'Temperature',
  73. data: data.data,
  74. pointStart: data.pointStart,
  75. pointInterval: data.pointInterval,
  76. tooltip: {
  77. valueDecimals: 1,
  78. valueSuffix: '°C'
  79. }
  80. }]
  81. });
  82. });
  83. </script>
  84. </body>
  85. </html>