I am currently experiencing an issue with a pie chart that is generated using the Google JSON schema for charts. The data for the chart is retrieved via ajax and loaded successfully, with all slices displaying correctly based on the initial values provided.
Sample Pie Chart Data
For instance, upon the initial load of the chart, there are four data elements that contribute to four distinct slices:
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°
However, the problem arises when the data for the pie chart is updated. Despite changes in the data values, the slice degrees remain constant, resulting in inaccurate visualization of the new data:
Updated Example Data
If the data transitions 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°
In this scenario, despite a significant percentage change in one of the data values (from 900 to 9), the corresponding slice fails to reflect the degree variation. This discrepancy persists even after comparing the json data before and after the update, suggesting no apparent reason for the lack of synchronization between the data and the visual representation of the slices on the pie chart.
The only time the segmentation sizes adjust is when expanding a particular slice for further details; however, even then, the underlying issue remains unsolved. I have meticulously reviewed both the json structure and the process of drawing the chart but have yet to identify the root cause of this anomaly.
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}]}]}
https://i.sstatic.net/u8mPP.png
<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