JSFiddle - React, Tailwind, and code Playground

by hfrntt

HTML

<script type="text/javascript" src="http://highcharts.com/js/testing.js"></script>

<div id="container" style="height: 300px"></div>
<div id="csv">2011-11-30T12:05:27.000Z,0.11
2011-11-30T12:35:27.000Z,0.13</div>

JavaScript

var options = {
    chart: {
        renderTo: 'container',
        defaultSeriesType: 'column'
    },
    title: {
        text: 'Fruit Consumption'
    },
    xAxis: {
        categories: []
    },
    yAxis: {
        title: {
            text: 'Units'
        }
    },
    series: []
};

function parseCSV(data) {
    // Split the lines
    var lines = data.split('\n'),
        series = [{ 
            data: [] 
        }];

    // Iterate over the lines and add categories or series
    $.each(lines, function(lineNo, line) {

        var items = line.split(',');

        series[0].data.push({
            x: Date.parse(items[0]), 
            y: parseFloat(items[1])
        });
    });
    
    options.series = series;
    
    
    console.log(options);
    // Create the chart
    //var chart = new Highcharts.Chart(options);
}

parseCSV( $('#csv').text() );