Updating jqplot Pie Chart via JS not working

Question

I am trying to update jqplot PieChart via JS since yesterday and I am not having any breakthrough with this. I have searched online and cant seem to get any solution work

The chart data is saved in session and this session is continuously being updated by the application.

This is what the JSON looks like

[ ['Take home pay', 44228.33], ['Tax', 8771.67], ['Super', 4162.5 ], ['Regular expenses', 0 ], ['Unallocated', 44228.33], ['Testing', 8000] ]

The chart loads fine when the user navigates to the page for the first time.

This is the DIV where the chart loads

<div id="savings_expense" class="jqplot-target"></div>

This is the jqplot JS when the page loads which works fine

$(document).ready(function () {

    var storedData = <?php echo $_SESSION['chart_data'] ?>;

    var plot1;
    jQuery.jqplot.config.enablePlugins = false;
    plot1 = jQuery.jqplot('savings_expense', [storedData],
        {
            seriesDefaults: {
                renderer: jQuery.jqplot.PieRenderer

            },
            legend: {
                show: true,
                rendererOptions: {
                    numberRows: 6
                },
                placement: 'outside',
                location: 's',
                marginTop: '15px'
            }
        }
    );
});

This is the button that user clicks to update the chart.

<li onclick="updateGraph()"><a href="#pay">YOUR TAKE-HOME PAY</a></li>

I have tried two ways to update the PieChart

Solution 1 In this solution I get the error Uncaught TypeError: Cannot read property 'replot' of undefined.

    var storedData = <?php echo $_SESSION['chart_data'] ?>;
    var plot1;
    function renderGraph() {  
        plot1.replot({
            seriesDefaults: {
                renderer: jQuery.jqplot.PieRenderer
            },
            legend: {
                show: true,
                rendererOptions: {
                    numberRows: 6
                },
                placement: 'outside',
                location: 's',
                marginTop: '15px'
            }
        });
    }

    function updateGraph() {
        alert('updateGraph');
        var newVal = <?php echo $_SESSION['chart_data'] ?>;
        storedData.push(newVal);
        renderGraph();
    }

Solution 2 In this solution the pie chart goes blank but the legends stay

var storedData = <?php echo $_SESSION['SMP']['chart_data'] ?>;
var plot1;
function renderGraph() {
    if ( plot1) {
        plot1.destroy();
    }

    jQuery.jqplot.config.enablePlugins = false;
    plot1 = jQuery.jqplot('savings_expense',[storedData],
        {
            seriesDefaults: {
                renderer: jQuery.jqplot.PieRenderer

            },
            legend: {
                show: true,
                rendererOptions: {
                    numberRows: 6
                },
                placement: 'outside',
                location: 's',
                marginTop: '15px'
            }
        }
    );
}

I will really appreciate any help here. Please do not share any links as I have gone through about every solution I could find on StackOverflow and on net

Bhushan Kawadkar Bhushan Kawadkar · Accepted Answer · 2014-06-20T10:54:49

You have to keep on document.ready code as it is and then add function updateGraph outside document.ready (keep all variable at global level). Also modify updateGraph, here you need to call .replot() on plot1 variable as you are only changing data and not other setting.

put id to li like this : <li id="updateGraph"><a href="#pay">YOUR TAKE-HOME PAY</a></li>

See below code :

// declare variable outside document.ready
var plot1;
var storedData; 

$(document).ready(function () {

    storedData = <?php echo $_SESSION['chart_data'] ?>;


    jQuery.jqplot.config.enablePlugins = false;
    plot1 = jQuery.jqplot('savings_expense', [storedData],
        {
            seriesDefaults: {
                renderer: jQuery.jqplot.PieRenderer

            },
            legend: {
                show: true,
                rendererOptions: {
                    numberRows: 6
                },
                placement: 'outside',
                location: 's',
                marginTop: '15px'
            }
        }
    );

    $('#updateGraph').click(function(){updateGraph();});
});

function updateGraph() {
     var newVal = <?php echo $_SESSION['chart_data'] ?>;
    plot1.destroy();
    plot1.series[0].data = newVal;
    plot1.replot(true);
}

Updating jqplot Pie Chart via JS not working

1 Answers