JSFiddle - React, Tailwind, and code Playground

by hfrntt

HTML

<script type="text/javascript" src="http://www.highcharts.com/js/highstock.js"></script>



<textarea id="textarea4" rows="5" cols="80">textarea4</textarea>
<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

var seriesOptions = [],
    yAxisOptions = [],
    seriesCounter = 0,
    names = ['GOOG', 'IBM'],
    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) {
        console.log(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) {
            document.getElementById("textarea4").innerHTML = JSON.stringify(seriesOptions, null, 4);
            createChart();   // ** Comment this out to debug
        }
    });
});