Last active
July 28, 2018 04:05
-
-
Save DNTech/ded0c7e766caa34d02de39750d75c6c5 to your computer and use it in GitHub Desktop.
Google Charts - basic Column Chart with Annotation ( Code Based Learning by RichNet at code.richnet.in )
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" | |
}); | |
//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, | |
//If Inside the Bar then it should be clear | |
highContrast : true | |
} | |
}; | |
//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 : "BASIC COLUMN CHART WITH ANNOTATIONS" | |
}); | |
} ); | |
</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> |
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment