CODEWITHSUNDEEP
javascriptjsonchartsgoogle-visualization
André Roggeri Campos
André Roggeri Campos

Reputation: 2766

Google Pie Chart generates blank chart

I'm using the following json to generate my PieChart, but it generates a blank chart with no error.

The following block is my code to generate the chart:

$.post('/admin/relatorios/getVendasCidadeChart', {
        dt_inicio: $("#datepicker-from").val(),
        dt_fim: $("#datepicker-to").val()
    }).done(function(donutData){
        var dados = new google.visualization.DataTable(donutData);
        var options = {
            title: "Vendas por Cidade",
            width: "100%",
            height: "100%",
        };
        var chart = new google.visualization.PieChart(document.getElementById('vendas-cidade'));
        chart.draw(dados, options);
    });

The json output by the post request:

{"cols":[{"id":"","label":"Loja","type":"string"},{"id":"","label":"Valor(R$)","type":"number"}],"rows":[{"c":[{"v":"Loja Shopping"},{"v":"8620.00"}]},{"c":[{"v":"Loja Centro"},{"v":"10240.00"}]}]}

Chart generated: https://i.sstatic.net/Dfhe4.png

Update 1

Fiddle reproducing the problem: https://jsfiddle.net/thatmesg/1/

Upvotes: 1

Views: 2020

Answers (2)

André Roggeri Campos
André Roggeri Campos

Reputation: 2766

The issue was with my values... The column "Valor" is defined as number, but the values was coming as strings with quotes...

Just removed the quotes from my JSON and it worked

{"cols":[{"id":"","label":"Loja","pattern":"","type":"string"},{"id":"","label":"Valor(R$)","pattern":"","type":"number"}],"rows":[{"c":[{"v":"Loja Shopping","f":null},{"v":8620.00,"f":null}]},{"c":[{"v":"Loja Centro","f":null},{"v":10240.00,"f":null}]}]}

Updated fiddle

Upvotes: 0

Matt Komarnicki
Matt Komarnicki

Reputation: 5422

I had similar "issue" but that wasn't an issue. All my pie slices were just returning 0 which may happen and it's logically correct.

Add sliceVisibilityThreshold: 0 to your options variable. It should display the legend even if there will be no data. If you'll see the legend then we can assume that Google Chart library works as expected. If not... then we'll investigate further.

var options = {
    legend: { position: 'top', maxLines: 6 },
    sliceVisibilityThreshold: 0
};

EDIT:

I see that you're using wrong type of brackets:

That's how your JSON should look like. If you generate it using PHP, don't forget to use json_encode.

var data = google.visualization.arrayToDataTable([["Category","Hours"],["Compliance \/ Policy ($0.00)",0],["Harrassment ($0.00)",0],["Productivity ($0.00)",0],["Skills Gap ($0.00)",0],["Values Behaviour ($0.00)",0]]);

Also I see that yous JSON contains "keys". You should do something like (remove keys and pass just values to the JSON):

$final['json'] = json_encode(array_values($pie_hours));

Upvotes: 2

Related Questions