使用php变量用ajax更新jqplot

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.

我认为以下问题(带有动态ajax数据的JQPlot自动刷新图表)接近我想要实现的目标。问题是我对js的了解非常有限,所以我觉得很难理解。

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).

情况是这样的:我绘制了一个使用json文件生成的jqplot图。我想更新图表而不必刷新页面。为了正确绘制图形,我在javascript中使用php确定了一些参数(例如xaxis和yaxis的最大和最小限制)。

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

我的(简化)js绘制图形看起来像这样:

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?

考虑到我还需要运行一些php来使用php确定我的json数据,我怎么能够在页面刷新时重新渲染图形?

thanks!

2 个解决方案

#1

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

它非常简单,动态刷新从ajax调用返回的数据。

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.

因此,首先您需要使用AJAX调用,该调用将以所需格式返回图表所需的数据。

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.

接下来,一旦从AJAX请求返回数据,您必须首先使用jQuery清空div,如$('#chartdiv')。empty();然后只需重新运行代码即可使用新数据重新绘制图形。

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.

此外,由于您想要使用以前用于绘制图表的数据,您可以简单地将相同的json数据存储在javascript变量中,然后根据从ajax请求接收的数据相应地修改相同的变量。

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

您还可以使用plot.destroy()等jqgrid函数; plot.replot();

#2

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
                    }
                }
            });
        }

#1