DNTech/EXPLORER IN COLUMN CHART.js

## EXPLORER IN COLUMN CHART.js
<!--EXPLORER IN COLUMN CHART EXAMPLE-->
<html>
	<head>
		<link href="/css/w3.css" rel="stylesheet" />
		<link href="/css/print.min.css" rel="stylesheet" />
		<script>
			//Declaring Global Variables
			var GV, CHT, DT, OPT;
			function drawChart(){
			    GV = google.visualization;
			    //Create DataTable Object
			    DT = new GV.DataTable();
			    //Add Two Columns
			    DT.addColumn({
			        type : "string",
			        label : "SUBJECTS"
			    });
			    DT.addColumn({
			        type : "number",
			        label : "MARKS"
			    });
				//Column for annotation
			    DT.addColumn({
			        type : "string",
			        label : "MARKS",
					role : "annotation"
			    });
			    //Add Multiple Rows
			    DT.addRows( [
			        [ "Physics", 88, "Great" ],
			        [ "Chemistry", 65, "Hate it" ],
			        [ "Mathematics", 96, "Love It" ],
			        [ "Computer", 99, "My Life" ],
			        [ "English", 89, "Like It" ],
			        [ "Arabic", 98, "Wow" ]
			    ] );
			    //Create Options
			    OPT = {
			        title : "MARKS REPORT",
			        legend : "bottom",
		 	        height : 400,
					//Modify Default Config For Annotations
					annotations : {
						//Annotation to be placed outside the bars
						alwaysOutside : true
					},
					explorer : {
						//The type of action based on user event
		    			actions : ["dragToZoom", "rightClickToReset"],
		    			//users won't pan beyond the original chart
		    			keepInBounds : false,
		    			//Lets the user zoom in to a specific limit
		    			maxZoomIn : 0.4,
		    			//Let the user zoom out to a specific limit
		    			maxZoomOut : 10,
		    			//determines how much they zoom by. The smaller the number, the smoother and slower the zoom.
		    			zoomDelta : 1.5
	  	  			}
 			    };
			    //Create a Column chart and assign a DIV element via ID
			    CHT = new GV.ColumnChart( document.getElementById("MY_CHART") );
			    //Draw the Chart by passing DT (DataTable) and OPT (Options)
			    CHT.draw( DT, OPT );
			}
		</script>
		<script src="https://www.gstatic.com/charts/loader.js"></script>
		<script>
			//Load the core chart library
			google.charts.load( "current", { packages : ["corechart"] } );
			//Assign a callback function to be executed when corechart loads successfully
			google.charts.setOnLoadCallback( drawChart );
		</script>
		<script src="/js/jq.js"></script>
		<script src="/js/print.min.js"></script>
		<script>
			//Attach Event to the Print Button
			$(document).on( "click", "#PRINT_BTN", function(){
				//Get Chart Image URI ( Base64 )
				var IMG_URI = CHT.getImageURI();
				//Pass the Base64 content to the PrintJS library function to print it
				printJS({
					printable : IMG_URI,
					type : "image",
					header : "ANNOTATIONS IN COLUM CHART"
				});
			} );
		</script>
	</head>
	<body>
		<div id="MY_CHART" class="w3-white" style="width:100%;height:400px"></div>
		<br/>
		<button class="w3-button w3-white w3-round-small w3-right" id="PRINT_BTN">
			Print Chart &#128438;
		</button>
	</body>
</html>

## EXPLORER OBJECT.js
//EXPLORER IN COLUMN CHART OBJECT PROPERTIES
//The explorer option allows users to pan and zoom Google charts
"explorer" : {
	//The type of action based on user event
	"actions" : [ "dragToPan", "dragToZoom", "rightClickToReset" ],
	//which axis to zoom / pan
	"axis" : "vertical / horizontal",
	//users won't pan beyond the original chart
	"keepInBounds" : true / false,
	//Lets the user zoom in to a specific limit
	"maxZoomIn" : 0.0 - 1.0,
	//Let the user zoom out to a specific limit
	"maxZoomOut" : NUMBER,
	//determines how much they zoom by. The smaller the number, the smoother and slower the zoom.
	"zoomDelta" : DECIMAL NUMBER
}
	<!--EXPLORER IN COLUMN CHART EXAMPLE-->
	<html>
	<head>
	<link href="/css/w3.css" rel="stylesheet" />
	<link href="/css/print.min.css" rel="stylesheet" />
	<script>
	//Declaring Global Variables
	var GV, CHT, DT, OPT;
	function drawChart(){
	GV = google.visualization;
	//Create DataTable Object
	DT = new GV.DataTable();
	//Add Two Columns
	DT.addColumn({
	type : "string",
	label : "SUBJECTS"
	});
	DT.addColumn({
	type : "number",
	label : "MARKS"
	});
	//Column for annotation
	DT.addColumn({
	type : "string",
	label : "MARKS",
	role : "annotation"
	});
	//Add Multiple Rows
	DT.addRows( [
	[ "Physics", 88, "Great" ],
	[ "Chemistry", 65, "Hate it" ],
	[ "Mathematics", 96, "Love It" ],
	[ "Computer", 99, "My Life" ],
	[ "English", 89, "Like It" ],
	[ "Arabic", 98, "Wow" ]
	] );
	//Create Options
	OPT = {
	title : "MARKS REPORT",
	legend : "bottom",
	height : 400,
	//Modify Default Config For Annotations
	annotations : {
	//Annotation to be placed outside the bars
	alwaysOutside : true
	},
	explorer : {
	//The type of action based on user event
	actions : ["dragToZoom", "rightClickToReset"],
	//users won't pan beyond the original chart
	keepInBounds : false,
	//Lets the user zoom in to a specific limit
	maxZoomIn : 0.4,
	//Let the user zoom out to a specific limit
	maxZoomOut : 10,
	//determines how much they zoom by. The smaller the number, the smoother and slower the zoom.
	zoomDelta : 1.5
	}
	};
	//Create a Column chart and assign a DIV element via ID
	CHT = new GV.ColumnChart( document.getElementById("MY_CHART") );
	//Draw the Chart by passing DT (DataTable) and OPT (Options)
	CHT.draw( DT, OPT );
	}
	</script>
	<script src="https://www.gstatic.com/charts/loader.js"></script>
	<script>
	//Load the core chart library
	google.charts.load( "current", { packages : ["corechart"] } );
	//Assign a callback function to be executed when corechart loads successfully
	google.charts.setOnLoadCallback( drawChart );
	</script>
	<script src="/js/jq.js"></script>
	<script src="/js/print.min.js"></script>
	<script>
	//Attach Event to the Print Button
	$(document).on( "click", "#PRINT_BTN", function(){
	//Get Chart Image URI ( Base64 )
	var IMG_URI = CHT.getImageURI();
	//Pass the Base64 content to the PrintJS library function to print it
	printJS({
	printable : IMG_URI,
	type : "image",
	header : "ANNOTATIONS IN COLUM CHART"
	});
	} );
	</script>
	</head>
	<body>
	<div id="MY_CHART" class="w3-white" style="width:100%;height:400px"></div>
	<br/>
	<button class="w3-button w3-white w3-round-small w3-right" id="PRINT_BTN">
	Print Chart 🖶
	</button>
	</body>
	</html>
	//EXPLORER IN COLUMN CHART OBJECT PROPERTIES
	//The explorer option allows users to pan and zoom Google charts
	"explorer" : {
	//The type of action based on user event
	"actions" : [ "dragToPan", "dragToZoom", "rightClickToReset" ],
	//which axis to zoom / pan
	"axis" : "vertical / horizontal",
	//users won't pan beyond the original chart
	"keepInBounds" : true / false,
	//Lets the user zoom in to a specific limit
	"maxZoomIn" : 0.0 - 1.0,
	//Let the user zoom out to a specific limit
	"maxZoomOut" : NUMBER,
	//determines how much they zoom by. The smaller the number, the smoother and slower the zoom.
	"zoomDelta" : DECIMAL NUMBER
	}