I'm trying to display multiple google pie charts on the same page.

I get an Uncaught Error: Container is not defined error when doing so. How can I resolve this ?

My code :

function drawChart()
{
        var pleteness = $(this).attr('data-pleteness');

        var data = google.visualization.arrayToDataTable([
            ['Nom',    'Valeur'],
            ["Profil rempli à ", pleteness],
            ['Manque', 100 - pleteness]
        ]);

        var options = {
              ...
        };

        var chart = new google.visualization.PieChart(this);
        chart.draw(data, options);
}

$(function(){
    $('.piechart').each(function(){
        google.load('visualization', '1', {callback : drawChart, 'packages':['corechart']})
    });

});

Alternatively, if I iterate in the drawchart function, the output of the piechart gets really weird, it's not an arc anymore but about 5% of an arc (which does not happen if I do not set the pleteness dynamically) :

function drawChart(elem)
{
    $(elem).each(function(){
        {#var pleteness = {{ pleteness }};#}
        var pleteness = $(this).attr('data-pleteness');

        console.log(pleteness);

        var data = google.visualization.arrayToDataTable([
            ['Nom',    'Valeur'],
            ["Profil rempli à ", pleteness],
            ['Manque', 100 - pleteness]
        ]);

        var options = {
            backgroundColor: { fill:'transparent'},
            pieSliceBorderColor : 'transparent',
            pieHole: 0.8,
            legend: {position: 'top'},
            width: 220,
            height: 220,
            tooltip: {trigger: 'none'},
            pieStartAngle: -90,
            pieSliceTextStyle :{fontsize : 16, color: 'transparent'},
            slices: {
                0: { color: '#09b4ff'},
                1: { color: '#444'}
            },
            chartArea : {width: '90%', height: '90%'}
        };

        var chart = new google.visualization.PieChart(this);
        chart.draw(data, options);
    });
}

$(function(){
    google.load('visualization', '1', {callback : function(){drawChart('.piechart');}, 'packages':['corechart']})
});

I'm trying to display multiple google pie charts on the same page.

I get an Uncaught Error: Container is not defined error when doing so. How can I resolve this ?

My code :

function drawChart()
{
        var pleteness = $(this).attr('data-pleteness');

        var data = google.visualization.arrayToDataTable([
            ['Nom',    'Valeur'],
            ["Profil rempli à ", pleteness],
            ['Manque', 100 - pleteness]
        ]);

        var options = {
              ...
        };

        var chart = new google.visualization.PieChart(this);
        chart.draw(data, options);
}

$(function(){
    $('.piechart').each(function(){
        google.load('visualization', '1', {callback : drawChart, 'packages':['corechart']})
    });

});

Alternatively, if I iterate in the drawchart function, the output of the piechart gets really weird, it's not an arc anymore but about 5% of an arc (which does not happen if I do not set the pleteness dynamically) :

function drawChart(elem)
{
    $(elem).each(function(){
        {#var pleteness = {{ pleteness }};#}
        var pleteness = $(this).attr('data-pleteness');

        console.log(pleteness);

        var data = google.visualization.arrayToDataTable([
            ['Nom',    'Valeur'],
            ["Profil rempli à ", pleteness],
            ['Manque', 100 - pleteness]
        ]);

        var options = {
            backgroundColor: { fill:'transparent'},
            pieSliceBorderColor : 'transparent',
            pieHole: 0.8,
            legend: {position: 'top'},
            width: 220,
            height: 220,
            tooltip: {trigger: 'none'},
            pieStartAngle: -90,
            pieSliceTextStyle :{fontsize : 16, color: 'transparent'},
            slices: {
                0: { color: '#09b4ff'},
                1: { color: '#444'}
            },
            chartArea : {width: '90%', height: '90%'}
        };

        var chart = new google.visualization.PieChart(this);
        chart.draw(data, options);
    });
}

$(function(){
    google.load('visualization', '1', {callback : function(){drawChart('.piechart');}, 'packages':['corechart']})
});

• javascript
• jquery
• pie-chart
• google-pie-chart

Share Improve this question Follow edited Apr 20, 2015 at 13:45 Sebastian Bochan 37.6k33 gold badges5151 silver badges7575 bronze badges asked Apr 20, 2015 at 13:36 SébastienSébastien 5,4731212 gold badges6060 silver badges120120 bronze badges 1

• Post your HTML code, Which div you posting this graph? – Anto king Commented Apr 20, 2015 at 13:40

Add a ment  | 

2 Answers 2

Sorted by: Reset to default 2

You have to use the document get element id and post like below

var chart = new google.visualization.PieChart(document.getElementById('container'))

Make sure you have the same id (container) html div tag, otherwise this will lead error

The problem is the way you are calling var chart = new google.visualization.PieChart(this);

The issue is that you should be passing in an element on the page, but instead you are passing this which is likely simply window. If you have an element with an id of "container" that you wish to use, you can do this instead:

var chart = new google.visualization.PieChart(document.getElementById('container'));

You can check out an example here