chartRangeFilter, how to use the statechange inProgress property

20 views
Skip to first unread message

tcimagliawave

unread,
Nov 26, 2022, 9:08:55 AM11/26/22
to Google Visualization API
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');
                   }  
              }
Reply all
Reply to author
Forward
0 new messages