Databases
StackOverflow2013
Postsdbo
POGoogle Pie Chart does not display properly the slices
Body
 

Note that there are some explanatory texts on larger screens.

plurals
  1. POGoogle Pie Chart does not display properly the slices
    text
    copied!<p>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):</p> <p><img src="https://i.stack.imgur.com/saBfx.jpg" alt="Google Visualization API - Pie Chart Visualization Problem"></p> <p>Here some code:</p> <pre><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); </code></pre> <p>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?</p> <p><strong>SOLVED!!:</strong></p> <p>Do not ask me why but if i put the data in the following way (using the javascript <code>Number()</code> function) it works:</p> <pre><code> var data2 = google.visualization.arrayToDataTable([ ['Tipo', 'Valore'], ['Aperte', Number(unique_opened)], ['Non aperte', Number(combined1)] ]); </code></pre>
 

Querying!

 
Guidance
An individual column

Larger individual text columns get their own page to allow for proper reading.

SQuiL has stopped working due to an internal error.

If you are curious you may find further information in the browser console, which is accessible through the devtools (F12).

Reload