Last active
April 19, 2024 08:30
-
-
Save DNTech/716b6b2aa5992750b003d23caf592f0c to your computer and use it in GitHub Desktop.
Google Charts - Customizing Axes ( hAxis and vAxis ) | 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
| <!-- AXES IN COLUMN CHART --> | |
| <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, | |
| explorer : { | |
| actions : ["dragToZoom", "rightClickToReset"], | |
| maxZoomIn : 0.05 | |
| }, | |
| vAxis : { | |
| minorGridlines : { | |
| count : 19 | |
| }, | |
| gridlines : { | |
| count : 20 | |
| }, | |
| textStyle : { | |
| fontSize : 10 | |
| }, | |
| title : "Marks Scored", | |
| titleTextStyle : { | |
| fontName : "Oswald", | |
| italic : false, | |
| color : "#990000" | |
| }, | |
| viewWindow : { | |
| min : 50, | |
| max : 110 | |
| } | |
| }, | |
| hAxis : { | |
| textPosition : "out", | |
| direction : -1, | |
| showEveryText : 7, | |
| viewWindow : { | |
| min : 0 | |
| }, | |
| slantedText : true | |
| }, | |
| annotations : { | |
| alwaysOutside : true, | |
| }, | |
| legend : "none" | |
| }; | |
| //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 : "COLUMN CHART AXES ( vAxis & hAxis )" | |
| }); | |
| } ); | |
| </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
| //Horizontal axis Properties ( SAME will be for the Vertical Axis ) | |
| "hAxis" : { | |
| //The baseline for the horizontal axis | |
| "baseLIine" : NUMBER, | |
| //The color of the baseline for the horizontal axis | |
| "baseLineColor" : COLOR, | |
| //The direction in which the values along the horizontal axis grow | |
| "direction" : 1 / -1, | |
| //A format string for numeric or date axis labels | |
| "format" : "none / decimal / scientific / currency / percent / short / long / MMM-d-y", | |
| //An object with members to congure the gridlines on the horizontal axis. | |
| "gridlines" : { | |
| "color" : COLOR, | |
| "count" : NUMBER | |
| }, | |
| //An object with members to congure the minor gridlines on the horizontal axis. | |
| "minorGridlines" : { | |
| "color" : COLOR, | |
| "count" : NUMBER | |
| }, | |
| //Position of the horizontal axis text, relative to the chart area | |
| "textPosition" : "in / out", | |
| //An object that species the horizontal axis text style | |
| "textStyle" : { | |
| "color" : COLOR, | |
| "fontName" : FONT_FAMILY, | |
| "fontSize" : <NUMBER>, | |
| "italic" : <BOOLEAN>, | |
| "bold" : <BOOLEAN>, | |
| }, | |
| //Replaces the automatically generated X-axis ticks with the specied array. | |
| "ticks" : [ ARRAY OF NUMBERS ], | |
| //hAxis property that species the title of the horizontal axis. | |
| "title" : "TITLE OF HORIZONTAL AXIS", | |
| //An object that species the horizontal axis title text style. | |
| "titleTextStyle" : { | |
| "color" : COLOR, | |
| "fontName" : FONT FAMILY, | |
| "fontSize" : NUMBER, | |
| "bold" : <BOOLEAN>, | |
| "italic" : <BOOLEAN> | |
| }, | |
| //If false, will hide outermost labels rather than allow them to be cropped by the chart container | |
| "allowContainerBoundaryTextCufoff" : <BOOLEAN>, | |
| //draw the horizontal axis text at an angle, to help more text along the axis | |
| "slantedText" : <BOOLEAN>, | |
| //The angle of the horizontal axis text, if it's drawn slanted | |
| "slantedTextAngle" : <1-90>, | |
| //Maximum number of levels of horizontal axis text | |
| "maxAlternation" : NUMBER, | |
| //Maximum number of lines allowed for the text labels. | |
| "maxTextLines" : NUMBER, | |
| //Minimum horizontal spacing, in pixels, allowed between two adjacent text labels | |
| "minTextSpacing" : NUMBER, | |
| //Moves the max value of the horizontal axis to the specied value | |
| "maxValue" : NUMBER, | |
| //Moves the min value of the horizontal axis to the specied value | |
| "minValue" : NUMBER, | |
| // | |
| "viewWindowMode" : "pretty / maximized", | |
| //Species the cropping range of the horizontal axis | |
| "viewWindow" : { | |
| //The minimum horizontal data value to render | |
| "min" : NUMBER, | |
| //The maximum horizontal data value to render | |
| "max" : NUMBER | |
| } | |
| } | |
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment