Basic Column Chart - CanvasJS JavaScript Charts

Basic Column Chart - CanvasJS JavaScript Charts

HTML

<script src="https://canvasjs.com/assets/script/canvasjs.min.js"></script>
<div id="chartContainer" style="height: 460px; width: 100%;"></div>

JavaScript

var dataPoints = [];
var chart = new CanvasJS.Chart("chartContainer", {
	animationEnabled: true,
	zoomEnabled: true,
	theme: "dark2", // "light1", "light2", "dark1", "dark2"
	exportEnabled: true,
	title: {
		text: "test sales data"
	},
	subtitles: [{
		text: "Test Chart"
	}],
	axisY: {
		title: "Pounds"
	},
	data: [{
		type: "column",
		showInLegend: true,
		name: "Target",
		dataPoints: dataPoints
	},
	{
		type: "column",
		showInLegend: true,
		name: "Income",
		dataPoints: dataPoints
		
	}]
});

$.get("http://shadow.spiros.io/sales-data.csv", getDataPointsFromCSV);

function getDataPointsFromCSV(csv) {
	var csvLines = points = [];
	csvLines = csv.split(/[\r?\n|\r|\n]+/);
	
	for (var i = 1; i < csvLines.length; i++) {
		if (csvLines[i].length > 0) {			
			points = csvLines[i].split(";");	
			
			dataPoints.push({
				x:points[0],
				y: [
					parseFloat(points[1]),
					parseFloat(points[2])
				]
			});	
			}
		}
	}
	chart.render();