Zooming Particular Axis with the help of rangeChanging - CanvasJS JavaScript Html 5 Charts

Zooming Particular Axis with the help of rangeChanging - CanvasJS JavaScript Html 5 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>
Select zoomType: <br/>
<div style="float:left">
Y1-1 <input type = "checkbox" id = "zoomY1-1">
Y1-2 <input type = "checkbox" id = "zoomY1-2">
</div>

<div style="float:right">
Y2-1 <input type = "checkbox" id = "zoomY2-1">
Y2-2 <input type = "checkbox" id = "zoomY2-2">
</div>

JavaScript

var chart = new CanvasJS.Chart("chartContainer",
{              
		title:{
			text: "Multiple Y Axis"
		},
    
    rangeChanging: zoomingOnlySelectedAxis,
     
		axisX:{
			valueFormatString: "####",
			interval: 1
		},
		axisY:[{
			title: "Linear Scale",
			lineColor: "#369EAD",
			titleFontColor: "#369EAD",
			labelFontColor: "#369EAD",
      checkbox: document.getElementById("zoomY1-1"),
      prevViewportMinimum: null,
      prevViewportMaximum: null
		},
		{
			title: "Logarithmic Scale",
			logarithmic: true,
			lineColor: "#C24642",
			titleFontColor: "#C24642",
			labelFontColor: "#C24642",
      checkbox: document.getElementById("zoomY1-2"),
      prevViewportMinimum: null,
      prevViewportMaximum: null
		}],
		axisY2:[{
			title: "Linear Scale",
			lineColor: "#7F6084",
			titleFontColor: "#7F6084",
			labelFontColor: "#7F6084",
      checkbox: document.getElementById("zoomY2-1"),
      prevViewportMinimum: null,
      prevViewportMaximum: null
		},
		{
			title: "Logarithmic Scale",
			logarithmic: true,
			interval: 1,
			lineColor: "#86B402",
			titleFontColor: "#86B402",
			labelFontColor: "#86B402",
      checkbox: document.getElementById("zoomY2-2"),
      prevViewportMinimum: null,
      prevViewportMaximum: null
		}],
	zoomEnabled: true,
  zoomType: "y",
	data: [
	{
		type: "column",
		showInLegend: true,
		//axisYIndex: 0, //Defaults to Zero
		name: "Axis Y-1",
		xValueFormatString: "####",
		dataPoints: [
			{ x: 2006, y: 600 },
			{ x: 2007, y: 2 },
			{ x: 2008, y: 599 },
			{ x: 2009, y: 7 },
			{ x: 2010, y: 1 },
			{ x: 2011, y: 5 },
			{ x: 2012, y: 5 },
			{ x: 2013, y: 2 },
			{ x: 2014, y: 2 }
		]
	},
	{
		type: "spline",
		showInLegend: true,
		axisYIndex: 1, //Defaults to Zero
		name: "Axis Y-2",
		xValueFormatString: "####",
		dataPoints: [
			{ x: 2006, y: 15 },
			{ x: 2007, y: 3 },
			{ x: 2008, y: 20 },
			{ x: 2009, y: 10 },
			{ x: 2010, y: 30 },
			{ x: 2011, y: 10 },
			{ x: 2012, y: 600 },
			{ x: 2013, y: 20 },
			{...