Develop Reference

Google Visualization Pie Chart text anchor issue and text cut off

I am using google pie charts, all is working fine but legend label on right side is cut off.
there is also no option in google API to control these labels. here is documentations
https://developers.google.com/chart/interactive/docs/gallery/piechart#configuration-options
for whiteHat
please see here are images..
1st with hide div
and a div not hide...

the legend would normally wrap, see following working snippet,
using the options shown in the attached image
google.charts.load('current', {
callback: function () {
var container = document.getElementById('chart_div');
var chart = new google.visualization.PieChart(container);
var data = google.visualization.arrayToDataTable([
['Education', 'People'],
['less than high school', 10],
['high school', 10],
['college associate', 10],
]);
var options = {
width: '470',
height: '450',
chartArea: {
width: '80%',
height: '80%',
left: 100,
},
pieSliceTextStyle: {
color: 'white',
fontSize: '17.5'
},
colors: ['#90c458', '#ff7f66', '#ffce55', '#52c2e8']
};
chart.draw(data, options);
},
packages: ['corechart']
});
<script src="https://www.gstatic.com/charts/loader.js"></script>
<div id="chart_div"></div>

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

Changing Google Stacked Bar Chart colors (Material Bar Chart)

var data = google.visualization.arrayToDataTable(stats_data);
var options = {
width: 1400,
height: 400,
legend: { position: 'top', maxLines: 3 },
bar: { groupWidth: '75%' },
isStacked: true,
bars: 'vertical',
colors:['#999','#346ac9', '#279423', '#fc9826'],
};
var chart = new google.charts.Bar(document.getElementById('chart-recent'));
chart.draw(data, google.charts.Bar.convertOptions(options));
I've got a stacked bar chart and I want each of the colors to be different (grey, blue, green, orange). However, the colors of the sections just take the first color (grey) in multiple brightnesses.
I also tried this in my options:
series: [
{color: '#999'},
{color: '#346ac9'},
{color: '#279423'},
{color: '#fc9826'}
]
How do I get each of the series to have a different color?

At the time of the original question, the Material Bar Chart probably did not yet support custom colors for stacked bar charts.
Today, the series configuration option as an array of color objects seems to work fine. See the colors variable in the example below.
Example code:
const data = [
['Sector', 'High', 'Medium', 'Low' ],
['Agriculture', 18, 9, 29],
['Education', 2, 14, 10],
['Healthcare', 4, 6, 41],
['Manufacturing', 36, 10, 3]
];
const colors = [
{ color: 'indianred' }, //high
{ color: 'khaki' }, //medium
{ color: 'seagreen' }, //low
];
const drawChart = () => {
const options = {
chart: { title: 'Risk by sector' },
legend: { position: 'top' }, //not yet supported
bars: 'horizontal',
stacked: true,
series: colors
};
const chartData = google.visualization.arrayToDataTable(data);
const elem = $('figure#health-chart')[0];
const chart = new google.charts.Bar(elem);
chart.draw(chartData, options);
};
google.charts.load('current', { packages: ['bar'] });
google.charts.setOnLoadCallback(drawChart);
Resulting chart:
Fiddle with the code:
https://jsfiddle.net/p8bnfe2h
Configuration options
series
An array of objects, each describing the format of the corresponding series in the chart. To use default values for a series, specify an empty object {}. If a series or a value is not specified, the global value will be used.
Documentation:
https://developers.google.com/chart/interactive/docs/gallery/barchart#configuration-options

I was able to get the colors working here
When generating the graph I had to use: new google.visualization.ColumnChart(...) instead of new google.charts.Bar(...) otherwise it would not stack properly.
You may also want to make sure you are using the latest version of Google Charts. In the fiddle above, I used samples from the developer docs which were using: https://www.google.com/jsapi to autoload all the things.

Google Charts backgroundColor not working with example code

I use code from example page to create horizontal bars chart:
Option backgroundColor work for other chart types, like this and that.
Is there are way to change background color for Bars charts?
google.load('visualization', '1.1', {packages:['bar']});
function drawVisualization() {
// Create and populate the data table.
var data = new google.visualization.arrayToDataTable([
['Opening Move', 'Percentage'],
["King's pawn (e4)", 44],
["Queen's pawn (d4)", 31],
["Knight to King 3 (Nf3)", 12],
["Queen's bishop pawn (c4)", 10],
['Other', 3]
]);
var options = {
backgroundColor: { fill: '#000' },//this is not working
title: 'Chess opening moves',
width: 900,
legend: { position: 'none' },
chart: { title: 'Chess opening moves',
subtitle: 'popularity by percentage' },
bars: 'horizontal', // Required for Material Bar Charts.
axes: {
x: {
0: { side: 'top', label: 'Percentage'} // Top x-axis.
}
},
bar: { groupWidth: "90%" },
};
var chart = new google.charts.Bar(document.getElementById('top_x_div'));
chart.draw(data, options);
}
google.setOnLoadCallback(drawVisualization);
<script src="http://www.google.com/jsapi?fake=.js"></script>
<div id="top_x_div"></div>
chart

You're using a Material Bar chart (See the relevant documentation here.)
See the comment at the end of the documentation paragraph :
The Material Charts are in beta. The appearance and interactivity are
largely final, but the way options are declared is not. If you are
converting a Classic Bar Chart to a Material Bar Chart, you'll want to
replace this line:
chart.draw(data, options);
...with this:
chart.draw(data, google.charts.Bar.convertOptions(options));
So if you want your standard options taken into account you need to wrap them with google.charts.Bar.convertOptions().
Have a try, it works great. See a jsfiddle of it here.

Show tooltip constantly with Google Pie Chart (quick javascript tweak)

I am interested in using a google pie chart and need it to display all the tooltips constantly. At the moment they come up individually on hover, just wondered if it's possible to do that by altering the js slightly?
Google says that you can use tooltip.trigger with either 'focus' which displays with hover or 'none' obviously to display nothing, but theres no function for show all
Heres the code:
<script type="text/javascript" src="https://www.google.com/jsapi"></script>
<script type="text/javascript">
google.load("visualization", "1", {packages:["corechart"]});
google.setOnLoadCallback(drawChart);
function drawChart() {
var data = google.visualization.arrayToDataTable([
['Task', 'Hours per Day'],
['Toe', 38],
['Jam', 22],
['Earl', 2]
]);
var options = {
legend: 'none',
lable: 'none',
is3D: true,
pieSliceText: 'none',
slices: [{offset:0.1}, {offset:0.1}, {offset:0.1},],
chartArea: {left:70,top:50,width:140,height:140},
colors: ['#99C9FF','#B7B7B7', '#CCC'],
pieSliceBorderColor: '#999',
};
var chart = new google.visualization.PieChart(document.getElementById('piechart_3d'));
chart.draw(data, options);
}
</script>

You can keep the tooltips constantly if you use the follwing option:
tooltip: { trigger: 'selection' }
But then you need to click the slice to get it initially.