zoom and pan with real time update chart

53 views
Skip to first unread message

fm

unread,
May 9, 2016, 6:16:58 PM5/9/16
to Google Visualization API
I have an IoT project and i have live data stream at the rate of 1 sample/sec.
I am using draw(data,option) once a second and am redrawing the entire thing to display real time data
i wan the user to be able to zoom and pan and for my code to maintain the current view (based on user zoom and pan) whiel i update the chart
this is not happening right now because as soon as i call draw everything gets reset
How do I fix this please?

Daniel LaLiberte

unread,
May 9, 2016, 11:04:55 PM5/9/16
to Google Visualization API
You will generally want to use the viewWindow min and max options to set the zoom and pan yourself, and after the user changes the zoom and pan, you'll have to grab the current values using getChartLayoutInterface() and associated methods.  

Sorry, this is not going to be very convenient to do - we should provide a few more conveniences to make this easier.

--
You received this message because you are subscribed to the Google Groups "Google Visualization API" group.
To unsubscribe from this group and stop receiving emails from it, send an email to google-visualizati...@googlegroups.com.
To post to this group, send email to google-visua...@googlegroups.com.
Visit this group at https://groups.google.com/group/google-visualization-api.
To view this discussion on the web visit https://groups.google.com/d/msgid/google-visualization-api/6a52b617-c3b9-4cd1-ba08-80eca8a9caaa%40googlegroups.com.
For more options, visit https://groups.google.com/d/optout.



--

fm

unread,
May 10, 2016, 11:49:26 AM5/10/16
to Google Visualization API
ah the 

getChartLayoutInterface() function is what i needed, i kept looking for it but couldn't find it

and just to make sure is my approach of calling the DRAW function every time new data comes in is correct for real time updates, right? there is no way to just update the chart you just have to redraw the whole thing to update it seems like.
also, i have noticed that the plot takes up a lot of RAM as the number of samples grow and i have to use averaging to reduce the number of samples displayed to preserve memory. this is also a problem for me because i want to be able to display data over a long time but i am limited by the plot's ram usage. now on Safari it all works fine without taking up much memory but on chrome it grows very fast! i know that chrom uses a seperate process per tab but i am not sure how to make it work like safari so that i can display a huge sample without memory burden.

Thanks,
Farhad

On Monday, May 9, 2016 at 9:04:55 PM UTC-6, Daniel LaLiberte wrote:
You will generally want to use the viewWindow min and max options to set the zoom and pan yourself, and after the user changes the zoom and pan, you'll have to grab the current values using getChartLayoutInterface() and associated methods.  

Sorry, this is not going to be very convenient to do - we should provide a few more conveniences to make this easier.
On Mon, May 9, 2016 at 6:16 PM, fm <majd...@gmail.com> wrote:
I have an IoT project and i have live data stream at the rate of 1 sample/sec.
I am using draw(data,option) once a second and am redrawing the entire thing to display real time data
i wan the user to be able to zoom and pan and for my code to maintain the current view (based on user zoom and pan) whiel i update the chart
this is not happening right now because as soon as i call draw everything gets reset
How do I fix this please?

--
You received this message because you are subscribed to the Google Groups "Google Visualization API" group.
To unsubscribe from this group and stop receiving emails from it, send an email to google-visualization-api+unsub...@googlegroups.com.



--

Daniel LaLiberte

unread,
May 10, 2016, 1:18:29 PM5/10/16
to Google Visualization API
You do have to redraw with new data.  But there is an autorefresh feature if you use a ChartWrapper, though if you combine that with your zoom and pan capturing, you still have to update the viewWindow min and max accordingly. I'm not actually sure what will happen in that case.
 

On Tue, May 10, 2016 at 11:49 AM, fm <majd...@gmail.com> wrote:
ah the 

getChartLayoutInterface() function is what i needed, i kept looking for it but couldn't find it

and just to make sure is my approach of calling the DRAW function every time new data comes in is correct for real time updates, right? there is no way to just update the chart you just have to redraw the whole thing to update it seems like.
also, i have noticed that the plot takes up a lot of RAM as the number of samples grow and i have to use averaging to reduce the number of samples displayed to preserve memory. this is also a problem for me because i want to be able to display data over a long time but i am limited by the plot's ram usage. now on Safari it all works fine without taking up much memory but on chrome it grows very fast! i know that chrom uses a seperate process per tab but i am not sure how to make it work like safari so that i can display a huge sample without memory burden.

Thanks,
Farhad

On Monday, May 9, 2016 at 9:04:55 PM UTC-6, Daniel LaLiberte wrote:
You will generally want to use the viewWindow min and max options to set the zoom and pan yourself, and after the user changes the zoom and pan, you'll have to grab the current values using getChartLayoutInterface() and associated methods.  

Sorry, this is not going to be very convenient to do - we should provide a few more conveniences to make this easier.
On Mon, May 9, 2016 at 6:16 PM, fm <majd...@gmail.com> wrote:
I have an IoT project and i have live data stream at the rate of 1 sample/sec.
I am using draw(data,option) once a second and am redrawing the entire thing to display real time data
i wan the user to be able to zoom and pan and for my code to maintain the current view (based on user zoom and pan) whiel i update the chart
this is not happening right now because as soon as i call draw everything gets reset
How do I fix this please?

--
You received this message because you are subscribed to the Google Groups "Google Visualization API" group.
To unsubscribe from this group and stop receiving emails from it, send an email to google-visualizati...@googlegroups.com.



--

--
You received this message because you are subscribed to the Google Groups "Google Visualization API" group.
To unsubscribe from this group and stop receiving emails from it, send an email to google-visualizati...@googlegroups.com.

To post to this group, send email to google-visua...@googlegroups.com.
Visit this group at https://groups.google.com/group/google-visualization-api.
To view this discussion on the web visit https://groups.google.com/d/msgid/google-visualization-api/cdc49bc0-4077-4e3c-a6f4-656e1c40a40d%40googlegroups.com.

For more options, visit https://groups.google.com/d/optout.



--

fm

unread,
May 10, 2016, 4:53:14 PM5/10/16
to Google Visualization API
Thank you so much,
so this is mostly working but when i use the "width" property on the getHAxisValue it does not give me accurate results. i read a value that is lagging from the actuall  value?
I am using TimOfDay data for my x axes and i read values back such as [0,0,0,3,21,0,43], first of all i am not sure why i get values in the DataTime format and not TimeOfDay format, because my column data type is defined as TimeOfDay!
second i read back [0,0,0,3,21,0,43] where the x axes is displaying up to 3:21:12.56??
I am defining the view with the "viewWindow" option but when I come back and read the "width" property it is off from what i just defined!!
also, i am using the "width" property but it seems like width is actually the "right" property, is that true?


On Tuesday, May 10, 2016 at 11:18:29 AM UTC-6, Daniel LaLiberte wrote:
You do have to redraw with new data.  But there is an autorefresh feature if you use a ChartWrapper, though if you combine that with your zoom and pan capturing, you still have to update the viewWindow min and max accordingly. I'm not actually sure what will happen in that case.
 
On Tue, May 10, 2016 at 11:49 AM, fm <majd...@gmail.com> wrote:
ah the 

getChartLayoutInterface() function is what i needed, i kept looking for it but couldn't find it

and just to make sure is my approach of calling the DRAW function every time new data comes in is correct for real time updates, right? there is no way to just update the chart you just have to redraw the whole thing to update it seems like.
also, i have noticed that the plot takes up a lot of RAM as the number of samples grow and i have to use averaging to reduce the number of samples displayed to preserve memory. this is also a problem for me because i want to be able to display data over a long time but i am limited by the plot's ram usage. now on Safari it all works fine without taking up much memory but on chrome it grows very fast! i know that chrom uses a seperate process per tab but i am not sure how to make it work like safari so that i can display a huge sample without memory burden.

Thanks,
Farhad

On Monday, May 9, 2016 at 9:04:55 PM UTC-6, Daniel LaLiberte wrote:
You will generally want to use the viewWindow min and max options to set the zoom and pan yourself, and after the user changes the zoom and pan, you'll have to grab the current values using getChartLayoutInterface() and associated methods.  

Sorry, this is not going to be very convenient to do - we should provide a few more conveniences to make this easier.
On Mon, May 9, 2016 at 6:16 PM, fm <majd...@gmail.com> wrote:
I have an IoT project and i have live data stream at the rate of 1 sample/sec.
I am using draw(data,option) once a second and am redrawing the entire thing to display real time data
i wan the user to be able to zoom and pan and for my code to maintain the current view (based on user zoom and pan) whiel i update the chart
this is not happening right now because as soon as i call draw everything gets reset
How do I fix this please?

--
You received this message because you are subscribed to the Google Groups "Google Visualization API" group.
To unsubscribe from this group and stop receiving emails from it, send an email to google-visualization-api+unsub...@googlegroups.com.



--

--
You received this message because you are subscribed to the Google Groups "Google Visualization API" group.
To unsubscribe from this group and stop receiving emails from it, send an email to google-visualization-api+unsub...@googlegroups.com.

To post to this group, send email to google-visua...@googlegroups.com.
Visit this group at https://groups.google.com/group/google-visualization-api.



--

fm

unread,
May 10, 2016, 6:41:54 PM5/10/16
to Google Visualization API
ok so to clear the problem some more, i am using 

'viewWindow': {'min': 0, 'max': 4000}

on my vertical axes but when i use these:

console.log( chart.getChartLayoutInterface().getVAxisValue( chart.getChartLayoutInterface().getChartAreaBoundingBox().left ) );
console.log( chart.getChartLayoutInterface().getVAxisValue( chart.getChartLayoutInterface().getChartAreaBoundingBox().width ) );
console.log( chart.getChartLayoutInterface().getVAxisValue( chart.getChartLayoutInterface().getChartAreaBoundingBox().top ) );
console.log( chart.getChartLayoutInterface().getVAxisValue( chart.getChartLayoutInterface().getChartAreaBoundingBox().height ) );

i get these results on the console:

2674.79674796748
-9081.30081300813
4008.130081300813
1243.9024390243903

I was hoping to get 0 and 4000 from "top" and "height" properties!
am i missing something here?
Reply all
Reply to author
Forward
0 new messages