Develop Reference

Google Graphs One value for Y -axis (Stacked columns for Two charts)

Full code
You can use jsfiddle too testing.
google.load('visualization', '1.1', {
'packages': ['bar']
});
google.setOnLoadCallback(drawStuff);
function drawStuff() {
var data = new google.visualization.DataTable();
data.addColumn('string', 'Topping');
data.addColumn('number', 'Nescafe Instant');
data.addColumn('number', 'Folgers Instant');
data.addColumn('number', 'Nescafe Beans');
data.addColumn('number', 'Folgers Beans');
data.addRows([
['2001', 500, 1200, 816, 200],
['2002', 163, 231, 539, 594],
['2003', 125, 819, 200, 578],
['2004', 197, 536, 613, 500]
]);
// Set chart options
var options = {
isStacked: true,
width: 800,
height: 600,
chart: {
title: 'Year-by-year coffee consumption',
subtitle: 'This data is not real'
},
series: {
2: {
targetAxisIndex: 1
},
3: {
targetAxisIndex: 1
}
}
};
// Instantiate and draw our chart, passing in some options.
var chart = new google.charts.Bar(document.getElementById('chart_div'));
chart.draw(data, google.charts.Bar.convertOptions(options));
};
The Output
The Question
I use Google Visualization to generate above chart.
If you see the above screenshot you can see that Y- axis of above chart has two values in left side and right side. Seems like it happens because graphs use two date range for left side and right side bar.
I wanted to remove right side Y axis or print the same values for both right and left Y axis. I mean all data should be under the Y - axis which is on left side. What can I do to do it?

the options for series.n.targetAxisIndex create the second axis
removing these options will allow all series to default to the first axis
however, in Material bar charts, moving a series to a different axis,
separates the series into multiple stacks, resulting in blue and red bars
removing the options mentioned above will combine all series into one blue stack
in order to keep the stacks separated in two colors,
series.n.targetAxisIndex must be used and dual axis' will be displayed
to keep the two axis' in sync, use option --> vAxis.viewWindow
this will set an identical range for both axis'
vAxis: {
viewWindow: {
min: 0,
max: 1800
}
}
see following working snippet...
google.charts.load('current', {
packages: ['bar']
}).then(drawStuff);
function drawStuff() {
var data = new google.visualization.DataTable();
data.addColumn('string', 'Topping');
data.addColumn('number', 'Nescafe Instant');
data.addColumn('number', 'Folgers Instant');
data.addColumn('number', 'Nescafe Beans');
data.addColumn('number', 'Folgers Beans');
data.addRows([
['2001', 500, 1200, 816, 200],
['2002', 163, 231, 539, 594],
['2003', 125, 819, 200, 578],
['2004', 197, 536, 613, 500]
]);
var options = {
isStacked: true,
width: 800,
height: 600,
chart: {
title: 'Year-by-year coffee consumption',
subtitle: 'This data is not real'
},
series: {
2: {
targetAxisIndex: 1
},
3: {
targetAxisIndex: 1
}
},
vAxis: {
viewWindow: {
min: 0,
max: 1800
}
}
};
var chart = new google.charts.Bar(document.getElementById('chart_div'));
chart.draw(data, google.charts.Bar.convertOptions(options));
}
<script src="https://www.gstatic.com/charts/loader.js"></script>
<div id="chart_div"></div>
note: jsapi should no longer be used to load the charts library,
according to the release notes...
The version of Google Charts that remains available via the jsapi loader is no longer being updated consistently. The last update, for security purposes, was with a pre-release of v45. Please use the new gstatic loader.js from now on.
this will only change the load statement, see above snippet...

Google Chart keeps showing negative Values on yAxis

I am currently working with Google Charts to visualize data to the user. If there is no Data, the google chart automatically draws the y-Axis from -1 to 1. But in my case, -1 makes no sense, so I want it to show the empty chart from 0 to n (max value doesn't matter, I just don't want negative ones). I already searched for solutions, and the most common answer is, that
viewWindow: {
min: 0
}
should help. But, it doesn't. I guess I just use it the wrong way because it works for so many other users, but I can't figure out, what's wrong. So here is how I tried to avoid negative Y-Values:
function drawChart() {
var data = google.visualization.arrayToDataTable(dataArray);
var options = {
vAxis: { viewWindowMode: "explicit", viewWindow:{ min: 0 }},
chart: {
title: 'Check Diagramm',
subtitle: '#chartTitle',
},
colors: ['#8BC34A', '#F44336']
};
var chart = new google.charts.Bar(document.getElementById('columnchart_material'));
chart.draw(data, options);
}
And the result is always:
Thanks in advance for your help :)
Edit:
I also tried
vAxis: {
minValue:0,
viewWindow: {
min: 0
}
}

viewWindow: {min: 0} works, but when using Material charts,
have to convert the options...
google.charts.Bar.convertOptions
see following snippet...
google.charts.load('current', {
callback: function () {
var dataArray = [
['Month', 'Positive Checks', 'Negative Checks'],
['Jan', 0, 0],
['Feb', 0, 0],
['Mar', 0, 0],
['Apr', 0, 0],
['May', 0, 0]
];
var data = google.visualization.arrayToDataTable(dataArray);
// convert options
var options = google.charts.Bar.convertOptions({
height: 600,
width: 800,
vAxis: {
viewWindow: {
min: 0
}
},
chart: {
title: 'Check Diagramm',
subtitle: '#chartTitle',
},
colors: ['#8BC34A', '#F44336']
});
var chart = new google.charts.Bar(document.getElementById('columnchart_material'));
chart.draw(data, options);
},
packages: ['bar']
});
<script src="https://www.gstatic.com/charts/loader.js"></script>
<div id="columnchart_material"></div>

Google Chart : Remove repetitive y axis

I am using google chart which is working absolutely fine except one thing the issue is when I select custom date filter and choose only single date from it then it will show only 1 record with little dot which is also fine no issue with that but its y axis shows repetitive values in it.
Please check example :
http://awesomescreenshot.com/0f757w8k3a
it shows 0, 1, 1, 2, 2
it should show 0, 1, 2, 3, 4 or just 0, 1, 2
var options = {
vAxis: {
format: '#',
minValue: 0,
gridlines: {
color: 'transparent'
},
viewWindowMode: "explicit",
viewWindow:{ min: 0 }
},
hAxis: { textPosition: 'none' },
legend: { position: 'none' },
colors:[{color:'#A8D1FF', darker:'#97B9D8'}]
};
var chart = new google.visualization.AreaChart(document.getElementById('PostChart'));
chart.draw(PostChartData, options);

That may be cause of small range of values for Y axis. Try using Ticks for vAxis commonly referred as vAxis.ticks
vAxis: { ticks: [5,10,15,20] } //array
vAxis: { ticks: [{v:32, f:'thirty two'}, {v:64, f:'sixty four'}] } // A valid value as V
vAxis: { ticks: [new Date(2014,3,15), new Date(2013,5,15)] } // Dates
Click Here for Ref.
Edit1: In case your record values belongs to smaller range and and you have set the Max Value of vAxis to a higher value, It can also result in Repeated values in vAxis.

google charts api - column chart - percentage above vertical bar along with normal values on left side of vaxis

I am using google charts to generate a column chart as shown in this image:
http://postimg.org/image/mt7tzwwob/
Here, data will be like [['a', 1], ['b', 2], ['c', 3]]
Here, I am getting values 1,2,3 on left left side of vaxis which is ok for me.
What I want extra is: The percentages at the top of the vertical bar.
x+2x+3x = 100, means, x=16, 2x=33, 3x=50. So, 16% should be at top of vertical bar with value 1.
How can I get these percentages ?

The ColumnChart's don't support adding labels like a percentage above the columns, but there is a work-around that involves using a ComboChart and a hidden line to add them in. Here's some example code that adds in labels (you can replace the labels with percents in you want):
function drawChart() {
var data = new google.visualization.DataTable();
data.addColumn('string', 'Name');
data.addColumn('number', 'Value');
data.addColumn({type: 'string', role: 'annotation'});
data.addRows([
['Foo', 53, 'Foo text'],
['Bar', 71, 'Bar text'],
['Baz', 36, 'Baz text'],
['Cad', 42, 'Cad text'],
['Qud', 87, 'Qud text'],
['Pif', 64, 'Pif text']
]);
var view = new google.visualization.DataView(data);
view.setColumns([0, 1, 1, 2]);
var chart = new google.visualization.ComboChart(document.getElementById('chart_div'));
chart.draw(view, {
height: 400,
width: 600,
series: {
0: {
type: 'bars'
},
1: {
type: 'line',
color: 'grey',
lineWidth: 0,
pointSize: 0,
visibleInLegend: false
}
},
vAxis: {
maxValue: 100
}
});
}
see it working here: http://jsfiddle.net/asgallant/QjQNX/
This only works well for charts that have a single series of data (as the labels will be misaligned if there is more than one series).

Setting a hard minimum axis value in Google Charts API

I'm trying to build a Google Chart to show some uptime and downtime percentages, stacked. This works great except for one small thing - I'd like the baseline of the chart to be at 99.8, and the maximum to be 100 - since downtimes are usually less than .2, this will make the chart readable.
This seemed simple enough to me. I figured this would work:
var data = new google.visualization.DataTable();
data.addColumn('string', 'Date');
data.addColumn('number', 'Uptime');
data.addColumn('number', 'Downtime');
data.addRows([
['Dec 1, 1830', 99.875, 0.125],
['Dec 8, 1830', 99.675, 0.325],
['Dec 15, 1830', 99.975, 0.025],
['Dec 22, 1830', 100.0, 0.0]
]);
var chart = new google.visualization.ColumnChart(document.getElementById('chart_div'));
chart.draw(data, {width: 400, height: 240, isStacked: true, vAxis: { title: "Percentage Uptime", minValue: 99.8, maxValue: 100}});
Unfortunately, the chart utterly disregards the minValue on the vAxis. This seems to be expected behaviour, according to the API, but this leaves the question - how would I accomplish this? I even went so far as to transform the data - ie, to subtract 99.8 from all the uptime values, and just have the chart go from 0 to .2, and this spits out a graph that looks okay, but I can't apply labels to the vertical axis that would say 99.8, 99.85, 99.9, whatever - the axis says, quite dutifully, 0 at the bottom, and .2 at the top, and there seems to be no way to fix it this directions, either. Either solution would be acceptable, I'm sure there's SOME way to make this work?

you need to set viewWindow like this:
var data = new google.visualization.DataTable();
data.addColumn('string', 'Date');
data.addColumn('number', 'Uptime');
data.addColumn('number', 'Downtime');
data.addRows([
['Dec 1, 1830', 99.875, 0.125],
['Dec 8, 1830', 99.675, 0.325],
['Dec 15, 1830', 99.975, 0.025],
['Dec 22, 1830', 100.0, 0.0]
]);
var chart = new google.visualization.ColumnChart(document.getElementById('chart_div'));
chart.draw(data,
{width: 400,
height: 240,
isStacked: true,
vAxis: {
title: "Percentage Uptime",
viewWindowMode:'explicit',
viewWindow:{
max:100,
min:99.8
}
}
}
);
//edited for newer version of api

I had a similar problem and had to specify the property as "min" not "minValue"
vAxis: {
viewWindowMode:'explicit',
viewWindow: {
max:100,
min:99.8
}
}