javascript - Google Dashboard - chartRangeFilter , how to know when slider controls move, then stop -


i can add event handler chartrangefilter controlwrapper find out when sliders moving:

google.visualization.events.addlistener(control, 'statechange', selecthandler); 

and have handler it:

function selecthandler(e){      var state = control.getstate();      console.log(state);      if (state != 'inprogress') {             currentleftsliderpos = control.getstate().range.start;             currentrightsliderpos = control.getstate().range.end;              console.log(currentleftsliderpos);             console.log(currentrightsliderpos);     } }  

it's not working , know why. control.getstate()returns object , not want. know there way check if sliders 'inprogress', can't figure out have read on how that. or check 'ready' status? don't want reload graph data until slider has stopped because have large dataset.

use inprogress property on argument sent event handler

it has following properties...

{   "inprogress": false,   "startchanged": true,   "endchanged": false } 

see following working snippet...

google.charts.load('current', {    callback: drawdashboard,    packages: ['corechart', 'controls']  });    function drawdashboard() {    var data = new google.visualization.datatable();    data.addcolumn('date', 'x');    data.addcolumn('number', 'y0');    data.addrows([      [new date(2017, 6, 12), 9],      [new date(2017, 6, 13), 8],      [new date(2017, 6, 14), 10],      [new date(2017, 6, 15), 8],      [new date(2017, 6, 16), 22],      [new date(2017, 6, 17), 25],      [new date(2017, 6, 18), 24],      [new date(2017, 6, 19), 14],      [new date(2017, 6, 20), 12],      [new date(2017, 6, 21), 8],      [new date(2017, 6, 22), 9],      [new date(2017, 6, 23), 4]    ]);      var dashboard = new google.visualization.dashboard(      document.getelementbyid('dashboard')    );      var chart = new google.visualization.chartwrapper({      charttype: 'areachart',      containerid: 'chart'    });      var control = new google.visualization.controlwrapper({      controltype: 'chartrangefilter',      containerid: 'control',      options: {        filtercolumnindex: 0      }    });      google.visualization.events.addlistener(control, 'statechange', function (eventargs) {      document.getelementbyid('info').innerhtml = 'control moving = ' + eventargs.inprogress;    });      dashboard.bind(control, chart);    dashboard.draw(data);  }
<script src="https://www.gstatic.com/charts/loader.js"></script>  <div id="dashboard">    <div id="chart"></div>    <div id="control"></div>  </div>  <div id="info"></div>


Comments

Popular posts from this blog

php - Vagrant up error - Uncaught Reflection Exception: Class DOMDocument does not exist -

vue.js - Create hooks for automated testing -

Add new key value to json node in java -