Last active
July 29, 2018 00:27
-
-
Save DNTech/e7bcc8085bd40ae02f6e7ebb93772e21 to your computer and use it in GitHub Desktop.
Annotations In Column Charts (Code Based Learning By RichNet) Google Charts
This file contains hidden or 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
| '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 | |
| } | |
| } | |
| } |
This file contains hidden or 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, | |
| 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 🖶 | |
| </button> | |
| </body> | |
| </html> |
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment