It is currently Sat Oct 25, 2014 1:07 am Advanced search

Highstock Update Animation

Technical support for the Highcharts Stock package

Highstock Update Animation

Postby fingolion » Tue Feb 21, 2012 11:21 am

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 :)
fingolion
 
Posts: 7
Joined: Tue Jan 31, 2012 11:15 am

Re: Highstock Update Animation

Postby hfrntt » Fri Feb 24, 2012 1:58 pm

Could you show us your chart (or even better set an editable demo on http://highcharts.com/jsbin)
Slawek Kolodziej
Highcharts support team
hfrntt
 
Posts: 6394
Joined: Mon Aug 30, 2010 10:41 am

Re: Highstock Update Animation

Postby fingolion » Mon Feb 27, 2012 6:53 pm

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 :-)
fingolion
 
Posts: 7
Joined: Tue Jan 31, 2012 11:15 am

Re: Highstock Update Animation

Postby hfrntt » Wed Feb 29, 2012 12:39 am

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
Slawek Kolodziej
Highcharts support team
hfrntt
 
Posts: 6394
Joined: Mon Aug 30, 2010 10:41 am

Re: Highstock Update Animation

Postby fingolion » Wed Feb 29, 2012 9:45 am

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
fingolion
 
Posts: 7
Joined: Tue Jan 31, 2012 11:15 am


Return to Highstock Usage

Who is online

Users browsing this forum: No registered users and 3 guests