index.htm 2.5 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596
  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]), // Get year of last data point
  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. plotLines: [{
  53. value: minRate,
  54. color: 'green',
  55. dashStyle: 'shortdash',
  56. width: 2,
  57. label: {
  58. text: 'Last quarter minimum'
  59. }
  60. }, {
  61. value: maxRate,
  62. color: 'red',
  63. dashStyle: 'shortdash',
  64. width: 2,
  65. label: {
  66. text: 'Last quarter maximum'
  67. }
  68. }]
  69. },
  70. series: [{
  71. name: 'USD to EUR',
  72. data: data,
  73. tooltip: {
  74. valueDecimals: 4
  75. }
  76. }]
  77. });
  78. });
  79. </script>
  80. </body>
  81. </html>