JSFiddle - React, Tailwind, and code Playground

by Curtis Vance

HTML

<SELECT id="list">
    <OPTION VALUE="A">Data Set A</OPTION>
    <OPTION VALUE="B">Data Set B</OPTION>
</SELECT>
<button id="change">Refresh Table</button>
<button id="btnClear">Clear Table</button>

<div id="container" style="height: 400px"></div>

<script src="http://code.highcharts.com/stock/highstock.js"></script>
<script src="http://code.highcharts.com/stock/modules/exporting.js"></script>

JavaScript

var seriesFull = []; //Stores series info

function makeData(TSID, tsName) {
    $.getJSON('http://waterdata.quinteconservation.ca/KiWIS/KiWIS?service=kisters&type=queryServices&request=gettimeseriesvalues&datasource=0&ts_id=' + TSID + '&period=p30d&format=json', function (data) {
        var data2 = data[0];
        var data3 = [];
        for (var i = 1; i < data2.length; i++) {
            var myDate = new Date(data2[i][0].substring(0, 23));
            var result = myDate.getTime();
            data2[i][0] = result;
            data2[i][1] = parseFloat(data2[i][1]);
            data3.push(data2[i]);
        }
        //var tempName = "s" + TSID.toString();
        var singleSeries = {
            _colorIndex: seriesFull.length,
            _symbolIndex: seriesFull.length,
            //name: tempName,
            name: tsName,
            data: data3
        };
        seriesFull.push(singleSeries);
        createMyChart2(seriesFull);
        alert() //check on variable pass
    });
}

$("#change").click(function () {
    if ($("#list").val() == "A") {
        makeData(546042, "Foxboro");
    } else {
        makeData(1160042, "Tweed");
    }
});


$("#btnClear").click(function () {
    seriesFull.length = 0;
    var dataReset = [];
    //createMyChart2(dataReset);
    $("#container").html("");
});

function createMyChart2(dataSeries) {
    var chart = new Highcharts.StockChart({
        chart: {
            renderTo: 'container'
        },
        legend: {enabled: true},
        navigator: {enabled: false},
        rangeSelector: {
            selected: 1
        },
        title: {
            text: 'Station values ?QR?'
        },
        series: dataSeries
    });
}