Google Pie Chart does not display properly the slices

Question

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):

Google Visualization API - Pie Chart Visualization Problem

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)]
        ]);

Can you show your complete file with hmml markup and styling? — Anto Jurković
Most probably you did not provide enough space for charts. With your code and defining missing variables I got both pie charts. — Anto Jurković
One question: In console, if you drill down your elements you will reach svg element for one of the pies. Each <svg>...</svg> pair is definition of one piechart. If you just cut&paste one svg markup to separte html page into body section, what you will get? Whole pie or half pie? — Anto Jurković
BTW: did you use pieStartAngle option for those two piecharts shown? — Anto Jurković
FYI, the conversion to a Number is necessary if your variables contain strings, as the Visualization API treats numbers and strings very differently (and produces some odd effects when you try to use strings for numbers, as you have seen with your PieCharts). — asgallant

Anto Jurković Anto Jurković · Accepted Answer · 2013-12-06T16:42:39

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:

enter image description here

Idea of Javier González

Google Pie Chart does not display properly the slices

1 Answers