How do I select columns from my CSV for a chart using HighChart?
I am trying to create a graph from a CSV file that contains multiple data values for each time value. I would like to draw two of these data points but could not figure out how to import the CSV file into an array.
Here is an example of my CSV
Year,Month,Day,Hour,Time,kWh,Savings,Total kWh
2013,02,06,11,11:00,0,0,308135
2013,02,06,11,11:59,15,1.875,308150
2013,02,06,12,12:59,27,3.375,308177
2013,02,06,13,13:59,34,4.25,308211
2013,02,06,14,14:59,32,4,308243
I would like to graph kWh and Savings along the y-axis and time along the x-axis. Any help would be greatly appreciated. I am using standard code to import CSV file for Highcharts, but I'm sure I need to change it in some way. Thank!
var options = {
chart: {
renderTo: 'container',
defaultSeriesType: 'column'
},
title: {
text: 'Wind Turbine Hourly Production'
},
xAxis: {
categories: []
},
yAxis: {
title: {
text: 'kWh'
}
},
series: []
};
/*
Load the data from the CSV file. This is the contents of the file:
Apples,Pears,Oranges,Bananas,Plums
John,8,4,6,5
Jane,3,4,2,3
Joe,86,76,79,77
Janet,3,16,13,15
*/
$.get('medford-hour.csv', function(data) {
// Split the lines
var lines = data.split('\n');
$.each(lines, function(lineNo, line) {
var items = line.split(',');
// header line containes categories
if (lineNo == 0) {
$.each(items, function(itemNo, item) {
if (itemNo > 0) options.xAxis.categories.push(item);
});
}
// the rest of the lines contain data with their name in the first position
else {
var series = {
data: []
};
$.each(items, function(itemNo, item) {
if (itemNo == 0) {
series.name = item;
} else {
series.data.push(parseFloat(item));
}
});
options.series.push(series);
}
});
+3
source to share
1 answer
You need to write your own parser. Here's a simple example of what this might look like:
var lines = data.split('\n');
$.each(lines, function (lineNo, line) {
var items = line.split(',');
if(lineNo !== 0) {
var x = + new Date(items[1]+'/'+items[2]+'/'+items[0]+' '+items[4]),
kwh = parseFloat(items[5]),
savings = parseFloat(items[6]);
if(!isNaN(kwh) && !isNaN(savings)){
options.series[0].data.push([x,kwh]);
options.series[1].data.push([x,savings])
}
}
}
And a jsfiddle: http://jsfiddle.net/3bQne/36/
+1
source to share