I am using a set of data, the amount of CO2 output of the all the US states. So far I split all the states into their corresponding regions. What I am trying to do is; when someone clicks on a region, it would make a new pie chart of the corresponding states. So if click on the section of Northeast region, it would open up a new chart of PA, NY, NH, etc. I am not sure as to how to set up the code for an on click to open new chart. My ultimate goal is to just have it fade out and fade in the new chart. I am rather new to this so I am not too sure. Here is the code that I already have:
<html>
<head>
<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([
['Region', 'CO2 Output'],
['Northeast', 31887048.7],
['Midwest', 64278877.8],
['South', 76192034.1],
['West', 78808504.3],
]);
var options = {
title: 'Average Maximum Co2 Output of the US Regions'
};
var chart = new google.visualization.PieChart(document.getElementById('chart_div'));
chart.draw(data, options);
}
</script>
</head>
<body>
<div id="chart_div" style="width: 900px; height: 500px;"></div>
</body>
You can use interactivity as described here https://developers.google.com/chart/interactive/docs/basic_interactivity
See:
// The select handler. Call the chart's getSelection() method
function selectHandler() {
var selectedItem = chart.getSelection()[0];
if (selectedItem) {
var value = data.getValue(selectedItem.row, selectedItem.column);
alert('The user selected ' + value);
}
}
// Listen for the 'select' event, and call my function selectHandler() when
// the user selects something on the chart.
google.visualization.events.addListener(chart, 'select', selectHandler);
For fading out, you can just use jQuery $('#myChartDiv').fadeOut(); and then just fade in the next chart. You will have to pass a parameter to the second chart so that it knows which one to show.
Related
I have different countries which I get with json and add to google charts. Each country has a link to a specific site. It works for me. But the name of the tooltip/label is a link. How can I remove the link in the tooltip and add the name of the country?
And how can change the country border color to white?
thx in advance.
HTML
<div id="visualization"></div>
JavaScript
google.load('visualization', '1', {'packages': ['geochart']});
google.setOnLoadCallback(drawVisualization);
function drawVisualization() {
var data = new google.visualization.arrayToDataTable([
['Country','Link',],
['Canada','http://www.google.ca'],
['Russia','http://www.bbc.com'],
['Australia','http://www.nytimes.com'],
]);
var options = {
colorAxis: {colors: 'white'},
backgroundColor: '#81d4fa',
datalessRegionColor: '#f8bbd0',
defaultColor: 'black',
displayMode:'regions',
tooltip: {textStyle: {color: '#FF0000'}, trigger:'focus',isHtml: true},
legend:'none',
height:300,
width:400
};
var chart = new google.visualization.GeoChart(document.getElementById('visualization'));
google.visualization.events.addListener(chart, 'select', myClickHandler);
chart.draw(data, options);
function myClickHandler(){
var link = data.getValue(chart.getSelection()[0]['row'],1);
// Change the current site
location.href = link;
}
}
first, recommend not using jsapi to load the library
according to the release notes...
The version of Google Charts that remains available via the jsapi loader is no longer being updated consistently. Please use the new gstatic loader from now on.
<script src="https://www.gstatic.com/charts/loader.js"></script>
this will only change the load statement, to...
google.charts.load('current', {
callback: drawVisualization,
packages:['geochart']
});
(the callback can be added to the load statement as well)
next, according to the data format for regions mode,
the second column should be a number (not a string / link)
but since the link is needed for the click handler, use a DataView to hide the column from the chart
^ this will fix the tooltip -- adding the name of the country instead of the link
the number column drives the shading of the country, according to the colorAxis
if no number is provided, as in the question, then colorAxis will have no effect
last, there are no standard options to control the country border
see following working snippet...
google.charts.load('current', {
callback: drawVisualization,
packages:['geochart']
});
function drawVisualization() {
var data = google.visualization.arrayToDataTable([
['Country','Link',],
['Canada','http://www.google.ca'],
['Russia','http://www.bbc.com'],
['Australia','http://www.nytimes.com'],
]);
var view = new google.visualization.DataView(data);
view.hideColumns([1]);
var options = {
backgroundColor: '#81d4fa',
datalessRegionColor: '#f8bbd0',
defaultColor: 'black',
displayMode: 'regions',
tooltip: {textStyle: {color: '#FF0000'}, trigger:'focus',isHtml: true},
legend: 'none',
height:300,
width:400
};
var chart = new google.visualization.GeoChart(document.getElementById('visualization'));
google.visualization.events.addListener(chart, 'select', myClickHandler);
chart.draw(view, options);
function myClickHandler(){
var selection = chart.getSelection();
if (selection.length > 0) {
var link = data.getValue(selection[0].row, 1);
window.open(link, '_blank');
}
}
}
<script src="https://www.gstatic.com/charts/loader.js"></script>
<div id="visualization"></div>
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.
I am implementing Google Geo Map, what i am trying to do is that e.g if i click US on the map i would get name of the country as alert(e.g if i click US, i must get US as alert), which i can eventually use as a variable. When i try to loop over the selected Div i get
(Undefined) as alert
<html>
<head>
<script type='text/javascript' src='https://www.google.com/jsapi'></script>
<script type='text/javascript'>
google.load('visualization', '1', {'packages': ['geochart']});
google.setOnLoadCallback(drawRegionsMap);
function drawRegionsMap() {
var data = google.visualization.arrayToDataTable([
['Country', 'Popularity'],
['Germany', 200],
['United States', 300],
['Brazil', 400],
['Canada', 500],
['France', 600],
['RU', 700]
]);
var options = {};
var chart = new google.visualization.GeoChart(document.getElementById('chart_div'));
chart.draw(data, options);
};
</script>
</head>
<body>
<div id="chart_div" style="width: 900px; height: 500px;"></div>
</body>
</html>
i am trying to fetch elements with in chart_div element.
jQuery('#chart_div').on('click', function(){
jQuery(this).children().each(function () {
alert(this.value);
});
});
Don't use a jQuery event handler - the Visualization API has built-in event handling that will do this:
var chart = new google.visualization.GeoChart(document.getElementById('chart_div'));
google.visualization.events.addListener(chart, 'select', function () {
var selection = chart.getSelection();
if (selection.length) {
alert(data.getValue(selection[0].row, 0));
}
});
chart.draw(data, options);
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
This is not for the image charts. I have the following code that generates the right chart but the labels don't show. The chart div is in an other div that is used as a tab on my page. When I run the function when the tab containing the chart is not selected, the chart appears with no labels. When I run the function with the tab selected, the labels appear.
drawChart()
}
function drawChart() {
var data = new google.visualization.DataTable();
data.addColumn('string', 'Weeks');
data.addColumn('number', 'Indice');
data.addRows(arrIndice1);
var options = {
width:"900",
height:"500",
legend: "none",
title: 'Indice 1',
chartArea:{left:20,top:50,width:"85%",height:"75%"}
};
var chart = new google.visualization.LineChart(document.getElementById('chart_div'));
chart.draw(data, options);
}
chartArea options seem to cover the axis labels when they increase the chart size. Try removing the chartArea:{left:20,top:50,width:"85%",height:"75%"} part.