Multi Series Column Chart from CSV data - CanvasJS Javascript Charts

Multi Series Column Chart from CSV data - CanvasJS Javascript Charts

by canvasjs

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 data = [];
var dataCsv =  'Gateway_G,146,73972,2015/08/30/00\nGateway_G,148,23764,2015/08/30/00\nGateway_G,144,10564,2015/08/30/00\nESME3,218,1959,2015/08/30/00\nESME3,144,540,2015/08/30/00\nESME4,66,516,2015/08/30/00\nGateway_G,146,51782,2015/08/30/01\nGateway_G,148,22306,2015/08/30/01\nGateway_G,144,8910,2015/08/30/01\nESME3,218,1522,2015/08/30/01\nESME3,144,733,2015/08/30/01\nESME4,66,314,2015/08/30/01';


function addDataPoint(legendText,xValue,yValue,label){
    var tempX = xValue.split("/");
    var xData = new Date(tempX[0],tempX[1],tempX[2],tempX[3]);
    var yData = parseInt(yValue);
    var y2Data = label;
	
    var dataFlag = false;
    for(var i=0;i<data.length;i++){
        if(data[i].legendText === legendText){
            data[i].dataPoints.push({x:xData, y:yData});
            dataFlag = true;
        }
    }
    if(!dataFlag){
        data.push({
            type : "column",
            showInLegend : true,
            legendText : legendText,
            axisYType: "secondary",
            dataPoints : [
                {x: xData, y:yData}
            ]
        });
    }
}

function processData(allText) {
    var allLinesArray = allText.split('\n');
    if (allLinesArray.length > 0) {
        for (var i = 0; i <= allLinesArray.length - 1; i++) {
            var rowData = allLinesArray[i].split(',');
            addDataPoint(rowData[1],rowData[3],rowData[2],rowData[0]);
        }
        chart.render();
    }
}


var chart = new CanvasJS.Chart("chartContainer", {
    theme: "theme2",
    title: {
        text: "csv formated data"
    },
    axisX : {
			interval : 1,
			intervalType : "hour"
	},
    data: data
});

processData(dataCsv);