Building Dashboards using Google Charts

[Rajaraman Soundararajan]

Hi, 

There is a class google.visualization.ControlWrapper that defines a container for controls in the dashboard

var donutRangeSlider = new google.visualization.ControlWrapper({
          'controlType': 'NumberRangeFilter',
          'containerId': 'filter_div',
          'options': {
            'filterColumnLabel': 'Donuts eaten'
          }

        }); 




The controlType seems to be limited CategoryFilter, NumberRangeFilter. What if I want to replace  the filters with a custom jQuery control, instead of sliders, dropdown, textbox. 




https://developers.google.com/chart/interactive/docs/gallery/controls





Thanks

Rajaraman S

[Daniel LaLiberte]

Hi Rajaraman,

You can use your own class, but it has to have the right interface to be usable as a control.  You'll probably want to create a wrapper around classes like jQuery controls, in order to define the draw() method and other methods as required.  It is also essential that your handle the events so it works as expected within a Dashboard.

--
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.
To view this discussion on the web visit https://groups.google.com/d/msgid/google-visualization-api/2792d682-a1f9-4f08-b5f1-6c734060729c%40googlegroups.com.
For more options, visit https://groups.google.com/d/optout.

--

Daniel LaLiberte  - 978-394-1058

dlaliberte@Google.com   5CC, Cambridge MA

daniel.laliberte@GMail.com 9 Juniper Ridge Road, Acton MA

[Sergey Grabkovsky]

Hi Rajaraman,

You can certainly create a custom control, but it's not trivial, and we don't have any documentation for doing it. To help, I created a jsfiddle that shows a simple custom control. This control is a simple textbox where you enter a comma-delimited set of rows, and it will filter to those rows.

--

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.
To view this discussion on the web visit https://groups.google.com/d/msgid/google-visualization-api/2792d682-a1f9-4f08-b5f1-6c734060729c%40googlegroups.com.
For more options, visit https://groups.google.com/d/optout.

--

 

Sergey Grabkovsky | SWE  | gra...@google.com

[dunba...@gmail.com]

This is nice but it has a small bug in that it doesn't max out when you add more entries than the rows in the table. 

I know how busy you must be but it would be great to see some enhancements in terms of the menu of control options and styles. If you look at what is commonly done in D3 and other visualisation APIs, the Google controls & dashboards are showing their age. 

Regards,

Nick 

On Wednesday, October 28, 2015 at 7:59:33 PM UTC, Sergey wrote:

Hi Rajaraman,

You can certainly create a custom control, but it's not trivial, and we don't have any documentation for doing it. To help, I created a jsfiddle that shows a simple custom control. This control is a simple textbox where you enter a comma-delimited set of rows, and it will filter to those rows.

On Wed, Oct 28, 2015 at 3:08 PM Rajaraman Soundararajan <rajaram...@gmail.com> wrote:

Hi, 

There is a class google.visualization.ControlWrapper that defines a container for controls in the dashboard

var donutRangeSlider = new google.visualization.ControlWrapper({
          'controlType': 'NumberRangeFilter',
          'containerId': 'filter_div',
          'options': {
            'filterColumnLabel': 'Donuts eaten'
          }

        }); 




The controlType seems to be limited CategoryFilter, NumberRangeFilter. What if I want to replace  the filters with a custom jQuery control, instead of sliders, dropdown, textbox. 




https://developers.google.com/chart/interactive/docs/gallery/controls





Thanks

Rajaraman S

--
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 http://groups.google.com/group/google-visualization-api.
To view this discussion on the web visit https://groups.google.com/d/msgid/google-visualization-api/2792d682-a1f9-4f08-b5f1-6c734060729c%40googlegroups.com.
For more options, visit https://groups.google.com/d/optout.

[Sergey Grabkovsky]

Hi Nick,

Thanks for chiming in! The example in the jsfiddle is supposed to just show how to do a custom control, not give you a production-ready control to use in your application. It simply filters out any invalid rows (past the max), and you can certainly change it to have whatever behavior you want, since it's just meant to be an example.

I wholeheartedly agree that we could use a visual refresh of our controls and more customizability, and we certainly have plans to do update those at some point. I don't have any estimates for when that might be, though. You can certainly do custom CSS for those controls and customize them to look however you want.

As for the D3 comment: it is a great library for building custom visualizations, but it doesn't provide any prepackaged things. Everything you see has to be custom-styled by the builder of the visualization. Which makes it target a somewhat different audience than Google Charts, though we do aim to provide a nice balance of sensible presets and customizability with future versions.

On Thu, Oct 29, 2015 at 11:42 AM <dunba...@gmail.com> wrote:

This is nice but it has a small bug in that it doesn't max out when you add more entries than the rows in the table. 

I know how busy you must be but it would be great to see some enhancements in terms of the menu of control options and styles. If you look at what is commonly done in D3 and other visualisation APIs, the Google controls & dashboards are showing their age. 

Regards,

Nick 

On Wednesday, October 28, 2015 at 7:59:33 PM UTC, Sergey wrote:

Hi Rajaraman,

You can certainly create a custom control, but it's not trivial, and we don't have any documentation for doing it. To help, I created a jsfiddle that shows a simple custom control. This control is a simple textbox where you enter a comma-delimited set of rows, and it will filter to those rows.

On Wed, Oct 28, 2015 at 3:08 PM Rajaraman Soundararajan <rajaram...@gmail.com> wrote:

Hi, 

There is a class google.visualization.ControlWrapper that defines a container for controls in the dashboard

var donutRangeSlider = new google.visualization.ControlWrapper({
          'controlType': 'NumberRangeFilter',
          'containerId': 'filter_div',
          'options': {
            'filterColumnLabel': 'Donuts eaten'
          }

        }); 




The controlType seems to be limited CategoryFilter, NumberRangeFilter. What if I want to replace  the filters with a custom jQuery control, instead of sliders, dropdown, textbox. 




https://developers.google.com/chart/interactive/docs/gallery/controls





Thanks

Rajaraman S

--
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.
To view this discussion on the web visit https://groups.google.com/d/msgid/google-visualization-api/2792d682-a1f9-4f08-b5f1-6c734060729c%40googlegroups.com.
For more options, visit https://groups.google.com/d/optout.

--

 

Sergey Grabkovsky | SWE  | gra...@google.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 http://groups.google.com/group/google-visualization-api.

To view this discussion on the web visit https://groups.google.com/d/msgid/google-visualization-api/c202703b-d2dd-4390-8941-b8413998cee3%40googlegroups.com.

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