<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 = [], navigatorData = [], header, comment = /^#/, x;\r
- \r
- $(document.body).append('<div style="margin-top: 1000px"></div>')\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
- navigatorData.push([x, parseFloat(point[4])]); // close\r
- $(document.body).append('<div>['+ x +','+ parseFloat(point[3]) +','+ parseFloat(point[6]) +\r
- ','+ parseFloat(point[5]) +','+ parseFloat(point[4]) +'],</div>')\r
- }\r
- }\r
- });\r
- \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: 2\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
- }],\r
- \r
- series: [{\r
- type: 'ohlc',\r
- name: 'USD to EUR',\r
- data: data,\r
- dataGrouping: {\r
- units: [[\r
- 'week', // unit name\r
- [1] // allowed multiples\r
- ], [\r
- 'month',\r
- [1, 2, 3, 4, 6]\r
- ]]\r
- }\r
- }]\r
- });\r
+
+ $.get('/samples/stock/demo/candlestick-and-volume/data.csv', function(csv) {
+
+ // parse the CSV data
+ var data = [], navigatorData = [], header, comment = /^#/, x;
+
+ $(document.body).append('<div style="margin-top: 1000px"></div>')
+ $.each(csv.split('\n'), function(i, line){
+ if (!comment.test(line)) {
+ if (!header) {
+ header = line;
+ }
+ else {
+ var point = line.split(';'), date = point[0].split('-');
+
+ x = Date.UTC(date[2], date[1] - 1, date[0]);
+
+ data.push([
+ x, // time
+ parseFloat(point[3]), // open
+ parseFloat(point[6]), // high
+ parseFloat(point[5]), // low
+ parseFloat(point[4]) // close
+ ]);
+
+ navigatorData.push([x, parseFloat(point[4])]); // close
+ $(document.body).append('<div>['+ x +','+ parseFloat(point[3]) +','+ parseFloat(point[6]) +
+ ','+ parseFloat(point[5]) +','+ parseFloat(point[4]) +'],</div>')
+ }
+ }
+ });
+
+
+
+ // create the chart
+ chart = new Highcharts.StockChart({
+ chart: {
+ renderTo: 'container',
+ alignTicks: false
+ },
+
+ navigator: {
+ series: {
+ data: navigatorData
+ }
+ },
+
+ rangeSelector: {
+ selected: 2
+ },
+
+ title: {
+ text: 'USD to EUR exchange rate'
+ },
+
+ xAxis: {
+ type: 'datetime',
+ maxZoom: 14 * 24 * 3600000,
+ // fourteen days
+ title: {
+ text: null
+ }
+ },
+ yAxis: [{
+ title: {
+ text: 'Exchange rate'
+ }
+ }],
+
+ series: [{
+ type: 'ohlc',
+ name: 'USD to EUR',
+ data: data,
+ dataGrouping: {
+ units: [[
+ 'week', // unit name
+ [1] // allowed multiples
+ ], [
+ 'month',
+ [1, 2, 3, 4, 6]
+ ]]
+ }
+ }]
+ });
});
</script>
</head>
<body>
- <script type="text/javascript" src="http://www.highcharts.com/js/testing-stock.js"></script>\r\r
- \r
+ <script type="text/javascript" src="http://www.highcharts.com/js/testing-stock.js"></script>
+
<div id="container" style="height: 500px"></div>
</body>
</html>