How to refresh jqplot bar chart without redrawing the chart

问题:

I have a jqplot bar chart and I want the chart data to be changed when the user changes the value on a drop-down list. That works, but the problem is the bar chart redraws, one over another, each time the user changes the values.

How can I update or reload the bars without drawing the whole thing again? Is there any property value to be set?

Chart data changes according to an ajax call:

$.ajax({     url: '/Home/ChartData',     type: 'GET',     data: { Id: Id },     dataType: 'json',     success: function (data) {         $.jqplot('chartDiv', [a, b], CreateBarChartOptions(xAxis)); }});  function CreateBarChartOptions(xAxis) {     var optionsObj = {         title: 'Stat',         axes: {             xaxis: {                 renderer: $.jqplot.CategoryAxisRenderer,                 ticks: xAxis             },             yaxis: { min: 0 }         },         series: [{ label: 'A' }, { label: 'B'}],          seriesDefaults: {             shadow: true,             renderer: $.jqplot.BarRenderer,             rendererOptions: {                 barPadding: 8,                 barMargin: 10             }         },      };     return optionsObj; } 

A reply would be highly appreciated. Thanks.

回答1:

What you want to do is call jqPlot's .replot() method when you draw the new chart. Change your ajax call to look like this:

$.ajax({         url: '/Home/ChartData',         type: 'GET',         data: { Id: Id },         dataType: 'json',         success: function (data) {              $.jqplot('chartDiv', [a, b], CreateBarChartOptions(xAxis)).replot();         }}); 

回答2:

Try having your chart object as a global variable in your script as:

var plot1 = $.jqplot('chartDiv', [a, b], CreateBarChartOptions(xAxis)); 

Then on success reset the data, axesScale and replot as:

var newData = [['a',1],['b',2],['c',3]];  plot1.series[0].data = newData;  plot1.resetAxesScale();  plot1.replot();  

Ref: https://groups.google.com/group/jqplot-users/browse_thread/thread/59df82899617242b?pli=1

回答3:

Each time before redrawing the graph, just destroy the existing1.

$.ajax({     url: '/Home/ChartData',     type: 'GET',     data: { Id: Id },     dataType: 'json',     success: function (data) {         if(plot)         {            plot.destroy();          }         var plot=$.jqplot('chartDiv', [a, b], CreateBarChartOptions(xAxis)); }}); 

回答4:

Took me a while to find an answer for the script generated data, so I'm going to post this right here. I used a combination of the above code.

I created a global var, named plot3 within my script file. Then created the below function. When this is called with a redraw boolean, it determines if I need to destroy and redraw or draw for the first time.

What first bit of code does is gets data from my jqgrid, (which is being updated in a different function), and updates the arrays. The second bit, determines my interval ticks, on the x-axis dependent upon my length of data.

function DrawGraph(bRedraw){       var testTimes = [];       testTimes = $('#polarizationTable').jqGrid('getCol', 'TestTime', testTimes, false);       var RdgA = $('#polarizationTable').jqGrid('getCol', 'RdgA', RdgA, false);       var RdgB = $('#polarizationTable').jqGrid('getCol', 'RdgB', RdgB, false);         var readingLineA = [];        for (var i=0; i

回答5:

Here is a full example of how to dynamically update the plot with new data without reloading the page:

    
     New data point       

It's a simplified version of this guy's post: JQPlot auto refresh chart with dynamic ajax data

回答6:

$('#chart).html('');

chart is the DIV where chart is created.

this does the trick, nothing fancy by effective.

回答7:

Maybe this will help. I on the other hand is having problem with getting replot to work at all, but i'am using a dataRenderer.

$.ajax({     url: '/Home/ChartData',     type: 'GET',     data: { Id: Id },     dataType: 'json',     success: function (data) {          $('chartDiv').empty();         $.jqplot('chartDiv', [a, b], CreateBarChartOptions(xAxis));     }}); 

回答8:

hope this helps

jQuery(document).ready(function(){    jQuery.ajax({     url: '/review_graphs/show',     type: 'GET',      success: function (data) {          var plot1 = jQuery.jqplot('chartDiv', [data,data],   {     title: 'Bianual Reviews percentage',     series:[       {         renderer:jQuery.jqplot.BarRenderer,         label:'Average',         stackSeries: true,         dragable: {color: '#ff3366',constrainTo: 'x'},         trendline:{show: false}       },       {         label:'Trend Line',trendline:{show: false}}       ],     legend: {             show: true,             placement: 'outsideGrid'         },     axesDefaults: {         tickRenderer: jQuery.jqplot.CanvasAxisTickRenderer ,         tickOptions: {           angle: -30,           fontSize: '10pt'         }     },     axes: {       xaxis: {         renderer: jQuery.jqplot.CategoryAxisRenderer       }     }   });     }});    }); 

回答9:

The best method I got is, the div in which you're drawing, clear that before you draw your new graph.

$('#graph_area).children().remove(); 

文章来源: How to refresh jqplot bar chart without redrawing the chart