Basic HTML5 Chart Example - CanvasJS JavaScript Charts

Basic HTML5 Chart Example - CanvasJS JavaScript Charts

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

/**
 * http://stackoverflow.com/questions/1374126/how-to-extend-an-existing-javascript-array-with-another-array
 */
Array.prototype.extend = function(other_array) {
    /* you should include a test to check whether other_array really is an array */
    other_array.forEach(function(v) {
        this.push(v)
    }, this);
};

var chart = new CanvasJS.Chart("chartContainer", {
		title:{
			text:"Cost Of Pancake Ingredients, 2011"
		},
                animationEnabled: true,
		axisX:{
			interval: 1,
			labelFontSize: 10,
			lineThickness: 0
		},
		axisY2:{
			valueFormatString: "$ 0",
			lineThickness: 0				
		},
		toolTip: {
			shared: true
		},
		legend:{
			verticalAlign: "top",
			horizontalAlign: "center"
		},

		data: [
		{     
			type: "stackedBar",
			showInLegend: true,
			name: "Butter (500gms)",
			axisYType: "secondary",
			color: "#7E8F74",
			dataPoints: [
				{y: 3, label: "India"},
				{y: 5, label: "US" },
				{y: 3, label: "Germany"   },			
				{y: 6, label: "Brazil"  },			
				{y: 7, label: "China"  },
				{y: 5, label: "Australia"  },
				{y: 5, label: "France"  },
				{y: 7, label: "Italy"  },
				{y: 9, label: "Singapore"  },
				{y: 8, label: "Switzerland"  },
				{y: 12, label: "Japan"  }
			]
		},
		{     
			type: "stackedBar",
			showInLegend: true,
			name: "Flour (1kg)",
			axisYType: "secondary",
			color: "#F0E6A7",
			dataPoints: [
				{y: .5, label: "India" },
				{y: 1.5, label: "US" },
				{y: 1, label: "Germany"   },			
				{y: 2, label: "Brazil"  },			
				{y: 2, label: "China"  },
				{y: 2.5, label: "Australia"  },
				{y: 1.5, label: "France"  },
				{y: 1, label: "Italy"  },
				{y: 2, label: "Singapore"  },
				{y: 2, label: "Switzerland"  },
				{y: 3, label: "Japan"  }
			]
		},
		{     
			type: "stackedBar",
			showInLegend: true,
			name: "Milk (2l)",
			axisYType: "secondary",
			color: "#EBB88A",
			dataPoints: [
				{y: 2, label: "India" },
				{y: 3, label: "US" },
				{y: 3, label: "Germany"   },			
				{y: 3,...