When updating a chart with Ajax, how can I prevent the page to scroll up back to the chart being updated?

[David Vallee]

So I have an ajax call every seconds, grabbing some json data, and I
have some setValues to update the datatable with the json data. At the
moment I update the chart with the draw method, the page scrolls back
to the chart being updated. How can I prevent this behavior?

[Julian King]

Two things, first are you using the GoogleVisualizationsForDotNet that I published on code.google.com?  If not then i can't vouch for anyone else's implementation of google charts.  If you are using my wrapper class then the behavior you describe sounds like a postback?  I have a chart refreshing though AJAX and the page doesn't scroll.

If it is my chart wrapper please send sample code.

--
You received this message because you are subscribed to the Google Groups "Google Visualization API" group.
To post to this group, send email to google-visua...@googlegroups.com.
To unsubscribe from this group, send email to google-visualizati...@googlegroups.com.
For more options, visit this group at http://groups.google.com/group/google-visualization-api?hl=en.

--
Best Regards,

Julian King
(206) 697-4663
hool...@gmail.com

[Riccardo Govoni ☢]

Hi David,

can you provide some extra info about the visualization you're using and/or an example page showing the problem?

I created this quick example: http://jsfiddle.net/7JLQ3/1/ that contains a chart placed in the middle of a very long page, updating every 5 seconds. I can't reproduce your problem: when the chart redraws the scrolling position is unaffected.

-- R.

[Terry Slack]

I to have this behaviour....when I update my chart, the page is scrolled to the top and also in my case, to the left.  Any thoughts.  

On Monday, 3 October 2011 02:42:23 UTC-6, Riccardo Govoni ☢ wrote:

Hi David,

can you provide some extra info about the visualization you're using and/or an example page showing the problem?

I created this quick example: http://jsfiddle.net/7JLQ3/1/ that contains a chart placed in the middle of a very long page, updating every 5 seconds. I can't reproduce your problem: when the chart redraws the scrolling position is unaffected.

-- R.

On 2 October 2011 23:17, Julian King <hool...@gmail.com> wrote:

Two things, first are you using the GoogleVisualizationsForDotNet that I published on code.google.com?  If not then i can't vouch for anyone else's implementation of google charts.  If you are using my wrapper class then the behavior you describe sounds like a postback?  I have a chart refreshing though AJAX and the page doesn't scroll.

If it is my chart wrapper please send sample code.

On Sat, Oct 1, 2011 at 2:41 AM, David Vallee <dav...@gmail.com> wrote:

So I have an ajax call every seconds, grabbing some json data, and I
have some setValues to update the datatable with the json data. At the
moment I update the chart with the draw method, the page scrolls back
to the chart being updated. How can I prevent this behavior?

--
You received this message because you are subscribed to the Google Groups "Google Visualization API" group.
To post to this group, send email to google-visua...@googlegroups.com.

To unsubscribe from this group, send email to google-visualization-api+unsub...@googlegroups.com.

For more options, visit this group at http://groups.google.com/group/google-visualization-api?hl=en.

--
Best Regards,

Julian King
(206) 697-4663
hool...@gmail.com

--
You received this message because you are subscribed to the Google Groups "Google Visualization API" group.
To post to this group, send email to google-visua...@googlegroups.com.

To unsubscribe from this group, send email to google-visualization-api+unsub...@googlegroups.com.

[asgallant]

Can you post your code or a link to the page?

[David Manz]

Riccardo,

I modified your example to illustrate a similar problem that I have been having.  The main differences are that I am using a Table, I am reusing the Table and DataTable instead of starting anew each time I redraw, and I am redrawing in response to the click of a link instead of an Ajax request.  I did also remove the hard-coded dimensions on the chart.

You'll notice that when you click the update link at the bottom of the example, the screen scrolls so that the link is no longer in view.

https://jsfiddle.net/q4jaafqn/

David

On Monday, October 3, 2011 at 3:42:23 AM UTC-5, Riccardo Govoni ☢ wrote:

Hi David,

can you provide some extra info about the visualization you're using and/or an example page showing the problem?

I created this quick example: http://jsfiddle.net/7JLQ3/1/ that contains a chart placed in the middle of a very long page, updating every 5 seconds. I can't reproduce your problem: when the chart redraws the scrolling position is unaffected.

-- R.

On 2 October 2011 23:17, Julian King <hool...@gmail.com> wrote:

Two things, first are you using the GoogleVisualizationsForDotNet that I published on code.google.com?  If not then i can't vouch for anyone else's implementation of google charts.  If you are using my wrapper class then the behavior you describe sounds like a postback?  I have a chart refreshing though AJAX and the page doesn't scroll.

If it is my chart wrapper please send sample code.

On Sat, Oct 1, 2011 at 2:41 AM, David Vallee <dav...@gmail.com> wrote:

So I have an ajax call every seconds, grabbing some json data, and I
have some setValues to update the datatable with the json data. At the
moment I update the chart with the draw method, the page scrolls back
to the chart being updated. How can I prevent this behavior?

--
You received this message because you are subscribed to the Google Groups "Google Visualization API" group.
To post to this group, send email to google-visua...@googlegroups.com.

To unsubscribe from this group, send email to google-visualization-api+unsub...@googlegroups.com.

For more options, visit this group at http://groups.google.com/group/google-visualization-api?hl=en.

--
Best Regards,

Julian King
(206) 697-4663
hool...@gmail.com

--
You received this message because you are subscribed to the Google Groups "Google Visualization API" group.
To post to this group, send email to google-visua...@googlegroups.com.

To unsubscribe from this group, send email to google-visualization-api+unsub...@googlegroups.com.

[David Manz]

The problem shows up when you are scrolled down near the bottom of the page.  When the redraw occurs, the table momentarily disappears causing the page to be shortened, the window to scrolls up by an amount equal to the height of the table that just disappeared, and when the table reappears, the window does not return to its previous scroll position.

I am going to try coming up with a workaround that involves wrapping the table in an element that will hold the place for the table while it disappears and is redrawn. 

[David Manz]

Here's my example modified with the workaround.  I just wrap the table with another div and set its height be to the same of the table's height once the table has been rendered.

https://jsfiddle.net/eg9a6noy/

Problem solved.

[PMax]

Cheers, this worked. For me I changed it by setting the DIV to 100% Height in CSS with no Java involved. Not sure if that is best practice, but works well in my situation.