The following example is from Google to create a ColumnChart using Google Charts
function drawVisualization() { // Create and populate the data table. var data = google.visualization.arrayToDataTable([ ['Year', 'Austria', 'Belgium', 'Czech Republic', 'Finland', 'France', 'Germany'], ['2003', 1336060, 3817614, 974066, 1104797, 6651824, 15727003], ['2004', 1538156, 3968305, 928875, 1151983, 5940129, 17356071], ['2005', 1576579, 4063225, 1063414, 1156441, 5714009, 16716049], ['2006', 1600652, 4604684, 940478, 1167979, 6190532, 18542843], ['2007', 1968113, 4013653, 1037079, 1207029, 6420270, 19564053], ['2008', 1901067, 6792087, 1037327, 1284795, 6240921, 19830493] ]); // Create and draw the visualization. new google.visualization.ColumnChart(document.getElementById('visualization')). draw(data, { title: "Yearly Coffee Consumption by Country", width: 600, height: 400, hAxis: { title: "Year" } }); }
Which works perfectly, however, I only want one value per column so I change it to:
function drawVisualization() { // Create and populate the data table. var data = google.visualization.arrayToDataTable([ ['Month', 'How many'], ['07', 193], ['08', 114], ['09', 158] ]); // Create and draw the visualization. new google.visualization.ColumnChart(document.getElementById('visualization')). draw(data, { title: "Yearly Coffee Consumption by Country", width: 600, height: 400, hAxis: { title: "Year" } }); }
And now the vertical axis doesn't start at 0 but close to the lowest value, in this case 114 - is this a bug? I still want it to show from 0 as it's very confusing at a quick glance like this
Any ideas?
If the metrics use the same unit of measurement, select the Display metrics on one axis check box. The range for the metrics are displayed on the left axis. Optionally, select the Start left axis at 0 checkbox to start the axis range at zero. For horizontal bar charts, select the Start bottom axis at 0 check box.
The common advice from the data visualization experts is to always start your measurement axis at zero so that the relative size of the columns or bars is always showing an accurate picture of the values being represented.
How to do that? Click “Customize” in the chart editor and click Gridlines > Horizontal Axis. Then change “Major Gridline Count” from “Auto” to 10. This way you can show all the labels on the X-axis on a Google Sheets chart.
You need to pass another parameter as part of the options when drawing the chart.
vAxis: {minValue: 0}
That will force the vertical axis to start from 0, you can see other possible options here: https://google-developers.appspot.com/chart/interactive/docs/gallery/columnchart#Configuration_Options
If you love us? You can donate to us via Paypal or buy me a coffee so we can maintain and grow! Thank you!
Donate Us With