I am using a GEO chart from the google API.
I needed to know if the colour of the country boundaries can be changed or not?, which might help me distinguish the countries better depending on the fill colour i selected for the graph.
there are no config options for changing the border color,
but you can change manually, on the chart's 'ready' event.
each country will be drawn with a <path> element.
each <path> element will have a stroke attribute,
which is the border color.
var countries = container.getElementsByTagName('path');
Array.prototype.forEach.call(countries, function(path) {
path.setAttribute('stroke', 'red');
});
see following working snippet...
google.charts.load('current', {
packages: ['geochart'],
mapsApiKey: 'AIzaSyD-9tSrke72PouQMnMX-a7eZSW0jkFMBWY'
}).then(function () {
var data = google.visualization.arrayToDataTable([
['Country', 'Popularity'],
['Germany', 200],
['United States', 300],
['Brazil', 400],
['Canada', 500],
['France', 600],
['RU', 700]
]);
var container = document.getElementById('chart_div');
var chart = new google.visualization.GeoChart(container);
google.visualization.events.addListener(chart, 'ready', function () {
var countries = container.getElementsByTagName('path');
Array.prototype.forEach.call(countries, function(path) {
path.setAttribute('stroke', 'red');
});
});
chart.draw(data, {
legend: 'none'
});
});
<script src="https://www.gstatic.com/charts/loader.js"></script>
<div id="chart_div"></div>
Related
Anybody help me to create a multi ring donut chart using google chart ?
https://developers.google.com/chart/interactive/docs/gallery/piechart#donut
I need like following image with multilevel colors.
This was possible with the Google Image Charts API, which has been deprecated in 2012. It seems to still be up and running, it's just not maintained anymore.
With that API, it was (and still is) possible to create concentric pie charts such as the one below
http://chart.apis.google.com/chart?chd=s:Yr3,ff9&cht=pc&chs=300x200&chxr=0,20,45|1,25,50
which yields the following pie chart
Also you can play with the API and easily create your own pie charts here:
http://www.jonwinstanley.com/charts/
Supporting this kind of concentric Pie chart in the new Google Charts API is still an open issue
I know it's has been a long time ago but here's one way you can do this, using google charts:
But, I removed the subtitles because they interfere in the position of objects, i think it's easier and better if we do our subtitles . Then i just made some drawings e maths to achieve this.
You can control the size and pieHole with 3 variables.
If you need more rings you need to replicate the logic of the first pie hole, but your code will grow kkkk.
google.charts.load('current', {'packages':['corechart']});
google.charts.setOnLoadCallback(drawChart);
function drawChart() {
//control is here
let larguraGraficoFora = 400;
let alturaGraficoFora = 400;
let furoGraficoFora = 0.8;
var data = google.visualization.arrayToDataTable([
['Sabor de Pizza', 'Quantidade'],
['portuguesa', 30],
['frango com catupiry', 30],
['calabresa', 30],
['alguma doce', 30],
]);
var options = {
width: larguraGraficoFora,
height: alturaGraficoFora,
chartArea:{left:0,top:0,width:'100%',height:'100%'},
pieHole: furoGraficoFora,
legend: 'none'
};
var chart = new google.visualization.PieChart(document.getElementById('donut_1'));
chart.draw(data, options);
var data2 = google.visualization.arrayToDataTable([
['Effort', 'Amount given'],
['c#', 30],
['python', 30],
['javascript', 30],
['sql server', 30],
['php', 30],
]);
var options2 = {
legend:'none',
width: larguraGraficoFora*furoGraficoFora,
height: alturaGraficoFora*furoGraficoFora,
chartArea:{left:0,top:0,width:'100%',height:'100%'},
backgroundColor: 'transparent',
legend: 'none'
};
var chart2 = new google.visualization.PieChart(document.getElementById('donut_2'));
chart2.draw(data2, options2);
ajustePosicaoPieCentral(larguraGraficoFora, alturaGraficoFora, furoGraficoFora);
}
function ajustePosicaoPieCentral(largura, altura, furo){
yt = altura*(1+furo)/2.0;
xt = largura*(1-furo)/2.0;
var css = document.getElementById('donut_2');
css.style.transform = "translate("+xt+"px, -"+yt+"px)";
}
<script type="text/javascript" src="https://www.gstatic.com/charts/loader.js"></script>
<div id="donut_1" ></div>
<div id="donut_2"></div>
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>
I am using the Google Charts and i need to update a map that is already instantiated as a map worth actually want when you click the refresh button the data inside of a map.
Today I am doing in the following way:
var dataGraf = google.visualization.arrayToDataTable(parsVal);
var chart = document.getElementById('curve_chart');
chart.draw(dataGraf);
But nothing happens. For i instantiate my map i used the following commands:
google.charts.load('current', {'packages':['corechart']});
google.charts.setOnLoadCallback(drawChart);
function drawChart() {
var data = google.visualization.arrayToDataTable(parsVal);
var options = {
title: 'Membros x Visitantes',
curveType: 'function',
legend: { position: 'bottom' }
};
var chart = new google.visualization.LineChart(document.getElementById('curve_chart'));
chart.draw(data, options);
}
How can i do to update, just when I click the button. Remembering that my 'ataGraf' has my array with the new values.
I did a JsFiddle to illustrate my problem.
first...
google.charts.load & setOnLoadCallback should only be called once per page load
you can also include the callback in the load statement
next, by saving a reference to the original chart, you can animate from one dataset to another
on the button click, create data and call draw
also recommend not adding event handlers directly in html tags
see following working snippet, the data is "swapped" on each button click...
google.charts.load('current', {
callback: function () {
// draw first chart
var data = google.visualization.arrayToDataTable([
['Data', 'Membros', 'Visitantes'],
['1', 4, 6],
['2', 5, 7]
]);
var options = {
animation: {
startup: true,
duration: 1200,
easing: 'linear'
},
title: 'Membros x Visitantes',
curveType: 'function',
legend: { position: 'bottom' }
};
var chart = new google.visualization.LineChart(document.getElementById('curve_chart'));
chart.draw(data, options);
// draw same chart with new data on button click
var newData = null;
document.getElementById('chart_button').addEventListener('click', drawNewChart, false);
function drawNewChart() {
// switch between newData and data on each click
if (newData === null) {
newData = google.visualization.arrayToDataTable([
['Data', 'Membros', 'Visitantes'],
['1', 9, 2],
['2', 1, 7]
]);
chart.draw(newData, options);
} else {
chart.draw(data, options);
newData = null;
}
}
},
packages: ['corechart']
});
<script src="https://www.gstatic.com/charts/loader.js"></script>
<button id="chart_button">Atualizar gráficos</button>
<div id="curve_chart"></div>
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 google code for pie char apt:
<script type="text/javascript">
google.setOnLoadCallback(drawChart);
function drawChart() {
var data = new google.visualization.DataTable();
data.addColumn('string', 'Topping');
data.addColumn('number', 'Slices');
data.addRows([
['Mushrooms', 3],
['Onions', 1],
['Olives', 1],
['Zucchini', 1],
['Pepperoni', 2]
]);
var options = {backgroundColor: '#676767',
'width':400,
'height':300};
var chart = new google.visualization.PieChart(document.getElementById('priority_customers_report'));
chart.draw(data, options);
}
</script>
Here the backgroundColor: '#676767' gives us the color now I want it to be transparent, how can I do that?
And how to set the text in bottom? As it's not clear in Google Documentation, really tough to understand.
This is related to the Simple Pie Chart of Google
The transparent background can be set with:
var options = {backgroundColor: 'transparent',
'width':400,
'height':300};
You can also set the title there:
var options = {backgroundColor: 'transparent',
'width':400,
'height':300,
'title' : 'My Chart'};
Edit:
To set the right hand items to show at the bottom use:
var options = {backgroundColor: 'transparent',
'width':400,
'height':300,
'title' : 'My Chart'
legend : { position : 'bottom' }
};
The list of possible options are here.
I got the answerbackgroundColor: '#676767' with backgroundColor: {fill: 'transparent'} and it will do the needful.
This will not work on IE as IE does not support Transparency, still we can add color of our choice by writing this code:-
With a bit of help from jQuery:
// check for IE
if ($.browser.msie) {
options2['backgroundColor'] = {fill: <color>};
}
else {
options2['backgroundColor'] = {fill: 'transparent'};
}
Still i am unable to set the position in bottom....
In IE, using jQuery, you can do the following to set the chart's background to transparent:
$('#vis iframe').attr('allowTransparency', 'true');
$('#vis iframe').contents().find('body').css('background', 'transparent');
where #vis is the id of the div where the chart is at.