<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({
  titleLabelText:'2016 Sales (%sum Units)<br/>Top Agent: %maxSeriesName, Monthly per agent: [Avg: %average, Median: %median, Mode: %mode] [Min: %min, Max: %max]',

  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;
}

External CSS

This Pen doesn't use any external CSS resources.

External JavaScript

  1. https://cdnjs.cloudflare.com/ajax/libs/jquery/2.1.3/jquery.min.js
  2. https://jscharting.com/JSC15/JSCharting.js