Basic Column Chart - CanvasJS

Basic Column Chart

HTML

<script src="http://canvasjs.com/assets/script/canvasjs.min.js"></script>
<br/><!-- Just so that JSFiddle's Result label doesn't overlap the Chart -->
<div id="chartContainer" style="height: 360px; width: 100%;"></div>

JavaScript

var alldata = [[0,9,2,2,2,3],
						[1,7,4,3,6,4],
            [2,4,5,6,1,3],
            [3,1,6,2,3,4]]//Potentially many more columns and certainly hundreds of thousands if not millions of entries


//These variables dynamically and arbitrarily updated by the user
var xIndex1 = 0;
var xIndex2 = 0;
var xIndex3 = 1;
var yIndex1 = 2;
var yIndex2 = 3;
var yIndex3 = 4;


var series1 = [];
var series2 = [];
var series3 = [];

//This step is unnecessary and increases memory and processing requirements by factor of number of series * length of data; which is heinously bad in my use case
for( var i = 0; i<alldata.length; i++ ) {
	series1.push( {x:alldata[i][xIndex1], y:alldata[i][yIndex1]});
	series2.push( {x:alldata[i][xIndex2], y:alldata[i][yIndex2]});
	series3.push( {x:alldata[i][xIndex3], y:alldata[i][yIndex3]});
}

//Can do a little better with code like this to only pay incremental cost by adding/subtracting function entries from the array view; but you pay an even larger cost in memory as the object is larger than the data and gets created. 
//Ignore failure of getX and getY to dispatch correctly when xIndices and/or yIndices changes and assume that problem is sovled elsewhere for this toy example

/*var xIndices = [0,xIndex1,xIndex2,xIndex3];
var yIndices = [0,yIndex1,yIndex2,yIndex3];
var getX = function() ( index, series ) {
return allData[ index ][ xIndices[ series ] ];
};
var getY = function() ( index, series ) {
return allData[ index ][ yIndices[ series ] ];
};
//series1=[];
//series2=[];
//series3=[];
//Only updated to match the length of alldata
for( var i = 0; i<alldata.length; i++ ) {

//series1.push( {x:getX(i,1)(), y:getY(i,1)}() );
//series2.push( {x:getX(i,2), y:getY(i,2)} );
//series3.push( {x:getX(i,3), y:getY(i,3)} );
}*/


var chart = new CanvasJS.Chart("chartContainer",
	{
        
      data: [
      {
        type: "line",
        dataPoints: series1
      },
      {
        type: "line",
        dataPoints: series2
      },
      {
       ...