index.htm 2.3 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. <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/usdeur.json', function (data) {
  17. var lastDate = data[data.length - 1][0], // Get year of last data point
  18. days = 24 * 36e5; // Milliseconds in a day
  19. // Create the chart
  20. Highcharts.stockChart('container', {
  21. rangeSelector: {
  22. selected: 1
  23. },
  24. title: {
  25. text: 'USD to EUR exchange rate'
  26. },
  27. yAxis: [{
  28. title: {
  29. text: 'Exchange rate'
  30. },
  31. top: '15%',
  32. height: '85%'
  33. }, {
  34. height: '15%'
  35. }],
  36. series: [{
  37. name: 'USD to EUR',
  38. data: data,
  39. id: 'dataseries',
  40. tooltip: {
  41. valueDecimals: 4
  42. }
  43. }, {
  44. type: 'flags',
  45. name: 'Flags on series',
  46. data: [{
  47. x: lastDate - 60 * days,
  48. title: 'On series'
  49. }, {
  50. x: lastDate - 30 * days,
  51. title: 'On series'
  52. }],
  53. onSeries: 'dataseries',
  54. shape: 'squarepin'
  55. }, {
  56. type: 'flags',
  57. name: 'Flags on axis',
  58. data: [{
  59. x: lastDate - 45 * days,
  60. title: 'On axis'
  61. }, {
  62. x: lastDate - 15 * days,
  63. title: 'On axis'
  64. }],
  65. shape: 'squarepin'
  66. }, {
  67. type: 'flags',
  68. name: 'Flags in pane',
  69. data: [{
  70. x: lastDate - 40 * days,
  71. title: 'In pane'
  72. }, {
  73. x: lastDate - 15 * days,
  74. title: 'In pane'
  75. }],
  76. yAxis: 1,
  77. shape: 'squarepin'
  78. }]
  79. });
  80. });
  81. </script>
  82. </body>
  83. </html>