Highstock Update Animation

[fingolion]

Hi there!

I'm having a little problem when updating my graph with new data. It has to do mainly with the "looks" but i find it important in my case. Considering how large a dataset i need to display, i divide my queries to the DB to get pieces of that data shown over time and to give the server enough time to load all that data, everytime i receive the data in the client side, i want it to be drawn in the graph slowly so the progress is visible to the user.

Although it works just fine when building the chart for the first time (using plotOptions=>series=>animation=>duration option), it just doesn't seem to work when i redraw the graph after adding new points. I tried with

Code: Select all

animation: {
            duration: 15000,
            easing: 'swing'
        },

inside "chart" options, but to no avail. I also tried passing the duration as a parameter of redraw (after seeing it in this post ):

Code: Select all

radGraph.redraw({duration: 15000});

So i'm kinda lost here Is there anything I'm missing?

I'll leave you the piece of code where i update the graph (redraw parameter in addPoint() is false due to adding lots of data at same time):

Code: Select all

var $rows = $(xhr.responseXML);
$rows.find('*').filterNode('bsrn:bsrnData').each(function(j,category){                   
var t = $(category).attr('dt').split(/[- :]/);
radGraph.series[0].addPoint([Date.UTC(t[0], t[1]-1, t[2], t[3], t[4],t[5]),parseFloat($(category).attr('g'))], false);
radGraph.series[1].addPoint([Date.UTC(t[0], t[1]-1, t[2], t[3], t[4],t[5]),parseFloat($(category).attr('dr'))], false);
radGraph.series[2].addPoint([Date.UTC(t[0], t[1]-1, t[2], t[3], t[4],t[5]),parseFloat($(category).attr('df'))], false);
radGraph.series[3].addPoint([Date.UTC(t[0], t[1]-1, t[2], t[3], t[4],t[5]),parseFloat($(category).attr('ex'))], false);
meteoGraph.series[0].addPoint([Date.UTC(t[0], t[1]-1, t[2], t[3], t[4],t[5]),parseFloat($(category).attr('t'))], false);
meteoGraph.series[1].addPoint([Date.UTC(t[0], t[1]-1, t[2], t[3], t[4],t[5]),parseFloat($(category).attr('h'))], false);
meteoGraph.series[2].addPoint([Date.UTC(t[0], t[1]-1, t[2], t[3], t[4],t[5]),parseFloat($(category).attr('p'))], false);
meteoGraph.series[3].addPoint([Date.UTC(t[0], t[1]-1, t[2], t[3], t[4],t[5]),parseFloat($(category).attr('w'))], false);
});
       
radGraph.redraw({duration: 15000});
meteoGraph.redraw({duration: 15000});

Any bit of help is appreciated. Meanwhile i'll try to find a solution for it myself and post it if i find it, but i guess it's also good to ask for help now and then

[hfrntt]

Could you show us your chart (or even better set an editable demo on http://highcharts.com/jsbin)

[fingolion]

Thanks for your answer. Here's a very simplified version, it uses random data but there you can see what i'm talking about:

http://highcharts.com/jsbin/afukew/edit

If you click "Creategraph" button, the graph will take some time to draw. Once finished tho, if you press "updategraph" button, instead of drawing the new points over time, it draws instantly all point. My idea is that when I update the graph, it is updated gradually just like when it's created.

Thanks again

[hfrntt]

Oh now I see what you meant. Unfortunately for now highcharts perform animation only when you add / update one point (http://highcharts.com/jsbin/afukew/4/edit). For me that animations improvements look like user request, you can post send one on http://highcharts.uservoice.com

[fingolion]

Thank you very much! Will try to find a way around it with the info you gave me. I already posted it on the uservoice site, though, so i'll be looking forward to see if/when it gets done

Edit: Here's the link in case anyone feels like upvoting

http://highcharts.uservoice.com/forums/ ... int-update