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
Post a Comment