Dynamically pass series in jqplot line chart

3
votes

I have used jqplot line chart. I have get data from php page using ajax.In some condition I will display specific series.So

How to pass series dynamically in jqplot line chart and also set legend of series ?

I have manually write code for above requirement.I have apply click event on legend series and draw graph as per click on legend.

I have also change y-axis value as per select/deselect series legend.

3
javascriptjqueryjqplot
I would say to recreate your jqplot object in the ajax callback, then use the replot function - sdespont
Sorry, I don't have exemple where I am working now, but you just need to recreate your Jqplot graph with new series (values, ...) then call plot.replot() where plot is the jqplot object previously created (plot = $.jqplot('chart', ... - sdespont
Ok but in my code I have create every time new object of jqplot and draw the graph.I don to know about how to pass new series value in existing object.so give some example - Hkachhia
Here is a great exemple you could inspire you : jsfiddle.net/fracu/HrZcj - sdespont
@sdespont Thanks nice example.I have another question Is it possible to add another series dynamically ? , I want to add and remove series in graph dynamically as per some condition. - Hkachhia

3 Answers

1
votes

I originally tried the answer posted by @sdespont, but due to additional properties that need to be in place for the series, it wasn't working properly. I was able to get this working by doing the following:

plot1.data = data;
plot1.replot( data );

data is a 3D array of the same makeup as you would pass in when creating the plot. If I did either part without doing the other, it wouldn't refresh properly, but the combination of the two seems to do the trick. Refreshing the plot in this fashion would dynamically add or remove any series I added to the data array.

Hope that helps.

0
votes

You could add or remove series by playing with plot1.series array.

Here is a good jsfiddle : jsfiddle.net/fracu/HrZcj

The idea is to create an array with data

    myNewSerie = Array();
    x = (new Date()).getTime();
    y = Math.floor(Math.random() * 100);
    myNewSerie.push([x, y]);

Then add it to the graph using the next available slot

plot1.series[plot1.series.length] = myNewSerie

And finally redraw using plot1.replot();

Check out the updateSeries function in the end of the fiddle

Not tested, but should work

0
votes

I had the same problem recently. "replot" works but is veeerrryyy slow. I used "jQPlot.drawSeries" which is blazingly fast. Just give your new series data to jQPlot as usual and call jQPlot.drawSeries({}, <nr of your series from 0...xxx)

My realtime chart with 800 values runs with >> 60 FPS on my PC and also very fast on my mobiles.