numberRangeFilter issues with decimal data in dashboard

[Mitchel S]

I'm seeing unexpected behavior using the numberRangeFilter on data with decimals. To illustrate, I've modified a simple dashboard from the docs to include decimal data. I've set the step property of the numberRangeFilter to move by increments of 0.1.

See jsfiddle here: https://jsfiddle.net/tmys2aj8/

Issues (visible in the JSFiddle):

1) The numberRangeFilter range labels don't update properly as I move the max (right) slider. The max range label reads 8.7 even after I slide it three steps to the left. It filters out data as expected, but the labels don't update, so it continues to read 8.7

2)The label on the minimum of the range does not include the lowest data point, despite displaying that bar on the graph

Has anyone seen this before? Does the numberRangeFilter control not support decimals?

[Nevada Smith]

1. Change maxValue to say 20 so you can in fact visually see the decimal variations (i.e., tenths) in the lengths of each bar 

2. Consider including 'format': '##.#', in this line:

'hAxis': {'minValue': 0.0, 'maxValue': 60.0},

I.e.,

'hAxis': {format: '##.#', 'minValue': 0.0, 'maxValue': 60.0},

[Mitchel S]

Thanks for responding Nevada.

Unfortunately, the issues are with the labels on the slider (numberRangeFilter controller), not the labels on the chart itself. When sliding the interactive slider, the labels on the slider itself (not the chart) are not updating properly.

I updated the jsfiddle with your changes here: https://jsfiddle.net/swn1xjmg/ 

Hopefully if you try using the slider (particularly the right hand max slider) on the jsfiddle you’ll see what I mean about the labels.

Thanks again for your help!

[Nevada Smith]

Interesting; adding minValue and maxValue changes the behavior (but still not what you're looking for):

   var control = new google.visualization.ControlWrapper({
      'controlType': 'NumberRangeFilter',
      'containerId': 'numberRangeFilter_control_div',
      'options': {
        'minValue': 1.0,
        'maxValue': 10.0,
        'filterColumnIndex': 1,
        'ui': {
            'showRangeValues':true,
            'step': 0.1
        }
      }
    });

[Mitchel S]

Workaround: display the true selected range of the numberRangeFilter controller on the page using statechange events, and modifying html on page each time the event fires. Use these new text divs instead of the standard numberRangeFilter labels.

Clumsy, but it works for me.

google.visualization.events.addListener(control, 'statechange', selectHandler); 
function selectHandler(e) { 
var range_selected = control.getState() 
document.getElementById("lower_range_label").innerHTML = "Lower Range:"+range_selected.lowValue 
document.getElementById("upper_range_label").innerHTML = "Upper Range:"+range_selected.highValue 
}

[Levi Kennedy]

I am also seeing this same behavior now 6 months later and after release of v46.   To reiterate, this is an issue with numberRangeFilter showing incorrect values for decimal step sizes when applied in dashboards.  I would prefer to avoid the workaround provided by Mitchel S.  Seems to still be an issue in v47.  Does anyone from the Google team know if this bug is being tracked and if so, where it is in the queue?   Thanks

[Daniel LaLiberte]

Thanks for your report and sorry for the inconvenience.    There does appear to be a bug, which was introduced when we added support for specifying a format for the label of 0 digits.  You can work around the incorrect display by specifying a format option like this:

'ui':{

            'showRangeValues':true,

            'step':0.1,

            'format': {'fractionDigits': 1}

[Levi Kennedy]

Thanks Daniel - This seems to fix the problem for me!   Interestingly, I think I would have tried this combination of parameters if the default precision of the range values wasn't already 1 digit by default.  I really appreciate your quick response.