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.visualization[$attr.googleChart] is not a constructor

I am working on angularjs google charts.
In the example i'm trying to show Line chart and Gantt chart, but facing issue displaying the Gantt chart.
Gantt chart is not shown on the webpage, below is the error shown on the console.
angular.js:5754 TypeError: google.visualization[$attr.googleChart] is not a constructor
Any inputs would be helpful.
js code:
"use strict";
/*We need to manually start angular as we need to
wait for the google charting libs to be ready*/
google.setOnLoadCallback(function () {
angular.bootstrap(document.body, ['my-app']);
});
google.load('visualization', '1', { packages: ['corechart'] });
function daysToMilliseconds(days) {
return days * 24 * 60 * 60 * 1000;
}
var myApp = myApp || angular.module("my-app", ["google-chart"]);
myApp.controller("IndexCtrl", function ($scope) {
$scope.data1 = {};
$scope.data1.dataTable = new google.visualization.DataTable();
$scope.data1.dataTable.addColumn('string', 'Task ID');
$scope.data1.dataTable.addColumn('string', 'Task Name');
$scope.data1.dataTable.addColumn('date', 'Start Date');
$scope.data1.dataTable.addColumn('date', 'End Date');
$scope.data1.dataTable.addColumn('number', 'Duration');
$scope.data1.dataTable.addColumn('number', 'Percent Complete');
$scope.data1.dataTable.addColumn('string', 'Dependencies');
$scope.data1.dataTable.addRows([
['Research', 'Find sources',
new Date(2015, 0, 1), new Date(2015, 0, 5), null, 100, null],
['Write', 'Write paper',
null, new Date(2015, 0, 9), daysToMilliseconds(3), 25, 'Research,Outline'],
['Cite', 'Create bibliography',
null, new Date(2015, 0, 7), daysToMilliseconds(1), 20, 'Research'],
['Complete', 'Hand in paper',
null, new Date(2015, 0, 10), daysToMilliseconds(1), 0, 'Cite,Write'],
['Outline', 'Outline paper',
null, new Date(2015, 0, 6), daysToMilliseconds(1), 100, 'Research']
]);
$scope.data3 = {};
$scope.data3.dataTable = new google.visualization.DataTable();
$scope.data3.dataTable.addColumn("string", "Name")
$scope.data3.dataTable.addColumn("number", "Qty")
$scope.data3.dataTable.addRow(["Test", 1]);
$scope.data3.dataTable.addRow(["Test2", 2]);
$scope.data3.dataTable.addRow(["Test3", 3]);
});

You seem to be using an old version of the API. Use loader.js, not jsapi.js
using loader.js, you can load all the libs you needs by specifiying in the packages array. In this case, you need packages: ['corechart', 'gantt']
Here's the demo, updated https://plnkr.co/edit/Fxz9xP7UXqgBs3m0EfSg?p=preview
In index.html
<script type="text/javascript" src="https://www.gstatic.com/charts/loader.js"></script>
and in main.js
google.charts.load('visualization', '1', { packages: ['corechart', 'gantt'] });
google.charts.setOnLoadCallback(function () {
angular.bootstrap(document.body, ['my-app']);
});
Things to note:
It's google.charts namespaced, and not google.load directly
Make sure you call google.charts.load before google.charts.setOnLoadCallback
Make sure you load all the packages you need
You can see old version loading info, & limitations on loading charts in Google documentation here

Google Charts throws "cannot read property '1' of undefined" when creating a view

I am working with google charts and would like to create a line chart where not all colums from the underlying data is visible. I found here - https://developers.google.com/chart/interactive/docs/reference#DataView that DataViewClass should be a good solution for it and tried to implement it as below. Unfortunately when I try to generate the chart I am getting "cannot read property '1' of undefined" error but no errors in the console.
Has anyone came across this? Any ideas for the solution?
best,
Adam
function testersBreakdown (testType, app){
// Data for the graph - need to be replaced by a correct query to backend
// TO DO: Format data and generate graphs
var data;
data = new google.visualization.DataTable();
data.addColumn('number', 'Test Cycle');
data.addColumn('number', 'Total');
data.addColumn('number', 'F2F');
data.addColumn('number', 'Scalable In the Office');
data.addColumn('number', 'Remote Testing');
data.addRows([
[1, 10, 3, 4, 3],
[2, 11, 4, 4, 3],
[3, 15, 3, 9, 3],
[4, 20, 3, 9, 8],
[5, 45, 30, 14, 1]
]);
var options = {
width: '100%',
height: 600,
hAxis: {
title: 'Test Cycle'
},
vAxis: {
title: 'Responses'
},
colors: ['#a52714', '#097138', 'black', 'blue'],
animation: {
duration: 300,
startup: true,
},
};
// Intermediate object to control views based on dropdown
// TO DO: Determine what to show based on the testType dropdown selected
var view = new google.visualization.DataView(data);
view.setColumns(['Test Cycle','Total' ]); //here you set the columns you want to display
//Visualization Go draw!
var chart = new google.visualization.LineChart(document.getElementById('testTypeChart'));
chart.draw(view, options);
};

This is due to a bug when using animations with a dataView (see this issue for more info regarding the bug). To solve this try loading the release candidate from google instead of the stablegoogle.load("visualization", "1", {packages:["corechart"]}); with google.load("visualization", "1.1", {packages:["corechart"]});.
Check here for more info about using release candidates.
I've got to little repuptation to post more than 2 links, so if you go to the google developers page (that you linked to) and then navigate to "Google Chart News" and scroll to the bottom-ish you can find more info about this.
I also tried it in a fiddle and it works like a charm.Hope it helped!Henrik

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
}
}