I am having trouble uploading a large .csv file to my HIGHCHART graph. I've been able to graph an 85KB up to 1486 lines by 9 (I) columns. Here is an example:
TimeStamp Temp_1_01 Temp_1_02 Temp_2_01 Temp_2_02 Temp_3_01 Temp_3_02 Temp_4_01 Temp_4_02
5/15/2014, 3:25 408 487 63 84 67 91 63 78
5/15/2014 3:30 408 487 63 84 67 91 63 78
5/15/2014 3:35 407 489 63 84 67 91 63 78
5/15/2014 3:40 408 488 63 84 67 91 63 78
5/15/2014 3:44 408 488 63 84 67 91 63 78
...
5/22/2014 9:40 483 421 0 93 76 95 72 89
When I add a new line the line graph disappears. Any suggestions?
Here is the javascript:
$.get('Dropbox/geo/sites/GC_Room/loveland.csv', function(data)
{
// Split the lines
var lines = data.split('\n');
var i = 0;
var csvData = [];
// Iterate over the lines and add categories or series
$.each(lines, function(lineNo, line)
{
csvData[i] = line.split(',');
i = i + 1;
});
var columns = csvData[0];
var categories = [], series = [];
for(var colIndex=0,len=columns.length; colIndex<len; colIndex++)
{
//first row data as series's name
var seriesItem=
{
data:[],
name:csvData[0][colIndex]
};
for(var rowIndex=1,rowCnt=csvData.length; rowIndex<rowCnt; rowIndex++)
{
//first column data as categories,
if (colIndex == 0)
{
categories.push(csvData[rowIndex][0]);
}
else if(parseFloat(csvData[rowIndex][colIndex])) // <-- here
{
seriesItem.data.push(parseFloat(csvData[rowIndex][colIndex]));
}
};
//except first column
if(colIndex>0)series.push(seriesItem);
}
// Create the chart
var chart = new Highcharts.Chart(
{
chart:
{
alignTick: false,
renderTo: 'LANE_METALS',
type: 'line'
},
title: {
text: 'Monthly Average Temperature',
x: -20 //center
},
subtitle: {
text: 'Source: LANE METALS',
x: -20
},
xAxis:
{
categories: categories,
labels:
{
step: 200,
text: 'Time',
},
tickWidth: 0
},
yAxis:
{
title: {
text: 'Temperature (\xB0C)'
},
min: 0
},
tooltip:
{
formatter: function()
{
return '<b>'+ this.series.name +'</b><br/>'+ this.x +': '+ this.y +'\xB0C';
}
},
legend:
{
layout: 'vertical',
//backgroundColor: '#FFFFFF',
//floating: true,
align: 'left',
//x: 100,
verticalAlign: 'top',
//y: 70,
borderWidth: 0
},
plotOptions:
{
area:
{
turboThreshold: 0,
stacking: 'normal',
lineColor: '#666666',
lineWidth: 1,
marker:
{
lineWidth: 1,
lineColor: '#666666'
}
}
},
series: series
});
});
