HChart - Many kiwis servers v1.5

Query many real-time kiwis v1.5 servers and add to one chart: Grand River, Quinte Conservation

by Bryan McIntosh

HTML

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

<SELECT id="list">
    <OPTION VALUE="C">Flow</OPTION>
    <OPTION VALUE="A">Rain</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) {
    	console.log(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,
            type: tsName,
            name: tsName,
            data: data3
        };
        seriesFull.push(singleSeries);
        createMyChart2(seriesFull);
    });
}

$("#change").click(function () {
    if ($("#list").val() == "A") {
        makeData("https://waterdata.quinteconservation.ca/KiWIS/KiWIS?service=kisters&type=queryServices&request=getTimeseriesValues&datasource=0&format=json&ts_id=53066042&period=p30d", "column");
    } else {
        makeData("https://waterdata.grandriver.ca/KiWIS/KiWIS?service=kisters&type=queryServices&request=gettimeseriesvalues&datasource=0&format=json&ts_id=8677042&period=p60d", "spline");
    }
});

$("#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: 'Precip and Flow'},
        series: dataSeries,
            yAxis: [{ // Primary yAxis
        labels: {
            format: '{value}',
            style: {
                color: Highcharts.getOptions().colors[1]
            }
        },
        title: {
            text: 'Flow cm/s',
            style: {
               ...