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.
Related
I am having trouble getting the Google chart animations to work properly. I think the problem is that the chart keeps getting redrawn instead of just the data updated, but I'm not sure how to remedy this based on Google's example code and my limited knowledge of JavaScript. I do not want to include a button to update the chart as the chart will eventually update data dynamically from a data source. How do I update my chart to properly display the animations on data change?
Reference: https://developers.google.com/chart/interactive/docs/animation
<!DOCTYPE html>
<html>
<head>
<base target="_top">
<script src="https://www.gstatic.com/charts/loader.js"></script>
</head>
<body>
<div id="pizzaChart" style="overflow: hidden"></div>
<p id="logger"></p>
<script>
google.charts.load('current', {'packages':['corechart']});
google.charts.setOnLoadCallback(drawChart);
function drawChart() {
var mushroomData = Math.floor(Math.random() * 11);
document.getElementById("logger").innerHTML = mushroomData;
var data = new google.visualization.DataTable();
data.addColumn('string', 'Topping');
data.addColumn('number', 'Slices');
data.addRows([
['Mushrooms', mushroomData],
['Onions', 1],
['Olives', 1],
['Zucchini', 1],
['Pepperoni', 2]
]);
var options = {
title: 'How Much Pizza I Ate Last Night',
width: '100%',
animation: {duration: 1000, easing: 'out'}
};
var chart = new google.visualization.ColumnChart(document.getElementById('pizzaChart'));
chart.draw(data, options);
}
setInterval(drawChart, 1000);
</script>
</body>
</html>
in order to animate the chart from one dataset to the next,
you need to keep a reference to the same chart.
instead of creating a new chart each time it is drawn.
see following example...
google.charts.load('current', {'packages':['corechart']});
google.charts.setOnLoadCallback(initChart);
var chart;
function initChart() {
chart = new google.visualization.ColumnChart(document.getElementById('pizzaChart'));
drawChart();
}
function drawChart() {
var mushroomData = Math.floor(Math.random() * 11);
document.getElementById("logger").innerHTML = mushroomData;
var data = new google.visualization.DataTable();
data.addColumn('string', 'Topping');
data.addColumn('number', 'Slices');
data.addRows([
['Mushrooms', mushroomData],
['Onions', 1],
['Olives', 1],
['Zucchini', 1],
['Pepperoni', 2]
]);
var options = {
title: 'How Much Pizza I Ate Last Night',
width: '100%',
animation: {duration: 1000, easing: 'out'}
};
chart.draw(data, options);
}
setInterval(drawChart, 1000);
note: google pie charts do not animate
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>
How do I set chartArea opacity? Here is a piece of my code... any ideas would be helpful. Thanks!
// Column Chart
function drawVisualization() {
// Create and populate the data table.
var data = google.visualization.arrayToDataTable([
['Year', 'In Millions'],
['2010', 178.7],
['2011', 211.693],
['2012', 199.3]
]);
// Create and draw the visualization.
new google.visualization.ColumnChart(document.getElementById('visualization')).
draw(data,
{title:"",
width:400, height:400,
colors:['#89a7bf', '#b19237', '#698322', '#bf855d', '#196364', '#CCCCCC', '#D64646', '#8E468E'],
legend: {position: 'bottom', width:"250", textStyle: {fontSize: 10}},
hAxis: {title: "Year"}}
);
}
google.setOnLoadCallback(drawVisualization);
I'm sorry, the option areaOpacity is only available in the following charts:
Visualization: Geochart
Visualization: Area Chart
Visualization: Combo Chart
Visualization: Bubble Chart
Visualization: Motion Chart
Visualization: Stepped Area Chart
For the above charts, google says:
The default opacity of the colored area under an area chart series,
where 0.0 is fully transparent and 1.0 is fully opaque. To specify
opacity for an individual series, set the areaOpacity value in the
series property.
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);