Using controls without dashboard?

306 views
Skip to first unread message

perspektive42

unread,
Mar 8, 2017, 8:10:25 AM3/8/17
to Google Visualization API
Is it somehow possible to use controls (e.g. a DateRangeFilter) without a dashboard and without connecting it to a DataTable? I'd like to use it as a UI element to control elements in a Google Map (not within a chart).

Daniel LaLiberte

unread,
Mar 8, 2017, 9:41:24 AM3/8/17
to Google Visualization API
Yes it is possible to use controls outside of dashboards, but they are dependent on accessing a DataTable.  Perhaps you can fake a datatable just so it gets the right range.  You don't need to use the filtered datatable that results.

You'll need to listen for the 'statechange' and 'ready' events.  

On Wed, Mar 8, 2017 at 8:10 AM, 'perspektive42' via Google Visualization API <google-visua...@googlegroups.com> wrote:
Is it somehow possible to use controls (e.g. a DateRangeFilter) without a dashboard and without connecting it to a DataTable? I'd like to use it as a UI element to control elements in a Google Map (not within a chart).

--
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/6393c233-c9bc-4a33-8ec3-083a21990ce7%40googlegroups.com.
For more options, visit https://groups.google.com/d/optout.



--

perspektive42

unread,
Mar 9, 2017, 3:35:26 PM3/9/17
to Google Visualization API
Hi,

It seems I still need a dashboard, otherwise there is no way to bind the control to a DataTable.

Here's my try:

    google.charts.setOnLoadCallback(function(){
      var container = document.createElement("DIV");
      container.id = "slider";
      controlUI.appendChild(container);
      var container2 = document.createElement("DIV");
      container2.id = "slider2";
      controlUI.appendChild(container2);
 
      var slider = new google.visualization.ControlWrapper({
        'controlType': 'NumberRangeFilter',
        'containerId': 'slider',
        'options': {
          'filterColumnIndex': 0,
          'minValue': yearRange.min,
          'maxValue': yearRange.max}
      });
     
      var tableChart = new google.visualization.ChartWrapper({
        'chartType': 'Table',
        'containerId': 'slider2',
        'options': {
          'width': '100%',
          'height': '100%',
          'chartArea': {top: 0, right: 0, bottom: 0}
        }
      });
     
      // Create the dashboard.
      var data = google.visualization.arrayToDataTable([
                                                        ['Year'],
                                                        [yearRange.min],
                                                        [yearRange.max],
                                                        ]);
      var dashboard = new google.visualization.Dashboard(controlUI);
      dashboard.bind(slider, tableChart);
      dashboard.draw(data);
    });

This only gets me a "... failed to draw" error.



Am Mittwoch, 8. März 2017 15:41:24 UTC+1 schrieb Daniel LaLiberte:
Yes it is possible to use controls outside of dashboards, but they are dependent on accessing a DataTable.  Perhaps you can fake a datatable just so it gets the right range.  You don't need to use the filtered datatable that results.

You'll need to listen for the 'statechange' and 'ready' events.  
On Wed, Mar 8, 2017 at 8:10 AM, 'perspektive42' via Google Visualization API <google-visua...@googlegroups.com> wrote:
Is it somehow possible to use controls (e.g. a DateRangeFilter) without a dashboard and without connecting it to a DataTable? I'd like to use it as a UI element to control elements in a Google Map (not within a chart).

--
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,
Mar 9, 2017, 3:51:56 PM3/9/17
to Google Visualization API
You can treat a control like a chart, and draw it given data.  If you create the control yourself, rather than via the ControlWrapper, then do e.g. myControl.draw(mydata, myoptions).  If you create it with the ControlWrapper, then treat it like a ChartWrapper:  https://developers.google.com/chart/glossary#chartwrapper  

Hope that helps.

To unsubscribe from this group and stop receiving emails from it, send an email to google-visualization-api+unsubscr...@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-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/c1a82f8a-0e03-4c92-b13a-e15fd32fd3fc%40googlegroups.com.

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



--

perspektive42

unread,
Mar 9, 2017, 5:20:05 PM3/9/17
to Google Visualization API
Thanks, I got it working, almost. How do you set the state (current min/max value) of a NumberRangeFilter? The control doesn't seem to have a setState() method.
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.



--

Daniel LaLiberte

unread,
Mar 9, 2017, 7:00:33 PM3/9/17
to Google Visualization API
Ah, there is a secret third argument for draw which is the state object.  

To unsubscribe from this group and stop receiving emails from it, send an email to google-visualization-api+unsubscr...@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+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.

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/e8d2dab7-b689-4d4f-95b5-a7ec55cdf0ce%40googlegroups.com.

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



--

perspektive42

unread,
Mar 10, 2017, 1:22:58 AM3/10/17
to Google Visualization API
Hi,

I tried it, and it didn't work:

      slider.draw(data, options, {'lowValue': yearRange.min, 'highValue': yearRange.max});

Both slider thumbs still start at the minimum value.
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.



--

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



--

Daniel LaLiberte

unread,
Mar 10, 2017, 9:57:43 AM3/10/17
to Google Visualization API
Looks like you are doing it correctly, so perhaps there is a bug, or a conflict with other options.   Can you point me at your page?  Or give me enough to reproduce it?  Maybe a jsfiddle page?  Thanks.

To unsubscribe from this group and stop receiving emails from it, send an email to google-visualization-api+unsubscr...@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+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+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+unsubscr...@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.



--

perspektive42

unread,
Mar 10, 2017, 10:30:52 AM3/10/17
to Google Visualization API
Hi,

This code is not yet on a public server.

I've extracted the relevant parts to jsfiddle, and it works there: https://jsfiddle.net/jp8065en/1/

I have to find where the difference is compared to my development machine. I also dynamically change the state (code not on jsfiddle), and calling draw() with the new state yields the expected result. It's only the first draw() that doesn't work. Strange.

perspektive42

unread,
Mar 10, 2017, 1:14:59 PM3/10/17
to Google Visualization API
Hi,

I've narrowed it down. The control is created within a DIV that is used as a custom Google Maps control. In that case the control is not drawn correctly at first (both thumbs are at the minimum value). When I query the state, however, the returned values are as expected. Also, when the control is re-drawn later by an interval timer callback, it is drawn correctly.

When I create the control outside the map, i.e. as child of a DIV that is not used as a maps control, it is drawn correcly immediately.

Daniel LaLiberte

unread,
Mar 10, 2017, 1:25:00 PM3/10/17
to Google Visualization API
Good that you narrowed it down.  I'm not sure whether the control should be doing anything differently, however.  Maybe we need to find out more about why Google Maps seems to be interfering with updating the display of the control.  Would it be sufficient as a work around to draw the control the first time with a timeout?

--
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/94542ffd-017c-4318-a809-c7809923a558%40googlegroups.com.

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

perspektive42

unread,
Mar 10, 2017, 1:41:42 PM3/10/17
to Google Visualization API
I just tried that. I call draw() after a delay of 2s, and then it's correct most of the time. Not pretty, but works for now.


Am Freitag, 10. März 2017 19:25:00 UTC+1 schrieb Daniel LaLiberte:
Good that you narrowed it down.  I'm not sure whether the control should be doing anything differently, however.  Maybe we need to find out more about why Google Maps seems to be interfering with updating the display of the control.  Would it be sufficient as a work around to draw the control the first time with a timeout?
On Fri, Mar 10, 2017 at 1:14 PM, 'perspektive42' via Google Visualization API <google-visua...@googlegroups.com> wrote:
Hi,

I've narrowed it down. The control is created within a DIV that is used as a custom Google Maps control. In that case the control is not drawn correctly at first (both thumbs are at the minimum value). When I query the state, however, the returned values are as expected. Also, when the control is re-drawn later by an interval timer callback, it is drawn correctly.

When I create the control outside the map, i.e. as child of a DIV that is not used as a maps control, it is drawn correcly immediately.


Am Freitag, 10. März 2017 16:30:52 UTC+1 schrieb perspektive42:
Hi,

This code is not yet on a public server.

I've extracted the relevant parts to jsfiddle, and it works there: https://jsfiddle.net/jp8065en/1/

I have to find where the difference is compared to my development machine. I also dynamically change the state (code not on jsfiddle), and calling draw() with the new state yields the expected result. It's only the first draw() that doesn't work. Strange.

--
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,
Mar 10, 2017, 1:54:17 PM3/10/17
to Google Visualization API
OK good enough for now, I hope.  Keep an eye on it in case we can get some more clues about what is happening.

On Fri, Mar 10, 2017 at 1:41 PM, 'perspektive42' via Google Visualization API <google-visua...@googlegroups.com> wrote:
I just tried that. I call draw() after a delay of 2s, and then it's correct most of the time. Not pretty, but works for now.

Am Freitag, 10. März 2017 19:25:00 UTC+1 schrieb Daniel LaLiberte:
Good that you narrowed it down.  I'm not sure whether the control should be doing anything differently, however.  Maybe we need to find out more about why Google Maps seems to be interfering with updating the display of the control.  Would it be sufficient as a work around to draw the control the first time with a timeout?
On Fri, Mar 10, 2017 at 1:14 PM, 'perspektive42' via Google Visualization API <google-visua...@googlegroups.com> wrote:
Hi,

I've narrowed it down. The control is created within a DIV that is used as a custom Google Maps control. In that case the control is not drawn correctly at first (both thumbs are at the minimum value). When I query the state, however, the returned values are as expected. Also, when the control is re-drawn later by an interval timer callback, it is drawn correctly.

When I create the control outside the map, i.e. as child of a DIV that is not used as a maps control, it is drawn correcly immediately.


Am Freitag, 10. März 2017 16:30:52 UTC+1 schrieb perspektive42:
Hi,

This code is not yet on a public server.

I've extracted the relevant parts to jsfiddle, and it works there: https://jsfiddle.net/jp8065en/1/

I have to find where the difference is compared to my development machine. I also dynamically change the state (code not on jsfiddle), and calling draw() with the new state yields the expected result. It's only the first draw() that doesn't work. Strange.

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

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/56f7b1d1-618d-4f56-bb02-df56122c140d%40googlegroups.com.

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



--
Reply all
Reply to author
Forward
0 new messages