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
        }
    });
});


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");

    var URL = 'http://ichart.finance.yahoo.com/table.csv?s=' + symbol + '%26a=' + start_date.getMonth() + '%26b=' + start_date.getDate() + '%26c=' + start_date.getFullYear();

if (end_date) {
  end_date = new Date(end_date);
  URL = URL + '%26d=' + end_date.getMonth() + '%26e=' + end_date.getDate() + '%26f=' + end_date.getFullYear();
}

URL = URL + '%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=' + 'select col0, col4 from csv where url=';

    YQL = YQL + "'" + URL + "'" + '&format=json&callback=?';


    return YQL;

}

function...