JSFiddle - React, Tailwind, and code Playground

by tin nguyen

HTML

<script src="http://code.highcharts.com/highcharts.js"></script>

<div id="container1" style="height: 300px"></div>
<div id="container2" style="height: 300px"></div>


<div id="data.csv" style="display: none">DateTime,Metric
1171688701000,2.000000
1171689001000,3.000000
1171689301000,4.000000
1171689601000,8.000000
1171689901000,5.000000
1171690201000,5.000000
1171690501000,1.000000
1171690801000,3.000000
1171691101000,2.000000
1171691401000,7.000000
</div>
<div id="data2.csv" style="display: none">DateTime,Metric
1171689001000,223.000000
1171689301000,34.000000
1171689601000,68.000000
1171689901000,85.000000
1171690201000,85.000000
1171690501000,1.000000
1171690801000,3.000000
1171691101000,2.000000
1171691401000,7.000000
</div>

JavaScript

create_highchart('container1','Title 1','Metric1','data.csv');
create_highchart('container2','Title 2','Metric2','data2.csv');
function create_highchart(label,title,ylabel,path) 
        {
            var option = {
                chart: {
                    renderTo: label,
                    zoomType: 'x',
                    defaultSeriesType: 'line',
                     events: {}
                        },
                
                title: {
                    text: title
                        },
                
                xAxis: {
                        type:'datetime',
                        
                        title: {
                                text: 'Timestamp'
                                },
                        categories: []
                        },
                
                yAxis: {
                    title: {
                        text: ylabel
                            },
                         min: 0.0
        
                        },
                
                series: [
                            {
                                type: 'line',
                                name: ylabel,
                                data:[]
                                                                    
                        
                            }
                        ]
                
                            };    //   variable 'option' finished here

                $.get(path, function(data)
                {
                    var lines = data.split('\n');        // Split the lines
                    $.each(lines, function(lineNo, line)
                    {
                        var items = line.split(',');
                        if (lineNo > 0)
                        {
                            $.each(items, function(itemNo, item)
                            {
                                if (itemNo == 0)
                                   ...