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="https://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

/*
 // note : just for demo data is passed directly and not via ajax

$.ajax({
        type: "GET",
        url: "colopez.csv",
        dataType: "text",
        success: function (dataCsv) { processData(dataCsv); }
    });
*/

var data = [];
var dataCsv =  'Name1,146,73972,2015/08/30/00\nName1,148,23764,2015/08/30/00\nName1,144,10564,2015/08/30/00\nName2,218,1959,2015/08/30/00\nName2,144,540,2015/08/30/00\nName3,66,516,2015/08/30/00\nName1,146,51782,2015/08/30/01\nName1,148,22306,2015/08/30/01\nName1,144,8910,2015/08/30/01\nName2,218,1522,2015/08/30/01\nName2,144,733,2015/08/30/01\nName3,66,314,2015/08/30/01';


function addDataPoint(legendText,xValue,yValue){
    var tempX = xValue.split("/");
    var xData = new Date(tempX[0],tempX[1],tempX[2],tempX[3]);
    var yData = parseInt(yValue);

    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[0],rowData[3],rowData[1]);
        }
        chart.render();
    }
}


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

processData(dataCsv);