Line and Column chart on same chart

In canvasjs multiple chart can be plotted on same chart by using different chart per dataseries.

by Anjali Jain

HTML

<script type="text/javascript" src="http://canvasjs.com/assets/script/canvasjs.min.js"></script>
<div style="width:800px;height:500px;" id="chartContainer"></div>

JavaScript

var chart = new CanvasJS.Chart("chartContainer", {
			title: {
				text: "Line and Column chart Demo"
			},
			axisX: {
				interval:1,
				intervalType: "month",
				labelAngle: -45,
			},
			data: [
			{
				type: "line",
				dataPoints: [
					{ x: new Date(2012, 00, 1), y: 450 },
					{ x: new Date(2012, 01, 1), y: 414 },
					{ x: new Date(2012, 02, 1), y: 520, indexLabel: "highest", markerColor: "red", markerType: "triangle" },
					{ x: new Date(2012, 03, 1), y: 460 },
					{ x: new Date(2012, 04, 1), y: 450 },
					{ x: new Date(2012, 05, 1), y: 500 },
					{ x: new Date(2012, 06, 1), y: 480 },
					{ x: new Date(2012, 07, 1), y: 480 },
					{ x: new Date(2012, 08, 1), y: 410, indexLabel: "lowest", markerColor: "DarkSlateGrey", markerType: "cross" },
					{ x: new Date(2012, 09, 1), y: 500 },
					{ x: new Date(2012, 10, 1), y: 480 },
					{ x: new Date(2012, 11, 1), y: 510 }
				]
			},
			{
				type: "column",
				color: "rgba(125,120,123,.4)",
				dataPoints: [
					{ x: new Date(2012, 00, 1), y: 400 },
					{ x: new Date(2012, 01, 1), y: 385 },
					{ x: new Date(2012, 02, 1), y: 500 },
					{ x: new Date(2012, 03, 1), y: 360 },
					{ x: new Date(2012, 04, 1), y: 350 },
					{ x: new Date(2012, 05, 1), y: 600 },
					{ x: new Date(2012, 06, 1), y: 280 },
					{ x: new Date(2012, 07, 1), y: 380 },
					{ x: new Date(2012, 08, 1), y: 110 },
					{ x: new Date(2012, 09, 1), y: 200 },
					{ x: new Date(2012, 10, 1), y: 680 },
					{ x: new Date(2012, 11, 1), y: 310 }
				]
			}
			]
		});
		chart.render();