Gino Cappelli
Gino Cappelli

Reputation: 55

Google Pie Chart does not display properly the slices

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

Upvotes: 1

Views: 2709

Answers (1)

Anto Jurković
Anto Jurković

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:

enter image description here

Idea of Javier González

Upvotes: 1

Related Questions