Timeline chart (via Chart Wrapper) and setSelection

[Matthew Cory]

Okay, I've been searching on this for a while and can't find any kind of answer that makes any progress so hopefully someone here can point out what I'm doing wrong.

I have a table chart and a timeline chart, both constructed through ChartWrappers.  The table is in a dashboard object because I'm trying out the filtering controls; for the moment, the timeline isn't -- while they share the same data, the timeline needs it preprocessed and sorted differently, and I didn't want to bork the table.  (I'm not familiar enough with DataViews and other possibilities to know if I can have everything handled in a view object, but at the moment it looks like that might be more along the lines of optimization than a fix for this.  If I'm wrong, let me know.)  Anyways...

The gist of the page I'm working on is to let the user select an entry from either the table or the timeline and display the details of that entry in another div.  Handling the actual selection and displaying the info is easy enough, but what I *want* to do is highlight the selected record in both charts at the same time, to more obviously show which is which.  I thought the following snippet would work (roughly this; same principles):

// in table-selection event handler

var selected = table.getChart().getSelection()[0];

var rowIdx = selected.row;

var entryId = // get the id value of the entry specified with rowIdx

var timelineEntryIdx = // get the index of the value in the timeline datatable

                       // that has the same id as entry id.

var timelineSelection = {

    row: timelineEntryIdx,

    column: null

};

timeline.getChart().setSelection([timelineSelection]);

I have a select event handler tied to the timeline object as well; it will fire (sometimes, at least; sometimes nothing happens, and there's no rhyme or reason to whether it does or not) with the above code, but nothing gets highlighted.  When I use console.log to see what the selection is, I get:

[0] = {

    column: null,

    row: undefined

}

(And the column: null part isn't dependent on what I have above either; I've tried setting arbitrary numbers, both within and outside the range of columns, and it still comes back as null.)

If I select an element on the timeline via the mouse, it works fine -- the event triggers every time and the selection object is properly defined.

I know that the timeline setSelection method does *something* at least; I've had code set to clear the selection (i.e. setSelection([])) inside the table selection handler, and if I select something in the timeline with the mouse and then select something on the table, it clears the selection no problem.

Any thoughts?  Let me know if you need more info -- I've tried to make this as complete as possible without just c/p'ing my entire JS file, but I have no problems with putting in more info.

--Matt

[Sergey Grabkovsky]

Hi Matt,

You found a bug! Thank you! We have already found where the issue is and hope to include the fix with our next release.

--
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.
For more options, visit https://groups.google.com/d/optout.

[Matthew Cory]

That's great!  Glad I could help :)

Kinda related to that, is there (or will there be) any way to determine in the select event whether it was triggered through a click or via the method call?  I already have something in mind to determine that in my own code when the time comes, but it'd be nice if it was provided so I don't have to add more code of my own that might break -- in my case, I was planning on programmatically selecting the record in one chart when it's clicked on in the other chart, so knowing what triggered the selection will prevent a constant loop.

Thanks Sergey!

(Oh, as a PS -- is there any kind of "debug" version of the code?  I'm still learning my way around it, and while the docs are great they don't help much for some of the things I've had problems with; I'll get error messages like "undefined is not a function" and it takes me forever to find out that I had an empty cell or something improperly formatted or whatever.)

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

[Sergey Grabkovsky]

Sorry, there's no debug code available. We do have a 'select' event, which you can attach via google.visualization.events.addListener. This event is only triggered when the selection changes, so in you shouldn't be able to get into an infinite loop, since eventually the selection set would stabilize, and calling setSelection wouldn't produce any more events.

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

[Matthew Cory]

Oh, that's awesome -- didn't even think that as a possibility.  Great!

And for the record, I really appreciate the quick turnaround -- really didn't know what to expect.  If I come across anything else that I can't figure out, I'll definitely post here again.  Thanks again Sergey.

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