Cómo actualizar el gráfico de barras de jqplot sin volver a dibujar el gráfico

Question

Tengo un gráfico de barras jqplot y deseo que los datos del gráfico se cambien cuando el usuario cambie el valor en una lista desplegable. Eso funciona, pero el problema es que el diagrama de barras se vuelve a dibujar, uno sobre el otro, cada vez que el usuario cambia los valores.

¿Cómo puedo actualizar o volver a cargar las barras sin dibujar todo de nuevo? ¿Hay algún valor de propiedad para establecer?

cambios de datos cuadro de acuerdo con una llamada ajax:

$.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; 
} 

Una respuesta sería muy apreciada. Gracias.

Answer 1

Lo que quiere hacer es llamar al método .replot() de jqPlot cuando dibuja el nuevo gráfico. Cambie su llamada ajax para que se vea así:

$.ajax({ 
     url: '/Home/ChartData', 
     type: 'GET', 
     data: { Id: Id }, 
     dataType: 'json', 
     success: function (data) { 

      $.jqplot('chartDiv', [a, b], CreateBarChartOptions(xAxis)).replot(); 
     }}); 

Answer 2

Quizás esto ayude. Yo, por otro lado, tengo problemas para hacer que Replica funcione, pero estoy usando dataRenderer.

$.ajax({ 
    url: '/Home/ChartData', 
    type: 'GET', 
    data: { Id: Id }, 
    dataType: 'json', 
    success: function (data) { 

     $('chartDiv').empty(); 
     $.jqplot('chartDiv', [a, b], CreateBarChartOptions(xAxis)); 
    }}); 

Answer 3

esperanza esto ayuda

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

    }); 

Answer 4

trate de hacer que el objeto de gráfico como una variable global en su secuencia de comandos como:

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

Luego, el éxito restablecer los datos, axesScale y Replot como:

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

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

Answer 5

Cada vez antes de volver a dibujar el gráfico, simplemente destruya el 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)); 
}}); 

Answer 6

Me tomó un tiempo encontrar la respuesta para los datos generados por el script, así que voy a publicar esto aquí mismo. Usé una combinación del código anterior.

Creé una var global, llamada plot3 dentro de mi archivo de script. Luego creó la función siguiente. Cuando esto se llama con un redraw booleano, determina si necesito destruir y volver a dibujar o dibujar por primera vez.

Lo que hace el primer bit del código es obtener datos de mi jqgrid, (que se está actualizando en una función diferente), y actualiza las matrices. El segundo bit, determina mis tics de intervalo, en el eje x, dependiendo de mi longitud de datos.

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<testTimes.length; i++){ 
     readingLineA.push([testTimes[i], RdgA[i]]); 
     } 

     var readingLineB = []; 
     for (var i=0; i<testTimes.length; i++){ 
     readingLineB.push([testTimes[i], RdgB[i]]); 
     } 

    var maxX = $("#testLength").val(); 
    var lengthX = testTimes.length; 
    var tickIntervalX = Math.round(maxX/10); 
    if(bRedraw == true) 
    { 
     plot3.destroy(); 
     bRedraw = false; 
    } 
    if(bRedraw == false) 
    { 
     plot3 = $.jqplot('chart3', [readingLineA, readingLineB], 
     { 
      title:'Graph', 
      series:[{label:'Reading - A'}, {label:'Reading - B'} ], 
      legend:{show:true, location:'se'}, 
      // You can specify options for all axes on the plot at once with 
      // the axesDefaults object. Here, we're using a canvas renderer 
      // to draw the axis label which allows rotated text. 
      axes:{ 
      xaxis:{ 
       label:'Minutes', 
       syncTicks: true, 
       min: 0, 
       numberTicks: 10, 
       tickInterval: tickIntervalX, 
       max: maxX*1.1, 
       labelRenderer: $.jqplot.CanvasAxisLabelRenderer, 
       labelOptions: { 
       fontSize: '12pt' 
       }, 
      }, 
      yaxis:{ 
       label:'Data', 
       min: 0, 
       numberTicks: 10, 
       labelRenderer: $.jqplot.CanvasAxisLabelRenderer, 
       labelOptions: { 
       fontSize: '12pt' 
       } 
      }, 
      } 
     }); 
    } 
} 

Answer 7

El mejor método que obtuve es el div en el que está dibujando, claro que antes de dibujar su nuevo gráfico.

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

Answer 8

Aquí es un ejemplo completo de cómo actualizar dinámicamente la trama con nuevos datos sin tener que recargar la página:

<div id="chart1" style="height: 300px; width: 500px; position: relative;"></div> 
    <button>New data point</button> 

    <script type="text/javascript"> 
    var storedData = [3, 7]; 

    var plot1; 
    renderGraph(); 

    $('button').click(function() { 
     doUpdate(); 
    }); 

    function renderGraph() { 
     if (plot1) { 
      plot1.destroy(); 
     } 
     plot1 = $.jqplot('chart1', [storedData]); 
    } 

    function doUpdate() { 
     var newVal = Math.random(); 
     storedData.push(newVal); 
     renderGraph(); 
    } 
    </script> 

Es una versión simplificada del post de este tipo: JQPlot auto refresh chart with dynamic ajax data

Answer 9

$ ('#gráfico).html ('');

gráfico es el DIV donde se crea el gráfico.

esto hace el truco, nada sofisticado por efectivo.