Develop Reference

Customize Google Visualization: GeoChart data color

I'm trying to compare two WordPress themes using the Google geo chart. But not getting desired color output
google.charts.load('current', {
'packages':['geochart'],
'mapsApiKey': 'AIzaSyD-9tSrke72PouQMnMX-a7eZSW0jkFMBWY'
});
google.charts.setOnLoadCallback(drawRegionsMap);
function drawRegionsMap() {
var data = google.visualization.arrayToDataTable(
[["Country","Automotive Theme","Car Dealer Theme"],
["IN",1,1],
["US",1,1],
["PL",0,0],
["BD",0,0],
["ID",0,1],
["ES",1,3],
["CA",1,1],
["NL",0,0]]
);
var options = {
colors: ["#000", "#858585"],
legend: 'none',
};
var chart = new google.visualization.GeoChart(document.getElementById('regions_div'));
chart.draw(data, options);
}
In "Es"(Spain) the Car Dealer Theme has more points so the color of Spain is "#858585" but in "ID"(Indonesia) also Car Dealer Theme has more points but "ID" is of "#000" color why?

How can a google-chart be created within a new element I've just appended using jQuery?

For context, I'm trying to build a page that displays a google chart for all active sports games that day. A data feed will inform how many there are (in my below example, 3 games going on.) From there, I would like to loop through the set of games, create a div for each one using jQuery, and then place a google chart into each div. Here's what I wrote:
This would come from a data feed:
var activeGames = 3;
Cycle through active games, build a chart for each one
for (i = 0; i < activeGames; i++){
$('.chartContainer').append("<div id='game'></div>");
google.charts.load('current', {packages: ['corechart', 'line']});
google.charts.setOnLoadCallback(drawChart);
function drawChart() {
var data = new google.visualization.DataTable();
data.addColumn('number', 'Team A');
data.addColumn('number', 'Team B');
data.addRows([1,1]);
//chart data redacted, would come from data feed
var options = {
//chart options redacted, irrelevant
};
var chart = new google.visualization.LineChart(document.getElementById('game'));
chart.draw(data, options);
}
Relevant basics:
linked to jQuery in HTML appropriately
My HTML file is basically just a div for the chartContainer class
The chart displays fine if I create div id='g1' in an html file, but for some reason no charts display when the div is created by jquery, even though the divs DO get created.
Any help is appreciated.
UPDATE: Here's what worked:
Load google charts package
google.charts.load('current', {packages: ['corechart', 'line']});
google.charts.setOnLoadCallback(drawChart);
Call Function, the for loop goes within:
function drawChart() {
var activeGames = 3;
for (i = 0; i < activeGames; i++){
$('.container').append("<div id='g" + i + "'></div>");
var data = new google.visualization.DataTable();
data.addColumn('number', 'Team A');
data.addColumn('number', 'Time');
data.addRows([1,1]]); //redacted the rest
var options = {};//redacted
var chart = new google.visualization.LineChart(document.getElementById('g'+ i));
chart.draw(data, options);
};
};

load google first, wait for the callback, then draw the charts...
google.charts.load only needs to be called once per page load
no need to load for each chart
since you're creating a new <div> for each chart,
create the div and pass it to the chart's constructor
no need to assign an id, which would need to be unique anyway
see following working snippet...
google.charts.load('current', {
callback: drawCharts,
packages: ['corechart']
});
function drawCharts() {
var activeGames = 3;
for (i = 0; i < activeGames; i++){
var data = new google.visualization.DataTable();
data.addColumn('number', 'Team A');
data.addColumn('number', 'Team B');
data.addRow([1,1]);
var options = {
};
var container = document.createElement('div');
$('.chartContainer').append(container);
var chart = new google.visualization.LineChart(container);
chart.draw(data, options);
}
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script src="https://www.gstatic.com/charts/loader.js"></script>
<div class="chartContainer"></div>

Part of the issue is that the id should be unique to the page. So when creating the div, you should make it unique:
$('.chartContainer').append("<div id='game" + i + "'></div>");
Then, when selecting the div, select the correct div:
var chart = new google.visualization.LineChart(document.getElementById('game' + i));

how to change the text 'no data' in google pie chart

if i am passing empty data for chart binding it shows 'no data' i need to change the text 'no data' to some other word.
google.load("visualization", "1", {packages:["corechart"]});
google.setOnLoadCallback(drawChart);
function drawChart() {
var data = google.visualization.arrayToDataTable([
['Task', 'Hours per Day']
]);
var options = {
title: 'My Daily Activities'
};
var chart = new google.visualization.PieChart(document.getElementById('piechart'));
chart.draw(data, options);
}

You can do it manually:
if(data.getNumberOfRows() == 0){
$("#piechart").append("Sorry, not info available")
}else{
var chart = new google.visualization.PieChart(document.getElementById('piechart'));
chart.draw(data, options);
}

As juvian said data.getNuberOfRows() is in the plugin, so if you are good with jquery you can even replace " $("#piechart").append("Sorry, not info available")" with an image for example
if (data.getNumberOfRows() == 0) {
$("#someimage").attr("src","url-to-image");//Or any jquery dom manipulation here
} else {
var chart = new
google.visualization.PieChart(document.getElementById('piechart'));
chart.draw(data, options);
}

You could replace text in SVG after chart drawing
chart.draw(data, options);
if (data.getNumberOfRows() == 0) {
$("#piechart").find("svg text").text("Your text")
}

I found a solution on newbedev.com and here is how I had to modify it.
var data = [ [ 'Label', 'Count' ] ];
var options = { sliceVisibilityThreshold: 0 };
// add your data to the array.
if (data.length == 1) {
data.push(['', 0]);
options.sliceVisibilityThreshold = 0.01;
}
var chartData = google.visualization.arrayToDataTable(this.data);
var chart = new google.visualization.PieChart(document.getElementById('piechart'));
chart.draw(chartData, options);
The sliceVisibilityThreshold determines when a slice will be visible on its own within the chart. If it is set to zero, then all slices show. Ensuring the threshold is greater than zero and having at least one entry set to zero is the key. The single slice will not be visible, the legend will not display, and the "No data" message is gone.

how to add links to google pie chart slices

This is the code I've been working, I need to redirect to another page by clicking the slices.
<script type='text/javascript' src='https://www.google.com/jsapi'></script>
<script type='text/javascript'>
// Load the Visualization API and the piechart package.
google.load('visualization', '1.0', {'packages':['corechart']});
// Set a callback to run when the Google Visualization API is loaded.
google.setOnLoadCallback(drawChart);
// Callback that creates and populates a data table,
// instantiates the pie chart, passes in the data and
// draws it.
function drawChart() {
// Create the data table.
var data = new google.visualization.DataTable();
data.addColumn('string', 'Topping');
data.addColumn('number', 'Slices');
data.addRows([
['Cleaning Completed', $co1],
['Denied At Client Place', $co2],
['Denied', $co3],
['Postponed', $co4],
['Careless Driver', $co5],
['Cleaning Started', $co6],
['Emptyspace', $co22],
['Assigned to Vehicle', $co23],
['Select', $co24],
['Call Not Picked', $co25],
['Asked to Call Back', $co26],
]);
// Instantiate and draw our chart, passing in some options.
var chart = new google.visualization.PieChart(document.getElementById('chart_div'));
chart.draw(data, options);
}
</script>

I believe Google visualization allows you to set a click handler. So in your drawChart function, add this. (AFTER chart.draw)
google.visualization.events.addListener(chart, 'select', function() {
var selection = chart.getSelection();
console.log(selection);
});
See what "selection" has in it and see if that has enough information to set where the browser should redirect to.
More info: https://developers.google.com/chart/interactive/docs/reference#addlistener

Google Visualization Animation when chart loads for the first time

I would like to know if I can apply an animation to the charts on the first time it draws?
And not only when a change of data happens?
THanks!

UPDATED ANSWER
Google has updated chart options and added the option to animate the chart on the first time it draws.
So the only thing you have to do is psecify it in the options like that:
var options = {
animation: {
duration: 1500,
startup: true //This is the new option
}
};
So you dont have to load an empty chart on the beggining or to do any other hack.
DEMO

The Chart should be rendered before you can apply your animation which is showing transition from one state to another. You can either change the data or change the chart options to create the transition and its animation.
To be able to show animation on the first time, you can simply create an empty (no data) chart, and then add your data to the chart, to show the data animation.
var options = {
animation:{
duration: 1000,
easing: 'out',
}
};
var data = new google.visualization.DataTable();
data.addColumn('string', 'N');
data.addColumn('number', 'Value');
var chart = new google.visualization.ColumnChart...
chart.draw(data, options);
// Adding data
data.addRow(['V', 200]);

Try something like this http://jsfiddle.net/h7mSQ/163/. The way to do this is to render chart with zero values and then set values as required and draw chart again. Don't forget to set minimal and maximal value for (in this example) vertical axis.
function drawChart() {
var option = {title:"Yearly Coffee Consumption in our company",
width:600, height:400,
animation: {duration: 1000, easing: 'out',},
vAxis: {title: "Cups of coffee", minValue:0, maxValue:500},
hAxis: {title: "Year"}};
var data = new google.visualization.DataTable();
data.addColumn('string', 'N');
data.addColumn('number', 'Value');
data.addRow(['2003', 0]);
data.addRow(['2004', 0]);
data.addRow(['2005', 0]);
// Create and draw the visualization.
var chart = new google.visualization.ColumnChart(document.getElementById('chart'));
chart.draw(data, option);
data.setValue(0, 1, 400);
data.setValue(1, 1, 300);
data.setValue(2, 1, 400);
chart.draw(data, option);
}
google.load("visualization", "1", {packages:["corechart"]});
google.setOnLoadCallback(drawChart);