JSFiddle - React, Tailwind, and code Playground
HTML
<script src="http://www.highcharts.com/js/highstock.js"></script>
<div id="container" style="height: 500px; min-width: 600px"></div>
<textarea id="textarea1" rows="5" cols="80">textarea1</textarea>
<textarea id="textarea2" rows="5" cols="80">textarea2</textarea>
<textarea id="textarea3" rows="5" cols="80">textarea3</textarea>
JavaScript
$(function() {
var seriesOptions = [],
yAxisOptions = [],
seriesCounter = 0,
names = ['GOOG', 'IBM','AI.PA'],
colors = Highcharts.getOptions().colors;
$.each(names, function(i, name) {
var YQL = format_YQL_request(name);
var textarea2 = document.getElementById("textarea2");
textarea2.innerHTML = textarea2.innerHTML + "\n" + YQL;
$.getJSON(YQL, function(data) {
var yahooData = parseYahooData(data);
seriesOptions[i] = {
name: name,
data: yahooData
};
// 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();
}
});
});
function format_YQL_request(symbol, start_date, end_date) {
// a = Begin month (starting at offset 0 = January)
// b = Begin day
// c = Begin year
// d,e,f = End (same as above) = Defaults to "today" if blank
// start_date = new Date(2000,1,1);
start_date = new Date(start_date || "2011/01/01");
end_date = new Date(end_date || Date() );
var URL = 'http://ichart.finance.yahoo.com/table.csv?s='
+ symbol
+ '%26a=' + start_date.getMonth()
+ '%26b=' + start_date.getDate()
+ '%26c=' + start_date.getFullYear()
+ '%26d=' + end_date.getMonth()
+ '%26e=' + end_date.getDate()
+ '%26f=' + end_date.getFullYear()
+ '%26g=d%26ignore=.csv';
var textarea1 = document.getElementById("textarea1");
textarea1.innerHTML = textarea1.innerHTML + "\n" + URL;
var YQL = 'http://query.yahooapis.com/v1/public/yql?q='
...