Impossible to dynamically replot data with jqplot

6,774 views
Skip to first unread message

Antonin Lenfant

unread,
Jul 12, 2011, 10:50:42 AM7/12/11
to jqplot-users
Hello,

I'm currently facing a problem I tried to solve for the previous
hours, but unfortunately I wasn't successful.

My goal is to get JSON data with ajax and replot it every x seconds.
Here I just tried to change the data and replot the graph but it
doesn't plot anything different at all when I change plot.data and
then use plot.replot().

However, plot.series[0].data seems to be effective, but isn't there a
better way to do this ?

Thanks,
Antonin Lenfant

Compuwizard123

unread,
Jul 12, 2011, 10:53:52 AM7/12/11
to jqplot-users
Look at http://www.jqplot.com/docs/files/jqplot-core-js.html#jqPlot.replot
. I know you said replot didn't work but one of the three methods
below that should.

Kevin Risden

On Jul 12, 9:50 am, Antonin Lenfant <antonin.lenf...@smart-

Antonin Lenfant

unread,
Jul 12, 2011, 11:12:01 AM7/12/11
to jqplot-users
Thanks a lot for the quick answer !
Unfortunately it doesn't change anything. I don't understand how this
works at all, I change the data and ask the script to replot but it
doesn't do anything. If it can help, I'm using the jquery.jqplot.
1.0.0b2_r792.zip version.

Frankly, you'll be my savior if you can help me, I spent all my
afternoon on it and it's really beginning to bug me...

Here is my code, I stripped the unimportant parts :
<!doctype>
<html>
<head>
<title>Test AJAX graph</title>

<link rel="stylesheet" type="text/css" href="jqplot/
jquery.jqplot.css" />
<script type="text/javascript" src="http://ajax.googleapis.com/
ajax/libs/jquery/1.6.2/jquery.min.js"></script>

<!--[if lt IE 9]><script language="javascript" type="text/
javascript" src="jqplot/excanvas.js"></script><![endif]-->
<script type="text/javascript" src="jqplot/jquery.jqplot.js"></
script>

<script type="text/javascript">
var plot;

function checkvals() {
plot.data = [[0,1,2]];
plot.replot({resetAxes:true});
plot.redraw();
plot.draw();
//alert(plot.data);
}

$(document).ready(function(){
$.jqplot.config.enablePlugins = true;
//updatevals();
//createPlot(datalist, labellist);
l1 = [18, 36, 41];

var options = {
title: "Lines",
legend:{show:true, location:'se'},
seriesDefaults:{trendline:{show:true}}
}

plot = $.jqplot('chart', [l1], options);
});
</script>
</head>
<body>
<h1>Test de graphe avec mise à jour en AJAX temps réel</h1>
<!--Saluuuuut nounou!-->
<button onclick="checkvals();">Changevalues</button>
</body>
</html>

Thanks A LOT in advance for any answer that might help me

On Jul 12, 4:53 pm, Compuwizard123 <compuwizard...@gmail.com> wrote:
> Look athttp://www.jqplot.com/docs/files/jqplot-core-js.html#jqPlot.replot

Antonin Lenfant

unread,
Jul 12, 2011, 11:13:21 AM7/12/11
to jqplot-users
Oops, I forgot the div where the chart is displayed under my stupid
comment.
<!--Saluuuuut nounou!-->
<div class="jqplot" id="chart" style="height:500px;width:1000px;"></
div>

Thanks again !

On Jul 12, 5:12 pm, Antonin Lenfant <antonin.lenf...@smart-

Compuwizard123

unread,
Jul 12, 2011, 11:53:49 AM7/12/11
to jqplot-users
Its interesting since examples/seriesUpdate.html shows using
series[0].data too. I would just go with that since it works. I looked
through some more examples and thats the most revelvant.

Kevin Risden

On Jul 12, 10:13 am, Antonin Lenfant <antonin.lenf...@smart-

Antonin Lenfant

unread,
Jul 12, 2011, 4:20:26 PM7/12/11
to jqplot-users
It seems really like a trick so I prefer not using it. What's weird is
that by searching on Google, I found multiple results saying to change
plot.data.

It's really too bad there's no way of changing the data or the options
without resetting totally the graph... (which doesn't free memory on
Chrome)

I'm gonna have to switch to another js graphic library, which is a
shame since this one seemed really good.

Thanks for the answers, if the author of the plugin could explain why
he didn't implement it, it might be technically interesting to read

Chris Leonello

unread,
Jul 12, 2011, 5:55:31 PM7/12/11
to jqplot...@googlegroups.com
Hi Antonin,

I didn't follow your thread too closely, but I'll try to address your comments.  Note that you can find an example of dynamic plotting in the distribution under "examples/dynamicplot.html".  I've also added another example to the repo, you can find it here:  https://bitbucket.org/cleonello/jqplot/src/b72221aa1f4a/examples/replotting.html

It seems really like a trick so I prefer not using it. What's weird is
that by searching on Google, I found multiple results saying to change
plot.data.

Using plot.data to reset/update data won't work.  I don't know what you mean by "trick", I'm no magician.

Once data is set on the series (during parseOptions and init), the series owns the data.  That is why you have to update e.g. plot.series[0].data.  The rational behind this is to decentralize responsibility to the renderers/plugins.  The series, not the plot, controls it's data.  In retrospect this has many drawbacks, one being unintuitive handling of options after plot creation.  It has the benefit of giving plugins and renderers a lot of power to do what they need.

It's really too bad there's no way of changing the data or the options
without resetting totally the graph... (which doesn't free memory on
Chrome)
You can change any data and most options.  As mentioned above, however, after the plot is initially created you have to change data/options on the plot objects and their renderers.  The options passed in at plot creation get applied to the objects (axes, grid, ticks, etc.), so you have to dig a bit to figure out what to change after creation. 

As for memory, I suspect it is being freed, but not being immediately garbage collected.  In my torture tests, I see a sawtooth memory consumption pattern where the browser waits for some predetermined time or memory level before it actually garbage collects.  If you have a situation that appears to be leaking memory, please post a test case so I can debug.  I would appreciate that.

Thanks for the answers, if the author of the plugin could explain why
he didn't implement it, it might be technically interesting to read
I'm not sure I understand what "it" is. 
 


-- 
Chris Leonello
http://www.jqplot.com
--
You received this message because you are subscribed to the Google Groups "jqplot-users" group.
To post to this group, send email to jqplot...@googlegroups.com.
To unsubscribe from this group, send email to jqplot-users...@googlegroups.com.
For more options, visit this group at http://groups.google.com/group/jqplot-users?hl=en.

Antonin Lenfant

unread,
Jul 13, 2011, 2:59:51 AM7/13/11
to jqplot-users
First, let me thank you for your quick answer.

On 12 juil, 23:55, Chris Leonello <jqplot-us...@jqplot.com> wrote:
> Hi Antonin,
>
> I didn't follow your thread too closely, but I'll try to address your comments. Note that you can find an example of dynamic plotting in the distribution under "examples/dynamicplot.html". I've also added another example to the repo, you can find it here:https://bitbucket.org/cleonello/jqplot/src/b72221aa1f4a/examples/repl...
Thanks, it's quite useful but unfortunately I can't use it because I'd
need a way to dynamically add series, labels, ... Which is possible to
do but not easily.
>
> > It seems really like a trick so I prefer not using it. What's weird is
> > that by searching on Google, I found multiple results saying to change
> > plot.data.
>
> Using plot.data to reset/update data won't work. I don't know what you mean by "trick", I'm no magician.
Well I am not comfortable modifying this kind of data without getters/
setters, that's what I meant by "trick".
>
> Once data is set on the series (during parseOptions and init), the series owns the data. That is why you have to update e.g. plot.series[0].data. The rational behind this is to decentralize responsibility to the renderers/plugins. The series, not the plot, controls it's data. In retrospect this has many drawbacks, one being unintuitive handling of options after plot creation. It has the benefit of giving plugins and renderers a lot of power to do what they need.
>
> > It's really too bad there's no way of changing the data or the options
> > without resetting totally the graph... (which doesn't free memory on
> > Chrome)
>
> You can change any data and most options. As mentioned above, however, after the plot is initially created you have to change data/options on the plot objects and their renderers. The options passed in at plot creation get applied to the objects (axes, grid, ticks, etc.), so you have to dig a bit to figure out what to change after creation.
>
> As for memory, I suspect it is being freed, but not being immediately garbage collected. In my torture tests, I see a sawtooth memory consumption pattern where the browser waits for some predetermined time or memory level before it actually garbage collects. If you have a situation that appears to be leaking memory, please post a test case so I can debug. I would appreciate that.
I'll try again and keep you posted, it seemed like the browser wasn't
freeing memory so I didn't keep this code snippet.
>
> > Thanks for the answers, if the author of the plugin could explain why
> > he didn't implement it, it might be technically interesting to read
>
> I'm not sure I understand what "it" is.
I was talking about a way to totally change the data and reinterpret
it (allowing to add new series, etc) without directly changing the
content of jqPlot's arrays myself.
>
> --
> Chris Leonellohttp://www.jqplot.com
>
>
>
>
>
>
>
> On Tuesday, July 12, 2011 at 4:20 PM, Antonin Lenfant wrote:
> > It seems really like a trick so I prefer not using it. What's weird is
> > that by searching on Google, I found multiple results saying to change
> > plot.data.
>
> > It's really too bad there's no way of changing the data or the options
> > without resetting totally the graph... (which doesn't free memory on
> > Chrome)
>
> > I'm gonna have to switch to another js graphic library, which is a
> > shame since this one seemed really good.
>
> > Thanks for the answers, if the author of the plugin could explain why
> > he didn't implement it, it might be technically interesting to read
>
> > On Jul 12, 5:53 pm, Compuwizard123 <compuwizard...@gmail.com (http://gmail.com)> wrote:
> > > Its interesting since examples/seriesUpdate.html shows using
> > > series[0].data too. I would just go with that since it works. I looked
> > > through some more examples and thats the most revelvant.
>
> > > Kevin Risden
>
> > > On Jul 12, 10:13 am, Antonin Lenfant <antonin.lenf...@smart-
>
> > > impulse.com (http://impulse.com)> wrote:
> > > > Oops, I forgot the div where the chart is displayed under my stupid
> > > > comment.
> > > > <!--Saluuuuut nounou!-->
> > > > <div class="jqplot" id="chart" style="height:500px;width:1000px;"></
> > > > div>
>
> > > > Thanks again !
>
> > > > On Jul 12, 5:12 pm, Antonin Lenfant <antonin.lenf...@smart-
>
> > > > > On Jul 12, 4:53 pm, Compuwizard123 <compuwizard...@gmail.com (http://gmail.com)> wrote:
>
> > > > > > Look athttp://www.jqplot.com/docs/files/jqplot-core-js.html#jqPlot.replot
> > > > > > . I know you said replot didn't work but one of the three methods
> > > > > > below that should.
>
> > > > > > Kevin Risden
>
> > > > > > On Jul 12, 9:50 am, Antonin Lenfant <antonin.lenf...@smart-
>
> > > > > > impulse.com (http://impulse.com)> wrote:
> > > > > > > Hello,
>
> > > > > > > I'm currently facing a problem I tried to solve for the previous
> > > > > > > hours, but unfortunately I wasn't successful.
>
> > > > > > > My goal is to get JSON data with ajax and replot it every x seconds.
> > > > > > > Here I just tried to change the data and replot the graph but it
> > > > > > > doesn't plot anything different at all when I change plot.data and
> > > > > > > then use plot.replot().
>
> > > > > > > However, plot.series[0].data seems to be effective, but isn't there a
> > > > > > > better way to do this ?
>
> > > > > > > Thanks,
> > > > > > > Antonin Lenfant
>
> > --
> > You received this message because you are subscribed to the Google Groups "jqplot-users" group.
> > To post to this group, send email to jqplot...@googlegroups.com (mailto:jqplot...@googlegroups.com).
> > To unsubscribe from this group, send email to jqplot-users...@googlegroups.com (mailto:jqplot-users...@googlegroups.com).

Antonin Lenfant

unread,
Jul 13, 2011, 3:09:02 AM7/13/11
to jqplot-users
In the following quick example, the memory is not freed by Chrome,
even after one minute of not updating the graph. Which is a problem
for me as I'd need to update it regularly.

<!doctype>
<html>
<head>
<title>Test AJAX graph</title>

<link rel="stylesheet" type="text/css" href="jqplot/
jquery.jqplot.css" />
<script type="text/javascript" src="http://ajax.googleapis.com/
ajax/libs/jquery/1.6.2/jquery.min.js"></script>

<!--[if lt IE 9]><script language="javascript" type="text/
javascript" src="jqplot/excanvas.js"></script><![endif]-->
<script type="text/javascript" src="jqplot/jquery.jqplot.js"></
script>
<script type="text/javascript" src="jqplot/plugins/
jqplot.cursor.min.js"></script>
<script type="text/javascript" src="jqplot/plugins/
jqplot.highlighter.min.js"></script>
<script type="text/javascript" src="jqplot/plugins/
jqplot.enhancedLegendRenderer.js"></script>
<script type="text/javascript" src="jqplot/plugins/
jqplot.dateAxisRenderer.js"></script>
<script type="text/javascript" src="jqplot/plugins/
jqplot.canvasTextRenderer.js"></script>
<script type="text/javascript" src="jqplot/plugins/
jqplot.canvasAxisTickRenderer.js"></script>

<script type="text/javascript">
var datalist = [1,3,4];
var labellist = ['label'];
var plot;

function rand (min, max) {
var argc = arguments.length;
if (argc === 0) {
min = 0;
max = 2147483647;
} else if (argc === 1) {
throw new Error('Warning: rand() expects exactly 2
parameters, 1 given');
}
return Math.floor(Math.random() * (max - min + 1)) +
min;
}

function createPlot(datalist, labellist) {
plot = $.jqplot('chart', datalist, {
title:'Données de production EDF pour un an',
stackSeries: true,
legend: {
renderer: $.jqplot.EnhancedLegendRenderer,
show: true,
placement: 'outsideGrid',
rendererOptions:{
numberRows: 1
},
location: 's'//,
//labels:labellist
},
seriesDefaults: {fill:true, showMarker:false},
axes: {
xaxis: {/*renderer:$.jqplot.DateAxisRenderer,
rendererOptions:{tickRenderer:
$.jqplot.CanvasAxisTickRenderer},
tickInterval:'2 weeks',
tickOptions:{
formatString:'%d/%m/%Y',
fontSize:'10pt',
fontFamily:'Tahoma',
fontSize:'10pt', fontFamily:'Tahoma',
angle:-40, fontWeight:'normal', fontStretch:1
},*/
pad: 1 //On réduit les marges du graphe
},
yaxis: {
//pad: 1,
min: 0
}
},
cursor:{
show: true,
zoom:true,
showTooltip:false
}
});
}

function updatevals() {
var JSONdata = {"datastreams": [
{"label": "Data1", "type": "normal", "data":
[rand(0,5), rand(0,5), rand(0,5), rand(0,5), rand(0,5), rand(0,5)]},
{"label": "Data2", "type": "normal", "data":
[rand(0,5), rand(0,5), rand(0,5), rand(0,5), rand(0,5), rand(0,5)]},
{"label": "Data3", "type": "normal", "data":
[rand(0,5), rand(0,5), rand(0,5), rand(0,5), rand(0,5), rand(0,5)]}
]
};
var i;

datalist = [];
labellist = [];
for(i=0;i<JSONdata.datastreams.length;i++) {
switch (JSONdata.datastreams[i].type) {
case "normal":
//alert(dump(JSONdata.datastreams[i]));

datalist.push(JSONdata.datastreams[i].data);

labellist.push(JSONdata.datastreams[i].label);
break;
}
}
if (plot) {
$("#chart").html("");
plot = null;
}

createPlot(datalist, labellist);
}

$(document).ready(function(){
$.jqplot.config.enablePlugins = true;

var options = {
title: "Lines",
legend:{show:true, location:'se'},
seriesDefaults:{trendline:{show:true}}
}

updatevals();
});
</script>
</head>
<body>
<div class="jqplot" id="chart" style="height:500px;width:
1000px;"></div>
<button onclick="updatevals();">Change vals</button>
</body>
</html>

On 13 juil, 08:59, Antonin Lenfant <antonin.lenf...@smart-impulse.com>
wrote:

Chris Leonello

unread,
Jul 13, 2011, 9:47:29 AM7/13/11
to jqplot...@googlegroups.com
I'll check it out.  

Note, it is when you aren't updating that garbage collection doesn't take place.  That is, you will probably find that after updating numerous times garbage collection kicks and all the memory is finally feed.

It is apparently an expensive operation to garbage collect, so browsers try to limit it to when absolutely necessary.  Thus, it sometimes seems like there is a memory leak when actually the browser just hasn't decided it's time to free memory.

Not saying there isn't still a problem.  I'll check out your example.

-- 
Chris Leonello
http://www.jqplot.com

On Wednesday, July 13, 2011 at 3:09 AM, Antonin Lenfant wrote:

In the following quick example, the memory is not freed by Chrome,
even after one minute of not updating the graph. Which is a problem
for me as I'd need to update it regularly.

<!doctype>
<html>
<head>
<title>Test AJAX graph</title>

<link rel="stylesheet" type="text/css" href="jqplot/
jquery.jqplot.css" />
<script type="text/javascript" src="http://ajax.googleapis.com/
ajax/libs/jquery/1.6.2/jquery.min.js"></script>

<!!--[if lt IE 9]><script language="javascript" type="text/
fontSize:'100pt',
fontFamily:'Tahoma',
fontSize:'10pt', fontFFamily:'Tahoma',
To post to this group, send email to jqplot...@googlegroups.com.
To unsubscribe from this group, send email to jqplot-users...@googlegroups.com.
Reply all
Reply to author
Forward
0 new messages