DNTech/BASIC COLUMN CHART.html

## BASIC COLUMN CHART.html
<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"
				});
				//Add Multiple Rows
				DT.addRows( [
					[ "Physics", 88 ],
					[ "Chemistry", 65 ],
					[ "Mathematics", 96 ],
					[ "Computer", 99 ],
					[ "English", 89 ],
					[ "Arabic", 98 ]
					] );
				//Create Options
				OPT = {
					title : "MARKS REPORT",
					legend : "bottom",
					height : 400
				};
				//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>

		<!--LOAD THE MAIN GOOGLE CHART JS FILE-->
		<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>
		<!-- LOAD PRINT JS LIBRARY TO PRINT CHART IMAGE CONTENT -->
		<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 : "BASIC COLUMN 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" id="PRINT_BTN">
			Print Chart &#128438;
		</button>
	</body>
</html>
	<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"
	});
	//Add Multiple Rows
	DT.addRows( [
	[ "Physics", 88 ],
	[ "Chemistry", 65 ],
	[ "Mathematics", 96 ],
	[ "Computer", 99 ],
	[ "English", 89 ],
	[ "Arabic", 98 ]
	] );
	//Create Options
	OPT = {
	title : "MARKS REPORT",
	legend : "bottom",
	height : 400
	};
	//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>

	<!--LOAD THE MAIN GOOGLE CHART JS FILE-->
	<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>
	<!-- LOAD PRINT JS LIBRARY TO PRINT CHART IMAGE CONTENT -->
	<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 : "BASIC COLUMN 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" id="PRINT_BTN">
	Print Chart 🖶
	</button>
	</body>
	</html>