We Keep Coding

Google Charts - Can you align columns in a column chart to the center of the chart?

Is there a way using the column chart provided by the Google charts javascript api to center columns in the middle of the chart rather than having large amounts of space between each column? I can accomplish this by grouping the values together but I lose the label under the column.
Here's a pic of what I'm trying to accomplish:
Here's what I have so far:
google.charts.load('current', { packages: ['corechart', 'bar'] })
google.charts.setOnLoadCallback(drawColColors)
function drawColColors() {
const data = google.visualization.arrayToDataTable([
['Number', 'Price'],
['1', 1900000],
['2', 1800000],
['3', 1500000]
])
const options = {
width: '100%',
height: 400,
colors: ['red'],
vAxis: { minValue: 0, format: '$###,###,###' },
enableInteractivity: false,
bar: { groupWidth: 45 },
legend: { position: 'none' }
}
const chart = new google.visualization.ColumnChart(document.getElementById('chart'))
chart.draw(data, options)
}
Codesandbox: https://codepen.io/anon/pen/GworqG

bar.groupWidth is the only config option that will specifically address column alignment
(in this manner)
however, instead of a number...
bar: {groupWidth: 45},
you can also use a percentage.
This won't necessarily move the columns, but it will make them larger, bringing them closer together.
bar: {groupWidth: '90%'},
see following working snippet for an example...
google.charts.load('current', {
packages: ['corechart']
}).then(function () {
var data = google.visualization.arrayToDataTable([
['Number', 'Price'],
['1', 1900000],
['2', 1800000],
['3', 1500000]
])
var options = {
width: '100%',
height: 400,
colors: ['red'],
vAxis: {minValue: 0, format: '$###,###,###'},
enableInteractivity: false,
bar: {groupWidth: '90%'},
legend: { position: 'none' }
}
var chart = new google.visualization.ColumnChart(document.getElementById('chart'))
chart.draw(data, options)
});
<script src="https://www.gstatic.com/charts/loader.js"></script>
<div id="chart"></div>
another option would be to use actual numbers (1), rather than strings ('1'), on the x-axis.
this enables additional config options you can use to push the columns closer to the center.
for instance, setting the viewWindow will allow you to add space between the visible columns and the edges.
hAxis: {
viewWindow: {
min: -2,
max: 6
}
}
by default, a continuous axis (numbers) will display grid lines,
whereas a discrete axis (strings) will not.
these can be removed, or hidden, with the following options.
baselineColor: 'transparent',
gridlines: {
color: 'transparent'
},
see following working snippet for another example...
google.charts.load('current', {
packages: ['corechart']
}).then(function () {
var data = google.visualization.arrayToDataTable([
['Number', 'Price'],
[1, 1900000],
[2, 1800000],
[3, 1500000]
])
var options = {
width: '100%',
height: 400,
colors: ['red'],
vAxis: {minValue: 0, format: '$###,###,###'},
enableInteractivity: false,
legend: {position: 'none'},
hAxis: {
baselineColor: 'transparent',
gridlines: {
color: 'transparent'
},
ticks: data.getDistinctValues(0),
viewWindow: {
min: -2,
max: 6
}
}
}
var chart = new google.visualization.ColumnChart(document.getElementById('chart'))
chart.draw(data, options)
});
<script src="https://www.gstatic.com/charts/loader.js"></script>
<div id="chart"></div>

Google Visualization API double Y axis - not being able to adjust targetAxisIndex

I am creating a multiple line chart with Google Chart API where I want to use 2 Y axis such as -> , but with one axis set to max 24000 for my 6 countries, and the second set to 90000 for the 'Total World' column.
The problem is that my set of options never returns the 'Total World' in the second y axis and the other 6 countries in the first y axis, no matter how I arrange the option 'targetAxisIndex':
var tot = 95000;
var min = 0, var max = 24000;
....
var options = {
title: 'Top Consuming Nations - Thousand barrels daily',
hAxis: {title: 'Year'},
width: 1050, height : 400,
vAxes: [
{title: 'Top Countries', titleTextStyle: {color: '#FF0000'}, maxValue: max}, // Left axis maxValue: 60000
{title: 'Total World', titleTextStyle: {color: '#FF0000'}, maxValue: tot} // Right
],
series:[
{targetAxisIndex:1},
{targetAxisIndex:0}
],
legend: { position: 'top', alignment: 'start' }
};
here is the complete code: http://plnkr.co/edit/u5xXExdkTTYU8fHxWzHB?p=preview

I found the answer on Google Groups:
Hi Chris,
The series option is supposed to be a mapping of series index to series options. When you specify it as an array, you're basically doing that assignment implicitly. So in your example, series 0 will go on axis 1, and series 1 will go on axis. All other series will go to the default axis (0). Your issue could be fixed pretty easily, by simply reorganizing your series such that the total is the first. Alternatively, you could explicitly specify that series 6 (your total series, 'country6') should go on axis 1. The default is for things to go on axis 0, so you don't need to explicitly specify that. Here's an updated version of your plunkr with the second version of the solution (since that was easier for me to do): http://plnkr.co/edit/GhsNcBCtDW0i4OTu0VJR?p=preview
var options = {
title: 'Top Consuming Nations - Thousand barrels daily',
hAxis: {title: 'Year'},
width: 1050, height : 400,
vAxes: [
{title: 'Top Countries', titleTextStyle: {color: '#FF0000'}, maxValue: max}, // Left axis maxValue: 60000
{title: 'Total World', titleTextStyle: {color: '#FF0000'}, maxValue: tot} // Right
],
series:{
6: {targetAxisIndex: 1}
},
legend: { position: 'top', alignment: 'start' }
};
var chart = new google.visualization.LineChart(document.getElementById(chartDiv));
chart.draw(data, options);

Put 2 line charts to one Google Chart

I am trying to put 2 graphics with different scale to one Google Chart:
var options = {
curveType: 'function',
legend: { position: 'bottom' },
vAxis: {
0: {
gridlines: { count: 10 },
viewWindow:{
max:250,
min:0
}
},
1: {
gridlines: { count: 10 },
viewWindow:{
max:20000,
min:0
}
},
},
series:{
0:{targetAxisIndex:0},
1:{targetAxisIndex:1}
},
'chartArea': {'width': '90%', 'height': '75%'}
};
But I received this result:
All the data is positive numbers for both charts. Why I received -100 on the left side? What is wrong?
Thanks!

The solution is quite simple:
hAxis and vAxis contain the options of the horizontal and vertical axes, respectively. And if you want multiple vertical axes, you have to use vAxes (not vAxis)!!!

google chart api draws negative axis as well though minValue is 0

I have a google chart as follows which plots Age for various IDs. However, as age cannot be negative, I want it to be only on the positive axis.
I have given the minValue for vertical axis as 0, however it still shows the negative axis. How can I fix this?
My code below
function AgeChart() {
google.load("visualization", "1", {packages:["corechart"]});
var age_data = new google.visualization.DataTable();
var divname = "agediv";
age_data.addColumn('number', 'ID');
age_data.addColumn('number', 'Age');
age_data.addRow([1,10]);
age_data.addRow([1,20]);
age_data.addRow([1,30]);
age_data.addRow([1,40]);
age_data.addRow([1,50]);
var options = {'title':'Age line graph',
curveType: 'function',
viewWindowMode:'explicit',
vAxis: {title: 'Age (years)',
minValue: 0,
},
hAxis: {title: 'ID'},
height: 600,
width: 1000
};
var chart = new google.visualization.LineChart(document.getElementById(divname));
chart.draw(age_data, options);
}
EDIT: After adding the viewWindow.min value, it works for me.
function AgeChart() {
google.load("visualization", "1", {packages:["corechart"]});
var age_data = new google.visualization.DataTable();
var divname = "agediv";
age_data.addColumn('number', 'ID');
age_data.addColumn('number', 'Age');
age_data.addRow([1,10]);
age_data.addRow([1,20]);
age_data.addRow([1,30]);
age_data.addRow([1,40]);
age_data.addRow([1,50]);
var options = {'title':'Age line graph',
curveType: 'function',
viewWindowMode:'explicit',
vAxis: {title: 'Age (years)',
minValue: 0,
viewWindowMode:'explicit',
viewWindowMode:'explicit',
viewWindow:{
min:0,
}
},
hAxis: {title: 'ID'},
height: 600,
width: 1000
};
var chart = new google.visualization.LineChart(document.getElementById(divname));
chart.draw(age_data, options);
}

The minValue and maxValue may be used to extend the axis to include those values, but they do not restrict the axis to those values. What you want to do instead is use the viewWindow.min value.

On the date 26/10/2015 the actual version of Google charts requires only the following to stop displaying the negatives on the vertical axis.
var options = {
hAxis: { title: 'Dates',
},
vAxis: { title: 'Count of something',
viewWindow:{min:0},
},
};
As an option you can set up min value for more than 0 - it will give you same view.
vAxis: { title: 'Count',
minValue: 2,
},

setting the vertical axis scale in google charts api

I was playing around with trying to set the vertical axis scale in my google charts. I'm not happy with the auto scaling that it does since I have two results and want to see them on an even scale for apples-to-apples comparison.
This is my code. I have set the max and min values, yet that does not seem to apply in the output.
Code
function createExpenseChart(data) {
google.load("visualization", "1", {packages:["corechart"]});
var chartdata = new google.visualization.DataTable();
chartdata.addColumn('number', 'Expense');
chartdata.addColumn('number', '2013');
chartdata.addColumn('number', '2014');
for (var k in data["Expense"]["2013"]){
if (data["Expense"]["2013"].hasOwnProperty(k)) {
["2013"][k],10),parseInt(data["Expense"]["2014"][k],10)])
chartdata.addRow([parseInt(k,10),parseInt(data["Expense"]["2013"][k],10),parseInt(data["Expense"]["2014"][k],10)]);
}
}
var options = {'title':'2013 vs. 2014 comparison,
curveType: 'function',
viewWindowMode:'explicit',
viewWindow:{
max:100000,
min:10000
},
vAxis: {title: 'Cost ($)',
minValue: 0,
},
hAxis: {title: 'Expense (dollars)'},
height: 600,
width: 1000
};
var chart = new google.visualization.LineChart(document.getElementById('mydiv'));
chart.draw(chartdata, options);
}
I have also tried the following, but they don't show any effect
var options = {'title':'2013 v/s 2014',
curveType: 'function',
viewWindowMode:'explicit',
viewWindow:{
max:80,
min:20
},
vAxis: {
title: 'Cost ($)'
viewWindowMode:'explicit',
viewWindow: {
max:10000,
min:10000
}
},
hAxis: {title: 'Expense (dollars)'},
height: 600,
width: 1000
};

Sorry guys, this is resolved. Pretty much the same code worked me. I just had to clean my cache.
Sorry for the confusion.
function createExpenseChart(data) {
google.load("visualization", "1", {packExpenses:["corechart"]});
var chartdata = new google.visualization.DataTable();
chartdata.addColumn('number', 'Expense');
chartdata.addColumn('number', 'Previous Cost');
chartdata.addColumn('number', '2014 Cost');
for (var k in data["Expense"]["2013"]){
if (data["Expense"]["2013"].hasOwnProperty(k)) {
//console.log([parseInt(k,10),parseInt(data["Expense"]["2013"][k],10),parseInt(data["Expense"]["2014"][k],10)])
chartdata.addRow([parseInt(k,10),parseInt(data["Expense"]["2013"][k],10),parseInt(data["Expense"]["2014"][k],10)]);
}
}
var formatter = new google.visualization.NumberFormat({negativeColor: 'red', negativeParens: true, pattern: '$###,###'});
formatter.format(chartdata, 1);
formatter.format(chartdata, 2);
var options = {'title':'2013 vs. 2014 Costs by Expense',
curveType: 'function',
viewWindowMode:'explicit',
viewWindow:{
min:0
},
vAxis: {title: 'Cost ($)',
viewWindowMode : 'explicit',
viewWindow:
{
min: 0,
max:42000000
}
},
hAxis: {title: 'Expense (years)'},
height: 600,
width: 1000
};
var chart = new google.visualization.LineChart(document.getElementById('Expensecostdiv'));
chart.draw(chartdata, options);
}