JSFiddle - React, Tailwind, and code Playground

by gsousa

HTML

<SELECT id="list">
    <OPTION VALUE="C">NZ Niwa (New Zealand)</OPTION>
    <OPTION VALUE="A">Grand River CA</OPTION>
</SELECT>
<button id="change">Add Data</button>
<button id="btnClear">Clear Table</button>
<div id="container" style="height: 400px"></div>

JavaScript

var seriesFull = [];
//NIWA National Institute of Water and Atmospheric Research, NZ
function makeData(tsURL, tsName) {
    $.getJSON(tsURL, function (data) {
        var data2 = data[0].data;
        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 singleSeries = {
            _colorIndex: seriesFull.length,
            _symbolIndex: seriesFull.length,
            name: tsName,
            data: data3
        };
        seriesFull.push(singleSeries);
        createMyChart2(seriesFull);
    });
}

$("#change").click(function () {
    if ($("#list").val() == "A") {
        makeData("http://kiwis.grandriver.ca/KiWIS/KiWIS?service=kisters&type=queryServices&request=getTimeseriesValues&datasource=0&ts_id=12480042&from=2014-03-01&to=2014-06-06&format=json");
    } else {
        makeData("http://hydro-sos.niwa.co.nz/KiWIS/KiWIS?service=kisters&type=queryServices&request=getTimeseriesValues&datasource=0&ts_id=15&from=2014-03-01&to=2014-06-06&format=json");
    }
});

$("#btnClear").click(function () {
    seriesFull.length = 0;
    var 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 - Around the World'},
        series: dataSeries,
        tooltip: {valueDecimals: 2,shared: true}
    });
}