index.htm 2.2 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687
  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. <script src="../../code/modules/export-data.js"></script>
  15. <div id="container" style="height: 400px; min-width: 310px"></div>
  16. <script type="text/javascript">
  17. Highcharts.getJSON('https://cdn.jsdelivr.net/gh/highcharts/highcharts@v7.0.0/samples/data/usdeur.json', function (data) {
  18. var startDate = new Date(data[data.length - 1][0]),
  19. minRate = 1,
  20. maxRate = 0,
  21. startPeriod,
  22. date,
  23. rate,
  24. index;
  25. startDate.setMonth(startDate.getMonth() - 3); // a quarter of a year before last data point
  26. startPeriod = Date.UTC(startDate.getFullYear(), startDate.getMonth(), startDate.getDate());
  27. for (index = data.length - 1; index >= 0; index = index - 1) {
  28. date = data[index][0]; // data[i][0] is date
  29. rate = data[index][1]; // data[i][1] is exchange rate
  30. if (date < startPeriod) {
  31. break; // stop measuring highs and lows
  32. }
  33. if (rate > maxRate) {
  34. maxRate = rate;
  35. }
  36. if (rate < minRate) {
  37. minRate = rate;
  38. }
  39. }
  40. // Create the chart
  41. Highcharts.stockChart('container', {
  42. rangeSelector: {
  43. selected: 1
  44. },
  45. title: {
  46. text: 'USD to EUR exchange rate'
  47. },
  48. yAxis: {
  49. title: {
  50. text: 'Exchange rate'
  51. },
  52. plotBands: [{
  53. from: minRate,
  54. to: maxRate,
  55. color: 'rgba(68, 170, 213, 0.2)',
  56. label: {
  57. text: 'Last quarter year\'s value range'
  58. }
  59. }]
  60. },
  61. series: [{
  62. name: 'USD to EUR',
  63. data: data,
  64. tooltip: {
  65. valueDecimals: 4
  66. }
  67. }]
  68. });
  69. });
  70. </script>
  71. </body>
  72. </html>