Redrawing an Annotated Time Line chart...

[adamiaonr]

Hi there!

This is probably kind of a newbie question, I'll go straight to the
point:

I'm working with an Annotated Time Line chart that holds more than one
series. My objective is to allow the user to hide/show a specific
series through the use of checkboxes... You can take a look at it
through here: http://paginas.fe.up.pt/~ee04010/energy/linechart.php

Now, I've accomplished this using the most inelegant of the methods,
basically by calling the same page, submitting the numbers of the
columns to be hidden/shown...

What I would like to know is if it is possible to call the draw()
method again in order to 'redraw' the chart, without having to refresh
the whole page...

For example, by clicking on a checkbox, a JavaScript function (let's
call it "handleClick()") would be able to call the draw method for the
initialized chart...

I already tried to do it by making the handleClick() function to call
the drawChart() initializing function, which is exactly the same as
the one shown here: http://code.google.com/apis/visualization/documentation/gallery/annotatedtimeline.html...
It didn't work!

I also tried to initialize the chart and data variables outside the
drawChart() function:

var data = new google.visualization.DataTable();
var chart = new google.visualization.AnnotatedTimeLine
(document.getElementById('chart_div'));

And do the same thing, but it doesn't seem to work as well!

Can you please help me with this issue?

Thank you very much!
ADNR

[VizGuy]

There are methods you can call to show and hide specific "lines" (data series).
See showDataColumns and hideDataColumns at http://code.google.com/apis/visualization/documentation/gallery/annotatedtimeline.html#Methods

We are working on a light 'redraw' mechanism to similar cases, but it is still under development.

I believe the methods described above will work for you.

Regards,
VizGuy

[adamiaonr]

Hi VizGuy, thanks for the answer...

I've already seen the methods you're talking about, and I'm using them
when I refresh the page in order to hide/show a specific data
series... I submit the information about the series to hide/show via
POST and call the 'drawChart()' function again, now without forgetting
the 'showDataColumns()' method... Now the main point is to avoid

having to refresh the whole page.

Would those methods work without having to call the 'draw()' function
again? Like, let's say, could the 'handleClick()' JavaScript function
be something like this:

function handleClick(arg){

showDataColumns(arg);

}

That would be exactly what I want! I tried to use
'chart.showDataColumns(arg)' but it didn't work since the object
'chart' it's only used inside the 'drawChart()' function as you show
in the examples... Also tried to create the 'chart' object outside the
initialization function, however, nothing worked again...

Probably all of this is quite confusing to you, just keep in mind
that, after the info you just gave me, my main objective now is to
understand how to use the 'showDataColumns()' and 'hideDataColumns()'
methods and actually see a specific data series hide and show
repeatedly as I click a checkbox!

Thank you very much for your quick answer by the way!
ADNR

On Mar 16, 7:35 am, VizGuy <viz...@google.com> wrote:
> There are methods you can call to show and hide specific "lines" (data
> series).

> See showDataColumns and hideDataColumns athttp://code.google.com/apis/visualization/documentation/gallery/annot...

>
> We are working on a light 'redraw' mechanism to similar cases, but it is
> still under development.
>
> I believe the methods described above will work for you.
>
> Regards,
> VizGuy
>
>
>
>
>
> On Mon, Mar 16, 2009 at 2:49 AM, adamiaonr <adamia...@gmail.com> wrote:
>
> > Hi there!
>
> > This is probably kind of a newbie question, I'll go straight to the
> > point:
>
> > I'm working with an Annotated Time Line chart that holds more than one
> > series. My objective is to allow the user to hide/show a specific
> > series through the use of checkboxes... You can take a look at it

> > through here:http://paginas.fe.up.pt/~ee04010/energy/linechart.php<http://paginas.fe.up.pt/%7Eee04010/energy/linechart.php>

>
> > Now, I've accomplished this using the most inelegant of the methods,
> > basically by calling the same page, submitting the numbers of the
> > columns to be hidden/shown...
>
> > What I would like to know is if it is possible to call the draw()
> > method again in order to 'redraw' the chart, without having to refresh
> > the whole page...
>
> > For example, by clicking on a checkbox, a JavaScript function (let's
> > call it "handleClick()") would be able to call the draw method for the
> > initialized chart...
>
> > I already tried to do it by making the handleClick() function to call
> > the drawChart() initializing function, which is exactly the same as
> > the one shown here:

> >http://code.google.com/apis/visualization/documentation/gallery/annot....
> > ..

[VizGuy]

This should work without re-calling the draw function.
If you done have access to the chart object, why don't you just define it out of the function that initialize it? like:

var chart;

function init() {
  chart = new google.visualization.AnnotatedTimeline(div);
  chart.draw(data, options);
}

function handleClick() {
  chart.hideDataColumns(n); // 'chart' is known because it was defined globally
}


Regards,
VizGuy

[adamiaonr]

Hi there!

I had already tried to do that, but it seems like I did it the wrong
way before...

... because now it works great!

Thanks!
ADNR

On Mar 16, 10:39 am, VizGuy <viz...@google.com> wrote:
> This should work without re-calling the draw function.
> If you done have access to the chart object, why don't you just define it
> out of the function that initialize it? like:
>
> var chart;
>
> function init() {
>   chart = new google.visualization.AnnotatedTimeline(div);
>   chart.draw(data, options);
>
> }
>
> function handleClick() {
>   chart.hideDataColumns(n); // 'chart' is known because it was defined
> globally
>
> }
>
> Regards,
> VizGuy
>

[adamiaonr]

Hi again!

Thanks for the tips once again! Now I have another question:

Now that I can hide/show a specific data series using the
showDataColumns() and hideDataColumns() methods, it seems that, the
more times I perform the hide/show (and therefore the previously
mentioned methods...) the chart's scrolling bar gets slower and
slower...

After, let's say 10 hide/show actions, the scrolling bar doesn't flow
naturally, instead it kind of blocks momentarily when I try to move
it...

Here's my example...

http://paginas.fe.up.pt/~ee04010/energy/new_linechart.php

You can try to check/uncheck the lower checkboxes in order to produce
the hide/show effect.

Is this some kind of bug or known issue? If not, can you check the
source and verify If I'm doing something wrong?

Thank you!
ADNR

[VizGuy]

This is one of relatively small problems that are related to hiding and un-hiding columns.
We are working on improving these features.

Regards,
VizGuy

[Brian Quirion]

Does anyone have a full simple working example of an annotated timeline with multiple data series that can show/hide each series?

Thanks

[Thomas Rybka]

Here's a basic example that can show/hide 1 series: http://jsfiddle.net/j38eJ/1/

You can expand this to handle multiple series using the same principle: using Views to show/hide data in your underlying DataTable.

Thomas Rybka | Software Engineer | try...@google.com | Google

--
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 http://groups.google.com/group/google-visualization-api?hl=en.
For more options, visit https://groups.google.com/groups/opt_out.
 
 

[Brian Quirion]

Thanks this is exactly what I needed.

To unsubscribe from this group and stop receiving emails from it, send an email to google-visualization-api+unsub...@googlegroups.com.