Created
February 17, 2012 01:36
-
-
Save terrafied/1849666 to your computer and use it in GitHub Desktop.
Multiple Highcharts Series
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| <!DOCTYPE HTML> | |
| <html> | |
| <head> | |
| <meta http-equiv="Content-Type" content="text/html; charset=utf-8"> | |
| <title>Highstock Example</title> | |
| <script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.7.1/jquery.min.js"></script> | |
| <script type="text/javascript"> | |
| $(function() { | |
| var seriesOptions = [], | |
| yAxisOptions = [], | |
| seriesCounter = 0, | |
| names = ['MSFT', 'AAPL', 'GOOG'], | |
| colors = Highcharts.getOptions().colors; | |
| $.each(names, function(i, name) { | |
| $.getJSON('http://www.highcharts.com/samples/data/jsonp.php?filename='+ name.toLowerCase() +'-c.json&callback=?', function(data) { | |
| seriesOptions[i] = { | |
| name: name, | |
| data: data | |
| }; | |
| // As we're loading the data asynchronously, we don't know what order it will arrive. So | |
| // we keep a counter and create the chart when all the data is loaded. | |
| seriesCounter++; | |
| if (seriesCounter == names.length) { | |
| createChart(); | |
| } | |
| }); | |
| }); | |
| // create the chart when all data is loaded | |
| function createChart() { | |
| chart = new Highcharts.StockChart({ | |
| chart: { | |
| renderTo: 'container' | |
| }, | |
| rangeSelector: { | |
| selected: 4 | |
| }, | |
| yAxis: { | |
| labels: { | |
| formatter: function() { | |
| return (this.value > 0 ? '+' : '') + this.value + '%'; | |
| } | |
| }, | |
| plotLines: [{ | |
| value: 0, | |
| width: 2, | |
| color: 'silver' | |
| }] | |
| }, | |
| plotOptions: { | |
| series: { | |
| compare: 'percent' | |
| } | |
| }, | |
| tooltip: { | |
| pointFormat: '<span style="color:{series.color}">{series.name}</span>: <b>{point.y}</b> ({point.change}%)<br/>', | |
| valueDecimals: 2 | |
| }, | |
| series: seriesOptions | |
| }); | |
| } | |
| }); | |
| </script> | |
| </head> | |
| <body> | |
| <script type="text/javascript" src="../../js/highstock.js"></script> | |
| <div id="container" style="height: 500px; min-width: 600px"></div> | |
| </body> | |
| </html> |
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment