Basic Column chart from CSV Data - CanvasJS JavaScript Charts

Basic 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: "csvFile.csv",
        dataType: "text",
        success: function (dataCsv) { processData(dataCsv); }
    });
*/

var data = [];
var dataCsv =  'apple,70\norange,55\nbanana,50\nmango,65\ngrape,95\npineapple,68\npapaya,28';


function addDataPoint(label,yValue){
    var yData = parseInt(yValue);
		var labelData = label;
    var dataFlag = false;
    for(var i=0;i<data.length;i++){       
            data[i].dataPoints.push({label:labelData, y:yData});
            dataFlag = true;
    }
    if(!dataFlag){
        data.push({
            type : "column",
            dataPoints : [
                {label: labelData, 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[1]);
        }
        chart.render();
    }
}


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

processData(dataCsv);