+++ /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">
- var seriesOptions = [],\r
- yAxisOptions = [],\r
- seriesCounter = 0,\r
- names = ['ADBE', 'GOOGL', 'MSFT'],\r
- colors = Highcharts.getOptions().colors;\r
- \r
- $.each(names, function(i, name) {\r
- \r
- $.get('/samples/stock/demo/multiple-series/'+ name +'.csv', function(csv) {\r
- \r
- // parse the CSV data\r
- var data = [], 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
- if (point.length > 1) {\r
- // use point[4], the close value\r
- data.push([\r
- x, \r
- parseFloat(point[4])\r
- ]);\r
- }\r
- }\r
- }\r
- });\r
- \r
- seriesOptions[i] = {\r
- name: name,\r
- data: data,\r
- yAxis: i\r
- };\r
- \r
- // create one y axis for each series in order to be able to compare them\r
- yAxisOptions[i] = {\r
- alternateGridColor: null,\r
- gridLineWidth: i ? 0 : 1, // only grid lines for the first series\r
- opposite: i ? true : false,\r
- minorGridLineWidth: 0,\r
- title: {\r
- text: name,\r
- style: {\r
- color: colors[i]\r
- }\r
- },\r
- lineWidth: 2,\r
- lineColor: colors[i]\r
- };\r
- \r
- // As we're loading the data asynchronously, we don't know what order it will arrive. So\r
- // we keep a counter and create the chart when all the data is loaded. \r
- seriesCounter++;\r
- \r
- if (seriesCounter == names.length) {\r
- createChart();\r
- }\r
- });\r
- })\r
- \r
- \r
- \r
- // create the chart when all data is loaded\r
- function createChart() {\r
- \r
- chart = new Highcharts.StockChart({\r
- chart: {\r
- renderTo: 'container',\r
- alignTicks: false\r
- },\r
- \r
- rangeSelector: {\r
- selected: 1\r
- },\r
- \r
- title: {\r
- text: null\r
- },\r
- \r
- xAxis: {\r
- type: 'datetime',\r
- maxZoom: 14 * 24 * 3600000, // fourteen days\r
- title: {\r
- text: null\r
- }\r
- },\r
- yAxis: yAxisOptions,\r
- \r
- series: seriesOptions\r
- });\r
- }
- </script>
-
- </head>
- <body>
-
- <script type="text/javascript" src="http://www.highcharts.com/js/testing-stock.js"></script>\r\r
- \r
- <div id="container" style="height: 500px"></div>
- </body>
-</html>