Selecting and filtering chart data from dropdown lists (just like the old MotionChart)

64 views
Skip to first unread message

Ralph Emaurice

unread,
Jan 24, 2017, 12:18:06 PM1/24/17
to Google Visualization API
I am looking to create a scatter plot such that the x and y axes can be picked from any two columns in a table. Preferably, you could add 3rd (size) and 4th (color) dimensions to this as well.

A long time ago, I used the Motion Chart object, which was beautifully set up for interaction this, in terms of setting multiple dimensions as well as the ability to filter discrete categories:


Do you have any suggestions for recreating this with the current API, or is there any existing related code? I've searched and couldn't find any examples like this.

Daniel LaLiberte

unread,
Jan 24, 2017, 12:32:00 PM1/24/17
to Google Visualization API
Hi Ralph,

Your idea of using the ScatterChart with styles for colors and sizes is exactly what I have partially implemented as an eventual replacement for the BubbleChart.  You could do this now, on top of the current API.  Here is an early prototype (not generalized at all) to give you the idea: https://jsfiddle.net/dlaliberte/3dajLf4w/

The MotionChart actually uses a variation of the BubbleChart implemented in Flash, and we are planning to replace the MotionChart entirely with the BubbleChart, along with extras to support the animation control and other features.  I have a prototype of that idea as well, but many other things needed to be done first.

Also, FYI, the ScatterChart is implemented internally using the LineChart, with no lines and larger points.  When that change was made, this allowed ScatterChart to work with discrete domain values, and a couple other features.

--
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-visualization-api@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/b577a7bb-ac0f-4802-bc18-c06ea45960ce%40googlegroups.com.
For more options, visit https://groups.google.com/d/optout.



--

Ralph Emaurice

unread,
Jan 24, 2017, 12:51:16 PM1/24/17
to Google Visualization API
Thanks so much. I guess I'm mostly referring to the really nice GUI for selecting axes from a large table and also to have variable dimensions. Any suggestions for that aspect?

Daniel LaLiberte

unread,
Jan 24, 2017, 1:30:44 PM1/24/17
to Google Visualization API
The GUI for selecting columns of the data and everything else that the MotionChart offers are what I referred to as the additional work required.  You can set these things up on top of the current API, with sufficient code, but it will be a lot of work.

On Tue, Jan 24, 2017 at 12:51 PM, Ralph Emaurice <ralphe...@gmail.com> wrote:
Thanks so much. I guess I'm mostly referring to the really nice GUI for selecting axes from a large table and also to have variable dimensions. Any suggestions for that aspect?

--
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-visualization-api@googlegroups.com.
Visit this group at https://groups.google.com/group/google-visualization-api.

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

Ralph Emaurice

unread,
Jan 24, 2017, 6:01:09 PM1/24/17
to Google Visualization API
Given your example, is there a simple way to turn:
view.setColumns([1, 2, ...
into
view.setColumns([x_indx, y_indx, ...
where x_indx, and y_indx (and later the size variable) are the selected indices of dropdown menu populated with the column headers?

Then you'd have to find a way to refresh every time the menu was triggered.


On Tuesday, January 24, 2017 at 1:30:44 PM UTC-5, Daniel LaLiberte wrote:
The GUI for selecting columns of the data and everything else that the MotionChart offers are what I referred to as the additional work required.  You can set these things up on top of the current API, with sufficient code, but it will be a lot of work.
On Tue, Jan 24, 2017 at 12:51 PM, Ralph Emaurice <ralphe...@gmail.com> wrote:
Thanks so much. I guess I'm mostly referring to the really nice GUI for selecting axes from a large table and also to have variable dimensions. Any suggestions for that aspect?

--
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.



--

Daniel LaLiberte

unread,
Jan 24, 2017, 7:56:30 PM1/24/17
to Google Visualization API
There is no easy way currently to let the user select the columns that you want to display in a chart.  You would have to use something like the CategoryFilter to select from a set of columns, and then use that selection to setColumns().

There are examples of this kind of thing in earlier messages in this group archives.  Maybe search on "CategoryFilter".

On Tue, Jan 24, 2017 at 6:01 PM, Ralph Emaurice <ralphe...@gmail.com> wrote:
Given your example, is there a simple way to turn:
view.setColumns([1, 2, ...
into
view.setColumns([x_indx, y_indx, ...
where x_indx, and y_indx (and later the size variable) are the selected indices of dropdown menu populated with the column headers?

Then you'd have to find a way to refresh every time the menu was triggered.

On Tuesday, January 24, 2017 at 1:30:44 PM UTC-5, Daniel LaLiberte wrote:
The GUI for selecting columns of the data and everything else that the MotionChart offers are what I referred to as the additional work required.  You can set these things up on top of the current API, with sufficient code, but it will be a lot of work.
On Tue, Jan 24, 2017 at 12:51 PM, Ralph Emaurice <ralphe...@gmail.com> wrote:
Thanks so much. I guess I'm mostly referring to the really nice GUI for selecting axes from a large table and also to have variable dimensions. Any suggestions for that aspect?

--
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+unsubscr...@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.



--

--
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-visualization-api@googlegroups.com.

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



--
Reply all
Reply to author
Forward
0 new messages