jquery plugins - ejemplos - Cómo actualizar el gráfico de barras jqplot sin volver a dibujar el gráfico

reflow highcharts

Question

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

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

Cambios en los datos del 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

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

chart es el DIV donde se crea el chart.

Esto hace el truco, nada sofisticado por efectivo.

Answer 2

Cada vez que antes de volver a dibujar el gráfico, simplemente destruye el existente1.

$.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 3

El mejor método que obtuve es el div en el que estás dibujando, claro que antes de dibujar tu nueva gráfica.

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

Answer 4

Este es un ejemplo completo de cómo actualizar dinámicamente el gráfico con nuevos datos sin volver a cargar 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 de la publicación de este tipo: cuadro de actualización automática de JQPlot con datos dinámicos ajax

Answer 5

Intente tener su objeto gráfico como una variable global en su script como:

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

Luego, con éxito, reinicie los datos, axesScale y replot como:

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

Answer 6

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

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

Answer 7

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

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

Lo que hace el primer bit de código es obtener datos de mi jqgrid (que se está actualizando en una función diferente) y actualiza los arreglos. El segundo bit, determina mis tramos de intervalo, en el eje x, dependiendo de la longitud de los 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 8

Tal vez esto ayude. Por otro lado, estoy teniendo problemas para que funcione la función Replot, pero estoy usando un DataRenderer.

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

Answer 9

espero que esto ayude

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