index.htm 1.8 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081
  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. // Create the chart
  18. Highcharts.stockChart('container', {
  19. rangeSelector: {
  20. selected: 0
  21. },
  22. title: {
  23. text: 'USD to EUR exchange rate'
  24. },
  25. tooltip: {
  26. style: {
  27. width: '200px'
  28. },
  29. valueDecimals: 4,
  30. shared: true
  31. },
  32. yAxis: {
  33. title: {
  34. text: 'Exchange rate'
  35. }
  36. },
  37. series: [{
  38. name: 'USD to EUR',
  39. data: data,
  40. id: 'dataseries'
  41. // the event marker flags
  42. }, {
  43. type: 'flags',
  44. data: [{
  45. x: Date.UTC(2017, 11, 1),
  46. title: 'A',
  47. text: 'Some event with a description'
  48. }, {
  49. x: Date.UTC(2017, 11, 12),
  50. title: 'B',
  51. text: 'Some event with a description'
  52. }, {
  53. x: Date.UTC(2017, 11, 22),
  54. title: 'C',
  55. text: 'Some event with a description'
  56. }],
  57. onSeries: 'dataseries',
  58. shape: 'circlepin',
  59. width: 16
  60. }]
  61. });
  62. });
  63. </script>
  64. </body>
  65. </html>