| 123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596 |
- <!DOCTYPE HTML>
- <html>
- <head>
- <meta http-equiv="Content-Type" content="text/html; charset=utf-8">
- <meta name="viewport" content="width=device-width, initial-scale=1">
- <title>Highstock Example</title>
- <style type="text/css">
- </style>
- </head>
- <body>
- <script src="../../code/highstock.js"></script>
- <script src="../../code/modules/data.js"></script>
- <script src="../../code/modules/exporting.js"></script>
- <script src="../../code/modules/export-data.js"></script>
- <div id="container" style="height: 400px; min-width: 310px"></div>
- <script type="text/javascript">
- Highcharts.getJSON('https://cdn.jsdelivr.net/gh/highcharts/highcharts@v7.0.0/samples/data/usdeur.json', function (data) {
- var startDate = new Date(data[data.length - 1][0]), // Get year of last data point
- minRate = 1,
- maxRate = 0,
- startPeriod,
- date,
- rate,
- index;
- startDate.setMonth(startDate.getMonth() - 3); // a quarter of a year before last data point
- startPeriod = Date.UTC(startDate.getFullYear(), startDate.getMonth(), startDate.getDate());
- for (index = data.length - 1; index >= 0; index = index - 1) {
- date = data[index][0]; // data[i][0] is date
- rate = data[index][1]; // data[i][1] is exchange rate
- if (date < startPeriod) {
- break; // stop measuring highs and lows
- }
- if (rate > maxRate) {
- maxRate = rate;
- }
- if (rate < minRate) {
- minRate = rate;
- }
- }
- // Create the chart
- Highcharts.stockChart('container', {
- rangeSelector: {
- selected: 1
- },
- title: {
- text: 'USD to EUR exchange rate'
- },
- yAxis: {
- title: {
- text: 'Exchange rate'
- },
- plotLines: [{
- value: minRate,
- color: 'green',
- dashStyle: 'shortdash',
- width: 2,
- label: {
- text: 'Last quarter minimum'
- }
- }, {
- value: maxRate,
- color: 'red',
- dashStyle: 'shortdash',
- width: 2,
- label: {
- text: 'Last quarter maximum'
- }
- }]
- },
- series: [{
- name: 'USD to EUR',
- data: data,
- tooltip: {
- valueDecimals: 4
- }
- }]
- });
- });
- </script>
- </body>
- </html>
|