Support: Forum

read CSV from HTML

by Aakash Khapare M

HTML

<script src="https://code.highcharts.com/highcharts.js"></script>
<script src="https://code.highcharts.com/modules/exporting.js"></script>

<div id="container" style="min-width: 310px; height: 400px; margin: 0 auto"></div>
<pre id="csv" style="display: none;">{"test":[{"sqlitetimestamp":"2016-03-07 10:21:15","temperature":"4.2","hum":"65.7","volt":"6.32"},
{"sqlitetimestamp":"2016-03-07 10:22:13","temperature":"4.2","hum":"66.0","volt":"6.32"},
{"sqlitetimestamp":"2016-03-07 10:22:16","temperature":"4.2","hum":"66.0","volt":"6.32"},
{"sqlitetimestamp":"2016-03-07 10:22:23","temperature":"4.2","hum":"66.1","volt":"6.32"},
{"sqlitetimestamp":"2016-03-07 10:22:26","temperature":"4.2","hum":"66.1","volt":"6.32"}]}</pre>

JavaScript

$(document).ready(function() {
  var data = $('#csv').text();
  var test = data.split(/\r\n|\n/);
  for (k = 0; k < test.length; k++) {
    test[k] = test[k].replace("},", "}");

  }
  var temp = JSON.parse(test);
  var arrTemperature = [],
    arrHum = [],
    arrVolt = [];

  for (k = 0; k < test.length; k++) {
    var time = (new Date(temp.test[k].sqlitetimestamp)).getTime();

    arrTemperature.push([time + 10000, parseFloat(temp.test[k].temperature)]);
    arrHum.push([time, parseFloat(temp.test[k].hum)]);
    arrVolt.push([time, parseFloat(temp.test[k].volt)]);
  }



  $('#container').highcharts({
    xAxis: {
      type: 'datetime',
    },
    series: [{
      name: 'Temperature',
      data: arrTemperature,
    }, {
      name: 'Hum',
      data: arrHum,
    }, {
      name: 'Volt',
      data: arrVolt,
    }]
  });


});