CODEWITHSUNDEEP
javascriptjsonchartsgoogle-visualizationpie-chart
Gregory Bologna
Gregory Bologna

Reputation: 276

Slices in pie chart stay the same size when data changes (version=current as of this post)

I have a pie chart that is loaded using the Google JSON schema for charts. The JSON data is created using ajax. All the Google charts work as designed except for one issue with the pie chart.

Example Pie chart data.

Assume that when the pie chart first loads there are four data elements with values that make up four slices in the pie chart:

A = 410
B = 420
C = 900
D = 540

410 + 420 + 900 + 540 = 2270

410/2270 = 0.1806167400881057 =  65.02°
420/2270 = 0.1850220264317181 =  66.61°
900/2270 = 0.3964757709251101 =  142.73°
540/2270 = 0.2378854625550661 =  85.64°

The first time the pie chart is loaded, slice percents and labels with the amounts look fine.

The problem is when the Pie chart data changes. None of the Pie slices change size. The slice data labels change, but the slice degrees do not:

Example updated data

If data changed From: 410 + 420 + 900 + 540 = 2270 To: 410 + 420 + 9 + 540 = 1379

410/1379 = 0.2973168963016679 = 107.03°
420/1379 = 0.3045685279187817 = 109.65°
  9/1379 = 0.0065264684554025 = 2.35°
540/1379 = 0.3915881073241479 = 140.97°

So, if the value of "C" changes from 900 to 9, the degree of change is not reflected in slice "C" (and slices A, B, and D) even though there is a considerable percentage difference. I have included an image of this scenario, however, with different data.

The only time the pie slice sizes change is when the slice is clicked to drill down, but there it's the same formatted json file, just different values. I have compared the json data both on load and after the data has changed and find no reason why the pie chart slice sizes should not also change. The only thing I can deduce is I'm doing something wrong with the json or drawing the chart, or the SVG is cached, or the pie chart does not update slice size.

json data

{ "cols":[{"id":"","label":"Title","pattern":"","type":"string"},{"id":"","label":"Dollars","pattern":"","type":"number"},{"id":"","label":"","pattern":"","type":"string","p":{"role":"style"}}],
  "rows":[{"c":[{"v":"A","f":"label a"},{"v":410.0,"f":"$410.00"},{"v":"fill-color: #00805D","f":null}]},
          {"c":[{"v":"B","f":"label b"},{"v":420.0,"f":"$420.00"},{"v":"fill-color: #00805D","f":null}]},
          {"c":[{"v":"C","f":"label c"},{"v":900.00,"f":"$900.00"},{"v":"fill-color: #78EAD3","f":null}]},
          {"c":[{"v":"D","f":"label d"},{"v":540.00,"f":"$540.00"},{"v":"fill-color: #F88451","f":null}]}]}

code to load the chart

<div id="chart_div"></div>

function drawPieChart(data) {

    $('#chart_div').empty();
    $('#chart_div').css('cursor','default')

    var options = chartOptions();

    var v_savings_suffix="";
    if(paoDetails.chart.mode.state === "sav") {
        v_savings_suffix = " (Savings)";
    }

    var _options = {
        title: v_chart_title + ' ' + v_savings_suffix
    }
    Object.assign( options, _options );

    var wrapper = new google.visualization.ChartWrapper({
        chartType: 'PieChart',
        dataTable: data,
        options: options,
        containerId: 'chart_div'
    });

    // Must wait for the ready event in order to
    // request the chart and subscribe to 'onmouseover'.
    google.visualization.events.addListener(wrapper, 'ready', onReady);

    function onReady() {
        google.visualization.events.addOneTimeListener(wrapper.getChart(), 'select', selectHandler);
        }
        wrapper.draw();

    function selectHandler() {

        var options=null;
        var selectedSlice = wrapper.getChart().getSelection()[0];
        if (selectedSlice) {    

            // get fund code from selected slice
            var fundCode = wrapper.getDataTable().getValue(selectedSlice.row, 0);
                if(fundCode !== "NAV") {
                options = wrapper.getOptions();
                if(options.slices) {
                    paoDetails.chart.mode.breakdown.fundKey = fundCode;                     
                    var slice = options.slices;
                    var keys = Object.keys(slice).map(Number);
                    if(keys) {      
                        paoDetails.chart.mode.breakdown.show = !paoDetails.chart.mode.breakdown.show;
                        paoDetails.chart.mode.funds = !paoDetails.chart.mode.funds;
                        recalcExemp();
                    }
                    wrapper.setOptions(options);
                    wrapper.draw();          
                }
            }
        }
    }
} // end drawPieChart

Upvotes: 0

Views: 603

Answers (1)

Gregory Bologna
Gregory Bologna

Reputation: 276

The root pie slice issue is not resolved. This may be not a Google pie chart bug entirely, but after playing with the data I can only conclude that the pie chart needs to be refreshed somehow. I will look at the options to clear percentages in my pie chart with each data update. Perhaps if I call my data load 2x, setting the percentages to 0 on the first call and loading data on the second. Ugly but may get me off this issue. Help is appreciated.

I noticed that the pie slice percentages do not change at all when the pie data changes.

Pie chart percentages at different values

The pie slice percentage for the green slice changed only when I changed the value of the variable while at a debugging breakpoint. I think the issue is that the pie chart percentages are not updating even though the total value of the data has changed.

To note: The chart container is within bootstrap col. The chart JavaScript Literal data is returned from PHP.

Upvotes: 0

Related Questions