JSFiddle - React, Tailwind, and code Playground

by gsousa

HTML

<div id="container" style="height: 400px; min-width: 500px"></div>
<script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/jqueryui/1.8/jquery-ui.min.js"></script>
<script src="http://code.highcharts.com/stock/highstock.js"></script>
<script src="http://code.highcharts.com/stock/modules/exporting.js"></script>

JavaScript

$(function () {

    $.getJSON('http://kiwis.kisters.de/KiWIS/KiWIS?service=kisters&type=queryServices&request=getTimeseriesValues&datasource=0&ts_id=132042&from=1990-01-01&to=1992-01-01&format=json', function (data) {
        var data2 = data[0];
        var data3 = [];
        //console.log(data2.length);
        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] = data2[i][0].substring(0, 10);
            data2[i][0] = result;
            data2[i][1] = parseFloat(data2[i][1]);
            data3.push(data2[i]);
        }
        console.log("chart");
        // Create the chart
        $('#container').highcharts('StockChart', {
            rangeSelector: {
                selected: 1
            },
            title: {
                text: 'Station values'
            },
            series: [{
                name: 'Station',
                data: data3,
                color: '#55BF3B',
                tooltip: {
                    //xDateFormat: '%Y-%m-%d %H:%M',
                    valueDecimals: 1
                }
            }]
        }, function (chart) {
            // apply the date pickers
            setTimeout(function () {
                $('input.highcharts-range-selector', $(chart.container).parent())
                    .datepicker();
            }, 0);
        });
    });
    // Set the datepicker's date format
    $.datepicker.setDefaults({
        dateFormat: 'yyyy-mm-dd',
        onSelect: function (dateText) {
            this.onchange();
            this.onblur();
        }
    });

});