index.htm 2.8 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119
  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="https://code.jquery.com/jquery-3.1.1.min.js"></script>
  12. <script src="../../code/highstock.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. /**
  17. * Load new data depending on the selected min and max
  18. */
  19. function afterSetExtremes(e) {
  20. var chart = Highcharts.charts[0];
  21. chart.showLoading('Loading data from server...');
  22. $.getJSON('https://www.highcharts.com/samples/data/from-sql.php?start=' + Math.round(e.min) +
  23. '&end=' + Math.round(e.max) + '&callback=?', function (data) {
  24. chart.series[0].setData(data);
  25. chart.hideLoading();
  26. });
  27. }
  28. // See source code from the JSONP handler at https://github.com/highcharts/highcharts/blob/v7.0.0/samples/data/from-sql.php
  29. $.getJSON('https://www.highcharts.com/samples/data/from-sql.php?callback=?', function (data) {
  30. // Add a null value for the end date
  31. data = [].concat(data, [[Date.UTC(2011, 9, 14, 19, 59), null, null, null, null]]);
  32. // create the chart
  33. Highcharts.stockChart('container', {
  34. chart: {
  35. type: 'candlestick',
  36. zoomType: 'x'
  37. },
  38. navigator: {
  39. adaptToUpdatedData: false,
  40. series: {
  41. data: data
  42. }
  43. },
  44. scrollbar: {
  45. liveRedraw: false
  46. },
  47. title: {
  48. text: 'AAPL history by the minute from 1998 to 2011'
  49. },
  50. subtitle: {
  51. text: 'Displaying 1.7 million data points in Highcharts Stock by async server loading'
  52. },
  53. rangeSelector: {
  54. buttons: [{
  55. type: 'hour',
  56. count: 1,
  57. text: '1h'
  58. }, {
  59. type: 'day',
  60. count: 1,
  61. text: '1d'
  62. }, {
  63. type: 'month',
  64. count: 1,
  65. text: '1m'
  66. }, {
  67. type: 'year',
  68. count: 1,
  69. text: '1y'
  70. }, {
  71. type: 'all',
  72. text: 'All'
  73. }],
  74. inputEnabled: false, // it supports only days
  75. selected: 4 // all
  76. },
  77. xAxis: {
  78. events: {
  79. afterSetExtremes: afterSetExtremes
  80. },
  81. minRange: 3600 * 1000 // one hour
  82. },
  83. yAxis: {
  84. floor: 0
  85. },
  86. series: [{
  87. data: data,
  88. dataGrouping: {
  89. enabled: false
  90. }
  91. }]
  92. });
  93. });
  94. </script>
  95. </body>
  96. </html>