<div id="chart" style="width:785px"></div>
Our CSV Data:<br/>
<textarea id="csvData">Dates,Mark,Gene
1/1/2015,4,12
2/1/2015,6,14
3/1/2015,12,15
4/1/2015,14,21
5/1/2015,23,30
6/1/2015,16,28
7/1/2015,15,23
8/1/2015,6,15
9/1/2015,10,15
10/1/2015,13,17
11/1/2015,9,14
12/1/2015,6,9</textarea><br/>
<pre id="output"></pre>
//This is equivalent to loading data from a CSV file, but hardcoded here for simplification
var data = $('#csvData').text();
var parsedData = simpleCSVToArray(data);
parsedData = dataToSeries(parsedData, 0);
$('#chart').JSC({
xAxisScaleType: 'time',
series: parsedData
});
function simpleCSVToArray(data) {
var lines = data.split('\n');
var linesArr = [];
$.each(lines, function(index) {
linesArr[index] = lines[index].split(',');
});
return linesArr;
}
function dataToSeries(data, xColumnIndex) {
var series = [],
xValue, seriesIndex = 0,
thisSeries;
$.each(data, function(rowI) {
//only process if it's not the header row.
if (rowI) {
seriesIndex = 0;
xValue = data[rowI][xColumnIndex];
$.each(data[rowI], function(colI) {
//Process onlyif the column is not an x value.
if (colI != xColumnIndex) {
thisSeries = series[seriesIndex] = series[seriesIndex] || {
name: data[0][colI],
points: []
};
thisSeries.points.push({
x: xValue,
y: parseInt(data[rowI][colI])
});
seriesIndex++;
}
});
}
});
return series;
}
This Pen doesn't use any external CSS resources.