javascript - Updating jqplot Pie Chart via JS not working -

javascript - Updating jqplot Pie Chart via JS not working -

i trying update jqplot piechart via js since yesterday , not having breakthrough this. have searched online , cant seem solution work

the chart info saved in session , session continuously beingness updated application.

this 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 user navigates page first time.

this div chart loads

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

this jqplot js when page loads 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 button user clicks update chart.

<li onclick="updategraph()"><a href="#pay">your take-home pay</a></li>

i have tried 2 ways update piechart

solution 1 in solution 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 solution pie chart goes blank 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 appreciate help here. please not share links have gone through every solution find on stackoverflow , on net

you have maintain on document.ready code , add together function updategraph outside document.ready (keep variable @ global level). modify updategraph, here need phone call .replot() on plot1 variable changing info , not other setting.

put id li : <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); }

javascript jquery charts jqplot