Skip to content

Instantly share code, notes, and snippets.

@DNTech
Last active July 29, 2018 00:27
Show Gist options
  • Save DNTech/e7bcc8085bd40ae02f6e7ebb93772e21 to your computer and use it in GitHub Desktop.
Save DNTech/e7bcc8085bd40ae02f6e7ebb93772e21 to your computer and use it in GitHub Desktop.
Annotations In Column Charts (Code Based Learning By RichNet) Google Charts
'annotations" : {
//Annotations to be placed outside the bars (boolean)
"alwaysOutside" : true / false,
//Boxes Surrounding the annotations
"boxStyle" : {
//Color of the box outline
"stroke" : "#COLORCODE",
//Thickness of the box outline
"strokWidth" : NUMBER,
//x-radius of the corner curvature
"rx" : NUMBER,
//y-radius of the corner curvature
"ry" : NUMBER,
// Attributes for linear gradient fill.
"gradient": {
// Start color for gradient.
"color1": '#fbf6a7',
// Finish color for gradient.
"color2": '#33b679',
// Where on the boundary to start and
// end the color1/color2 gradient,
// relative to the upper left corner
// of the boundary.
"x1": '0%', "y1": '0%',
"x2": '100%', "y2": '100%', // If true, the boundary for x1,
// y1, x2, and y2 is the box. If
// false, it's the entire chart.
"useObjectBoundingBoxUnits": true
},
//Modify the style of the stem line of the annotation
"datum" : {
"stem" : {
"color" : "#0099fc",
"length" : NUMBER
}
},
//Let the words look clear
"highContrast" : true / false,
"textStyle" : {
//Change the font family
"fontName" : "Font Family",
//Change font color
"color" : "#COLORCODE",
//Change font size
"fontSize" : NUMBER,
//Whether the font should be bold
"bold" : "true / false",
//Whether the font should be italic
"italic" : "true / false",
//Color of the text outline
"auraColor" : "#COLORCODE",
//Transparency of the text
"opacity" : 0-1
}
}
}
<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,
highContrast : true,
datum : {
stem : {
color : "#0099fc",
length : 20
}
},
textStyle : {
fontName : 'Oswald',
color : "#454545",
auraColor : "#fcfcfc"
}
}
};
//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>
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment