Думаю следующий вопрос (Диаграмма автообновления JQPlot с динамическими данными ajax) приближается к тому, чего я хотел бы достичь. Проблема в том, что мои знания js очень ограничены, поэтому мне очень трудно их понять.
Ситуация такова: я строю график jqplot, который генерируется с использованием файла json. Я хотел бы обновить график без обновления страницы. Чтобы правильно построить график, я определил некоторые параметры, используя php внутри javascript (например, максимальный и минимальный пределы для оси и яси).
Мой (упрощенный) 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; ?>,
},
},
});
Как я могу перерисовать график без обновления страницы, учитывая, что мне также нужно запустить php для определения моих данных json с использованием php?
Спасибо!
Довольно просто динамически обновлять данные, возвращаемые при вызове ajax.
Итак, прежде всего вам нужно будет использовать AJAX вызов, который вернет вам данные, необходимые для диаграммы в нужном формате.
Затем, как только данные были возвращены из запроса AJAX, вы должны просто сначала очистить div, используя jQuery, например $('#chartdiv').empty();
а затем просто повторно запустите свой код, чтобы заново построить график, используя новые данные.
Кроме того, поскольку вы хотите использовать предыдущие данные, использованные для рисования диаграммы, вы можете просто сохранить те же данные json в переменной javascript, а затем соответствующим образом изменить эту же переменную на основе данных, полученных из запроса ajax.
Вы также можете использовать функции jqgrid, такие как plot.destroy(); plot.replot();
У меня была такая же проблема, и я нашел решение для этого. Смотрите пример кода
возможно кому-то нужен этот код для решения аналогичной проблемы
$("#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
}
}
});
}