Last active
July 28, 2018 03:12
-
-
Save DNTech/fd24c347a9ee11dd968fabaa95b2dfce to your computer and use it in GitHub Desktop.
Create Basic Column with manual Data (Google Charts - Code Based Learning by RichNet)
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
<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> |
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment