Basic Column Chart - CanvasJS JavaScript Charts

Basic Column Chart - CanvasJS JavaScript Charts

by Raj Patel

HTML

<script src="jquery.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

$(document).ready(function () {   
$.ajax({
        type: "GET",
        url: "data.csv",
        dataType: "text",
        success: function (data) { processData(data);}
    });
    
    function processData(allText) {
        var allLinesArray = allText.split('\n');
        if (allLinesArray.length > 0) {
            var dataPoints = [];
            for (var i = 0; i < allLinesArray.length; i++) {
	           var rowData = allLinesArray[i].split(',');    
               dataPoints[i] = {};
               var dateObj = new Date(rowData[0]);
               dataPoints[i].x = dateObj;
               dataPoints[i].y=[];
               for(var j=1; j< rowData.length; j++)
                dataPoints[i].y[j-1] = parseFloat(rowData[j]);
               
            }
            var chart = $(".chartContainer").CanvasJSChart(); 
            chart.options.data[0].dataPoints = dataPoints;
            chart.render();
        }
    }

$(".chartContainer").CanvasJSChart({
	title: {
		text: "Candlestick Chart"
	},
	axisY: {
		includeZero: false,
		title: "Price",
        prefix: "$"
	},
	axisX: {
		intervalType: "day",
		interval: 2,
		valueFormatString: "DD"
	},
	toolTip: { 
	content: "{x} Sep 2014 <br/> <strong>Prices:</strong> <br/>Open: {y[0]}, Close: {y[3]} <br/> Low: {y[2]}, High: {y[1]}"
	},
	data: [
	{
		type: "candlestick",
		dataPoints: []
	}
	]
    });

});