selected range for the number range filter control

[Ragini Pandey]

Hi,

How do I get the range selected by the user on the Range filter control.

I have a dashboard with range filter and I need to save the user selection of the range.

Thanks

Ragini

[asgallant]

Call the ControlWrapper#getState method.  It returns an object with a "range" property, which is an object with "start" and "end" properties:

var state = filter.getState();

/*

state = {

    range: {

        start: <start of range>,

        end: <end of range>

    }

}

 */

[Ragini Pandey]

Trying to get the alert box with selected value but am not able to.

Here is what I am doing.

var tData = google.visualization.arrayToDataTable(eval(data));

                           

                            // Create a dashboard.

                            var dashboard = new google.visualization.Dashboard(document.getElementById('dashboard_div'));

                            // Define a category picker for the 'Position' column.

                            

                            var slider1 = new google.visualization.ControlWrapper({

                                'controlType': 'NumberRangeFilter',

                                'containerId': 'slider_div',

                                'options': {

                                  'filterColumnLabel': 'Position',

                                'ui': {'labelStacking': 'vertical'}

                                }

                              });

                              

                              var slider2 = new google.visualization.ControlWrapper({

                                'controlType': 'NumberRangeFilter',

                                'containerId': 'slider2_div',

                                'options': {

                                  'filterColumnLabel': 'Gene Id',

                                'ui': {'labelStacking': 'vertical'}

                                }

                              });

                          dashboard.bind(slider1,slider2);

                            dashboard.draw(tData);

/// Get selected values---

                        var state = slider1.getState();

                           alert(state.range.start());

Please let me know how to fix this.

Ragini

[asgallant]

Sorry, my mistake - I gave you the state information for the ChartRangeFilter control, not the NumberRangeFilter.  The NumberRangeFilter control's state is an object with "lowValue", "highValue", "lowThumbAtMinimum", and "highThumbAtMaximum" properties.  The low and high properties are the selected values, and the min/max properties are booleans that are true if the thumbs are at the min or max respectively.

var state = slider1.getState();

alert('Low value: ' + state.lowValue);

[Ragini Pandey]

I tried that as well earlier. But the alert box displays value 'undefined' when it loads first and never pops up whenever the range changes.

Still not working.

Thanks

Ragini

[asgallant]

You need to wrap it in a "ready" event handler if you want to get the alert on page load, and in a "statechange" event handler if you want to get it when the user interacts with the control:

// do something with the state when is the control is drawn:

google.visualization.events.addListener(filter1, 'ready', function () {

    var state  = filter1.getState();

    // do something with state

});

// do something with the state when is the user interacts with the control:

google.visualization.events.addListener(filter1, 'statechange', function () {

    var state  = filter1.getState();

    // do something with state

});

Create the event handlers after you create the filter, but before calling the dashboard's #draw method.

[Ragini Pandey]

Thanks a lot. It works now.

I tried to add Listener first but was adding a 'select' instead 'statechange'

Ragini