JSFiddle - React, Tailwind, and code Playground

by Fusher

HTML

<script type="text/javascript" src="http://highcharts.com/js/testing.js"></script><div id="container" style="height: 300px"></div>

JavaScript

var data = [{"name":"Paras Air","data":[{"x":1.327687525e+12,"y":0},{"x":1.327687404e+12,"y":0},{"x":1.32768727e+12,"y":0},{"x":1.327685957e+12,"y":0},{"x":1.327685935e+12,"y":0},{"x":1.327685403e+12,"y":3.6},{"x":1.3276854e+12,"y":3.6},{"x":1.327685135e+12,"y":2.92},{"x":1.327685077e+12,"y":2.92},{"x":1.327685057e+12,"y":2.92},{"x":1.327685025e+12,"y":2.92},{"x":1.327685021e+12,"y":2.92},{"x":1.327684985e+12,"y":2.92},{"x":1.3276845e+12,"y":0},{"x":1.327684331e+12,"y":0}],"type":"spline","color":"#AA4643"},{"name":"Aktiviti","data":[{"x":1.327687525e+12,"y":4.32},{"x":1.327687404e+12,"y":2.72},{"x":1.32768727e+12,"y":2.4},{"x":1.327685957e+12,"y":4},{"x":1.327685935e+12,"y":2.4},{"x":1.327685403e+12,"y":3.04},{"x":1.3276854e+12,"y":3.36},{"x":1.327685135e+12,"y":3.04},{"x":1.327685077e+12,"y":4.32},{"x":1.327685057e+12,"y":2.4},{"x":1.327685025e+12,"y":3.68},{"x":1.327685021e+12,"y":3.36},{"x":1.327684985e+12,"y":2.72},{"x":1.3276845e+12,"y":2.4},{"x":1.327684331e+12,"y":4}],"type":"column","color":"#4572A7","yAxis":1}];


var chart = new Highcharts.Chart({
            global: {useUTC: false},
            chart: {
               renderTo: 'container'
            },
            title: {text: 'Aras Kemasukan Air'},
            xAxis: {type: 'datetime'},
            yAxis: [{
                  title: {text: 'Paras Ketinggian (m)'},
                  labels: {formatter: function() {return this.value;}},
                  lineWidth: 1,
                  type: 'linear'
               },{
                  title: {text: 'Aktiviti'},
                  lineWidth: 1,
                  labels: {formatter: function() {return this.value;}}
               }],
            series: []
         });

var jsonObj = {
            series: []
         };

         //Buat pusingan pada setiap JSON yang dikembalikan
         jQuery.each(data, function (i, item) {
            var key = item['name'];
            var value = item['data'];
            var jenis = item['type'];
           ...