Skip to content

Instantly share code, notes, and snippets.

@michaelsteuer

michaelsteuer/AXES IN COLUMN CHART.js

Forked from DNTech/AXES IN COLUMN CHART.js
Created April 19, 2024 08:30
Show Gist options
  • Save michaelsteuer/810ceb15b79e75d620ba782ae91b2a29 to your computer and use it in GitHub Desktop.
Save michaelsteuer/810ceb15b79e75d620ba782ae91b2a29 to your computer and use it in GitHub Desktop.
Download ZIP
Google Charts - Customizing Axes ( hAxis and vAxis ) | Code Based Learning by RichNet
Raw
AXES IN COLUMN CHART.js
<!-- 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 &#128438;
</button>
</body>
</html>
Raw
hAxis Properties.js
//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