+++ /dev/null
-<!DOCTYPE HTML>
-<html>
- <head>
- <meta http-equiv="Content-Type" content="text/html; charset=utf-8">
- <title>Highstock Example</title>
-
- <script type="text/javascript">
- \r
- $.get('/samples/stock/demo/candlestick-and-volume/data.csv', function(csv) {\r
- \r
- // parse the CSV data\r
- var data = [], volume = [], navigatorData = [], header, comment = /^#/, x;\r
- \r
- $.each(csv.split('\n'), function(i, line){\r
- if (!comment.test(line)) {\r
- if (!header) {\r
- header = line;\r
- }\r
- else {\r
- var point = line.split(';'), date = point[0].split('-');\r
- \r
- x = Date.UTC(date[2], date[1] - 1, date[0]);\r
- \r
- data.push([\r
- x, // time \r
- parseFloat(point[3]), // open\r
- parseFloat(point[6]), // high\r
- parseFloat(point[5]), // low\r
- parseFloat(point[4]) // close\r
- ]);\r
- \r
- volume.push([x, parseFloat(point[2])]); // volume\r
- navigatorData.push([x, parseFloat(point[4])]); // close\r
- }\r
- }\r
- });\r
- \r
- // set the allowed units for data grouping\r
- var groupingUnits = [[\r
- 'week', // unit name\r
- [1] // allowed multiples\r
- ], [\r
- 'month',\r
- [1, 2, 3, 4, 6]\r
- ]];\r
- \r
- // create the chart\r
- chart = new Highcharts.StockChart({\r
- chart: {\r
- renderTo: 'container',\r
- alignTicks: false\r
- },\r
- \r
- navigator: {\r
- series: {\r
- data: navigatorData\r
- }\r
- },\r
- \r
- rangeSelector: {\r
- selected: 0\r
- },\r
- \r
- title: {\r
- text: 'USD to EUR exchange rate'\r
- },\r
- \r
- xAxis: {\r
- type: 'datetime',\r
- maxZoom: 14 * 24 * 3600000,\r
- // fourteen days\r
- title: {\r
- text: null\r
- }\r
- },\r
- yAxis: [{\r
- title: {\r
- text: 'Exchange rate'\r
- },\r
- height: 200,\r
- lineWidth: 2\r
- }, {\r
- title: {\r
- text: 'Volume'\r
- },\r
- top: 300,\r
- height: 100,\r
- offset: 0,\r
- lineWidth: 2\r
- }],\r
- \r
- series: [{\r
- type: 'candlestick',\r
- name: 'USD to EUR',\r
- data: data,\r
- dataGrouping: {\r
- units: groupingUnits\r
- }\r
- }, {\r
- type: 'column',\r
- name: 'Volume',\r
- data: volume,\r
- yAxis: 1,\r
- dataGrouping: {\r
- units: groupingUnits\r
- }\r
- }]\r
- });\r
- });
- </script>
-
- </head>
- <body>
-
- <script type="text/javascript" src="http://www.highcharts.com/js/testing-stock-exporting.js"></script>\r\r
- \r
- <div id="container" style="height: 500px"></div>
- </body>
-</html>