I am facing some problem in displaying data in the pie chart.
I have created a jsfiddle to demonstrate my issue.
JSFIDDLE
I am providing the below data:
var data = google.visualization.arrayToDataTable([
['Year','Positive','Negative','Neutral','Comments','Score'],
[ '2010', 74, 26,49,'bad',12345],
[ '2011', 50, 50,13, 'good',78456],
[ '2012', 80, 20,56, 'good',56897],
[ '2013', 40, 60,26, 'good',25789],
[ '2014', 70, 30,60, 'bad',124536],
]);
Question 1
If you look at the jsfiddle, the combo chart (below pie chart) is perfectly displaying, but the pie chart is not displaying the values properly. So is it that the pie chart can display values only from 1 column ? Because even if i pass
'view': {'columns': [0,1,2,3]}
it still takes the value only from column 1.
Question2
From the dropdown, if i select a year, say 2011, still then the pie chart shows value only from column 1. But the combo chart acts fine.
Am i doing something wrong here ?
You're using view wrong. Here's a fiddle that does it:
http://jsfiddle.net/Xhdn3/
And the code:
var view = new google.visualization.DataView(data);
view.setColumns([0,2]);
var chart = new google.visualization.PieChart(document.getElementById('chart_div'));
chart.draw(view, options);
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>
SlantedText doesn't seem to work although the classic chart could do that. (This is the feature which rotates the labels on the horizontal axis a little, so they can fit onto the figure even when there are fairly enough columns). Is that something which is not implemented yet in the beta Material Charts, or am I doing something wrong?
<script type="text/javascript" src="https://www.google.com/jsapi?autoload={'modules':[{'name':'visualization','version':'1.1','packages':['bar']}]}"></script>
<div id="top_x_div" style="width: 500px; height: 400px;"></div>
google.setOnLoadCallback(drawStuff);
function drawStuff() {
var data = new google.visualization.arrayToDataTable([
['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 = {
title: 'Chess opening moves',
width: 500,
chart: { subtitle: 'popularity by percentage' },
hAxis: { slantedText: true },
"hAxis.slantedText": true
};
var chart = new google.charts.Bar(document.getElementById('top_x_div'));
// Convert the Classic options to Material options.
chart.draw(data, google.charts.Bar.convertOptions(options));
};
https://jsfiddle.net/csabatoth/cjs3atnp/3/
As you can see I tried multiple ways to set that flag. I just don't want to abandon the Material charts because they look nicer.
Classic charts working:
https://jsfiddle.net/csabatoth/cjs3atnp/4/
Most probably this is still not implemented. Material Charts are in beta. Trend lines are not functional either as of now.
I indicate Material vs Classic only features in my related GitHub repo: https://github.com/MrCsabaToth/GoogleChartsTalk
I'm using the Google Visualisation Material Chart...
https://google-developers.appspot.com/chart/interactive/docs/gallery/barchart#Material
....and in my example...
http://jsfiddle.net/ETFairfax/78595a3h/
...the Tooltips are rounding the bar values rather than just displaying the values as they are.
I've tried customising the tooltips as documented here : https://developers.google.com/chart/interactive/docs/customizing_tooltip_content#custom_html_content but still no joy.
The documentation does say...
"The Material Charts are in beta."
so maybe I'm fighting a lost cause.
My question:
Does anyone know how to stop the tooltips from rounding?
Any help appreciated.
HTML
<div id="chart_div" style="width: 900px; height: 500px;"></div>
JS Code:
google.load("visualization", "1.1", {
packages: ["bar"]
});
google.setOnLoadCallback(drawChart);
function drawChart() {
var data = google.visualization.arrayToDataTable([
['Task', 'Hours per Day'],
['Work', 8.5], // Tooltip says 8.5. CORRECT
['Eat', 11.5], // Tooltip says 12 - INCORRECT
['Commute', 2],// Tooltip says 2 - CORRECT
['Watch TV', 0.28],// Tooltip says 0.28 - CORRECT
['Sleep', 7.28] // Tooltip says 7.3 - INCORRECT
]);
var options = {
title: 'My Daily Activities'
};
var chart = new google.charts.Bar(document.getElementById('chart_div'));
chart.draw(data, google.charts.Bar.convertOptions(options));
}
You must specify a different format:
var options = {
title: 'My Daily Activities',
vAxis : {
format: 'decimal'
}
}
Answer can be found in this link:
here
I am drawing an stacked bar chart using google api, I want two hAxis for graph (top one in number format and down one in % format). I am using this code for rendering graph.
Can any one suggest how to add top hAxis as number?
function drawVisualization() {
// Create and populate the data table.
var data = google.visualization.arrayToDataTable([
['Year', 'Austria', 'Bulgaria', 'Denmark', 'Greece'],
['2003',1360,1001,1082,1974],
['2004',1556,1649,1150,1495]
]);
// Create and draw the visualization.
new google.visualization.BarChart(document.getElementById('visualization')).
draw(data,
{title:"Yearly Coffee Consumption by Country",
width:600, height:400,
vAxis: {title: "Year"},
isStacked:true,
hAxes:{0:{title:'Losses in percentage',format:'#,#%'},
1:{title:'Losses in number'}
},
series:{0:{targetAxisIndex:0},1:{targetAxisIndex:1}}
}
);
}
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.