Reputation: 55
As you can see in the following image I have many pie charts in my webpage and they do not fill completely the container (generally only an half is filled or LESS):
Here some code:
var data1 = google.visualization.arrayToDataTable([
['Tipo', 'Valore'],
['Recapitate', sent],
['Ritornate/Bloccate', errors]
]);
options1 = {
width: 250,
height: 250,
pieHole: 0.5,
colors: ['#06dd00','#e12a00'],
legend: {position: 'none'},
pieSliceText: 'none',
tooltip: {textStyle: {color: '#333', fontName: 'Arial', fontSize: 16}},
chartArea:{left: 0,top: 0,width: "100%",height: "100%"},
enableInteractivity: false/*,
animation: { duration: 1000, easing: 'out' }*/
};
chart1 = new google.visualization.PieChart(document.getElementById('grafico-inviate'));
chart1.draw(data1, options1);
var data2 = google.visualization.arrayToDataTable([
['Tipo', 'Valore'],
['Aperte', unique_opened],
['Non aperte', combined1]
]);
options2 = {
width: 250,
height: 250,
pieHole: 0.5,
colors: ['#3e9ca8','#ff5932'],
legend: {position: 'none'},
pieSliceText: 'none',
tooltip: {textStyle: {color: '#333', fontName: 'Arial', fontSize: 16}},
chartArea:{left: 0,top: 0,width: "100%",height: "100%"},
enableInteractivity: false/*,
animation: { duration: 1000, easing: 'out' }*/
};
chart2 = new google.visualization.PieChart(document.getElementById('grafico-aperte'));
chart2.draw(data2, options2);
The problem arises independently from the OS/Web-Browser. I do not know if this is a bug of the visualization API or am I missing something?
SOLVED!!:
Do not ask me why but if i put the data in the following way (using the javascript Number()
function) it works:
var data2 = google.visualization.arrayToDataTable([
['Tipo', 'Valore'],
['Aperte', Number(unique_opened)],
['Non aperte', Number(combined1)]
]);
Upvotes: 1
Views: 2709
Reputation: 11258
I do not know if this is your case but you can produce such semicircle in the following way. Your code little changed (only second part):
var unique_opened = 5.555; // real value: 11.11;
var combined1 = 44.445; // real value: 88.89;
var noshow = 50;
....
var data2 = google.visualization.arrayToDataTable([
['Tipo', 'Valore'],
['Aperte', unique_opened],
['Non aperte', combined1],
['noshow', noshow]
]);
options2 = {
width: 250,
height: 250,
pieHole: 0.5,
colors: ['#3e9ca8','#ff5932', '#ffffff'],
...
And you get:
Idea of Javier González
Upvotes: 1