chartRangeFilter, how to use the statechange inProgress property

[tcimagliawave]

I am trying to use the inProgress property of the statechange event for the chartRangeFilter but I can't seem to get it to work the way I believe it should work.  The ready event works as expected but whenever I try to use the inProgress property of the statechange event I get an undefined result.  Could someone please explain how to use the inProgress property of the chartRangeFilter to determine when the user has finished changing the chart range.

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

           var programmaticSlider = new google.visualization.ControlWrapper({
             'controlType': 'ChartRangeFilter',
             'containerId': 'control_div',
             'options': { 'filterColumnIndex': 0,
                   'ui': {'chartType':'LineChart' , 'chartOptions':{ 'height':175,'width':400, 'chartArea':{'height':'50%' , 'width':'80%'}  ,'hAxis':{ 'format':'M/d','gridlines':{'color':'#333'} }, 'vAxis':{ 'gridlines':      
                    {'color':'#333'},'minorGridlines':{'color':'#333'} } } }      
                }
           });

           var programmaticChart  = new google.visualization.ChartWrapper({
               'chartType': 'LineChart',
               'containerId': 'chart_div',
               'options': {
               'width': 400,
               'height': 400,
               //'backgroundColor':{'stroke':'black','strokeWidth':3},
               'title':'Merritt Way',
               'legend':'none',
           'hAxis':{'title':'Time (UTC)','format':'M/d \n HH:mm','gridlines':{'color':'#333'},'textStyle':{'fontSize':10} },
               'vAxis':{'title':'ft NAVD88','gridlines':{'color':'#333'},'minorGridlines':{'color':'#333'},'minValue':-3,'maxValue':3},
               //'backgroundColor':'#f4f3f3',
               'chartArea':{'height':'80%' , 'width':'80%' , 'backgroundColor':{'stroke':'black','strokeWidth':3}}
             }

            });

      google.visualization.events.addListener(programmaticSlider, 'ready',readyHandler);

          dashboard.bind(programmaticSlider,programmaticChart);
          dashboard.draw(MW_data);
          google.visualization.events.addListener(programmaticSlider,'statechange',changeHandler);
         
          function readyHandler()
              {
                          var controlState = programmaticSlider.getState();
                          alert(controlState.range.start);
                          alert(controlState.range.end);
              }

          function changeHandler(e)
              {
                 if( e.inProgress == 'true')
                  {
                     alert('True');
                  }
               
                  if( e.inProgress == 'false')
                   {
                      alert('False');
                   }  
              }

[Jan Waga]

Confirmed, exactly the same problem - https://developers.google.com/chart/interactive/docs/gallery/controls#events_2 docs here says "inProgress" being a property of the ChartRangeFilter StateChangeEvent.

Always undefined, thought.

Is there a way to tell if a user has finished interacting with this control?

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

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

[Daniel LaLiberte]

There is an internal test of the 'rangechange' event having an inProgress property, but the test was disabled in October 2021, with the comment (by me) that the test seems to not be coordinated with actual events.  The 'rangechange' event is not documented, and I don't know exactly what its behavior should be, but you might try it.    There is a chart event type of 'rangechange' and the ChartRangeFilter has an internal chart, so perhaps one would need to access the internal chart to get at its rangechange event, but there is no api for that at the moment.

Anyway, something broke along the way during the many refactorings over the last few years.  It would help to figure out which older version of Google Charts still works correctly so we can narrow it down a bit.  If you could test loading version 50, 49, etc, that would be great.

--
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 view this discussion on the web visit https://groups.google.com/d/msgid/google-visualization-api/8783a826-49c2-4ef4-bc3b-e27cc6a04b1fn%40googlegroups.com.

--

• Daniel LaLiberte  • SWE  • Cambridge MA  • dlaliberte@Google.com

[Jan Waga]

I've tried for a bit to get to 'rangechange' event and failed.

Then I've tried to pinpoint charts lib versions as you asked.

The 'statechangeevent.inProgress' WORKS correctly in 52, it DOES NOT in 51, 50 and 49, WORKS again in 48.

Thanks for your help with this one.