updating jqplot with ajax using php variables

Question

I think the following question (JQPlot auto refresh chart with dynamic ajax data) comes close to what I would like to achieve. Problem is that my knowledge of js is very limited so I find it very hard to understand.

The situation is like this: I plot a jqplot graph that is generated using a json file. I would like to update the graph without having to refresh the page. In order to plot the graph right I determin some parameters using php inside the javascript (such as the max and min limits for the xaxis and yaxis).

my (simplified) js to plot the graph looks like this:

var plot = $.jqplot('chartdiv',  [<?php echo $alllines;?>] ,   
    {
        seriesColors: ["#FAB534", "#9495E0", "#75E07E", "#F558F5", "#00EEFF", "#F558F5"],

        axes:{
            xaxis:{
                renderer:$.jqplot.DateAxisRenderer,
                tickInterval: '1 minute',                   
                min:'<?php echo $startlimit ?>',
                max:'<?php echo $endlimit ?>'
            },

            yaxis:{
                tickInterval: 10,
                min: <?php echo $ymin; ?>,
                max: <?php echo $ymax; ?>,
            },
        },

    });

how would I be able to rerender the graph wihtout a page refresh, considering that I also need to run some php to determin my json data using php?

thanks!

So the question you posted is the same as yours but you don't understand the solution? Sorry, but this is not a case for a new StackOverflow question, I'd rather suggest you learn more JS — kero, Oct 14 '14 at 13:44
It's not the same question. The other question doesn't include any php. I'm struggling to get the php variables into my js code. — Roddeh, Oct 14 '14 at 13:50
Well, codewise it doesn't matter if you `$.post` to a HTML or to a PHP to get the updated data — kero, Oct 14 '14 at 13:52

score 0 · Answer 1 · answered Oct 23 '14 at 02:04

Its pretty simple dynamically refreshing the data returned from an ajax call.

So, first of all you would need to use an AJAX call that will return you the data required by the chart in the desired format.

Next, once the data has been returned from the AJAX request, you have to simply first empty the div using jQuery like $('#chartdiv').empty(); and then simply rerun your code to replot the graph using the new data.

Also, as you want to make use of the previous data used for drawing the chart, you can simply store the same json data in a javascript variable and then modify the same variable accordingly based on the data received from the ajax request.

You can also, make use of the jqgrid functions like plot.destroy(); plot.replot();

thanks. The problem is that I don't know how to store the array into a ajax format so that I can call it when needed. I thought of running a file that echo's the array that I need and call this file with an ajax call, but I don't know how to call it in the code that generates the chart. — Roddeh, Oct 23 '14 at 11:13

score 0 · Answer 2 · answered Mar 02 '16 at 14:33

I had the same problem and i have found a solution for this. See the example code

maybe someone needs this code to solve a similar problem

        $("#BUTTON").on("click", function(){
            doUpdate();
        });     


        var storedData = [0];
        var quarterPlot;


        /* 
         * update function to update the storedData array for the new plot
         */
        function doUpdate() {

            var request = $.ajax({
                url: "ajax_requests.php",
                method: "POST",
                data: { 
                    x: "asdf",
                    y: "asdf",
                },
                dataType: "json",
                cache: false
            }).done(function( data ) {

                storedData = data;  //storageData reinitialize
                renderGraph();  // re-render the plot
            })
            .fail(function() {
                alert( "error" );
            }); 
        }



        //   render/plot function  storedData array updated with ajax requests  
        function renderGraph() {    
            if (quarterPlot) {
                quarterPlot.destroy();
            }
            quarterPlot = $.jqplot('IDELEMENT', [storedData], {
                title:'TITLE',
                seriesDefaults:{
                    renderer:$.jqplot.BarRenderer,
                     rendererOptions: {
                        varyBarColor: true,
                    },
                    pointLabels: { show: true,
                        ypadding: 5
                    }
                },
                axes:{
                    xaxis:{
                        renderer: $.jqplot.CategoryAxisRenderer
                    }
                }
            });
        }

updating jqplot with ajax using php variables

2 Answers2