Last active
July 29, 2018 01:30
-
-
Save DNTech/26bdc17c4a3b7b6c62f45b8cd3b66fb1 to your computer and use it in GitHub Desktop.
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
<!--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> |
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
//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 | |
} |
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment