Simulación en Google Chart moviendo su control deslizante Rango de gráfico después de algunos segundos

ingrese la descripción de la imagen aquí Quiero mover un gráfico utilizando su control deslizante de filtro de rango de gráfico. Cuando se presiona el botón de reproducción, luego el control deslizante de rango, que está fijo, el rango de uno o dos minutos se mueve con un intervalo de tiempo específico. Compartiré mi código contigo. Quiero algo como la simulación.

var chart = new google.visualization.ChartWrapper({ chartType: 'LineChart', containerId: 'chart_div', options: { //title: 'Phase 1 -Tower 44', hAxis: { format: ' yyyy-MMM-dd hh:mm', title: 'Time', textStyle: { color: 'black', fontSize: 10, fontName: 'Arial', bold: false, italic: false }, gridlines: { color: 'grey' }, titleTextStyle: { color: 'black', fontSize: 10, fontName: 'Arial', bold: true, italic: false } }, vAxes: { 0: { viewWindowMode: 'explicit', title: 'Line Current (A)', textStyle: { color: '#ED0A0A' }, titleTextStyle: { color: 'ED0A0A' }, viewWindow: { min: 0, max: 700 }, ticks: [0, 100, 200, 300, 400, 500, 600, 700], gridlines: { color: 'transparent' } }, 1: { title: 'Line Temperature (°C)', textStyle: { color: '#004BA5' }, gridlines: { color: 'grey' }, viewWindow: { min: 0, max: 500 }, ticks: [0, 50, 100, 150, 200, 250, 300, 350, 400, 450, 500], titleTextStyle: { color: '#004BA5' } } }, series: { 0: { targetAxisIndex: 0 }, 1: { targetAxisIndex: 1 } }, chartArea: { width: '85%', height: 500 }, //lineWidth: 3, //lineDashStyle: [1, 2, 2], 'width': '85%', 'height': 620, curveType: 'function', colors: ['#ED0A0A', '#004BA5', '#EDB80F'], legend: { position: 'none', }, pointsVisible: true } }); 

entonces mi código de envoltorio de control está debajo

 var control = new google.visualization.ControlWrapper({ controlType: 'ChartRangeFilter', containerId: 'control_div', options: { filterColumnIndex: 0, ui: { chartOptions: { height: 40, chartArea: { width: '90%', }, 'hAxis': { 'baselineColor': 'none', format: " hh:mm:ss" } // , 'gridlines': { 'color': 'none' } } } }, }); 

y el evento de clic del botón de reproducción es algo como esto …

  $("#play").click(function () { setInterval(function () { var state = stateStatus.getState(); control.setOption('ui.chartOptions.hAxis.viewWindow.min', state.range.start); control.setOption('ui.chartOptions.hAxis.viewWindow.max', state.range.end); control.setState(controll.getState()); control.draw(); }, 500); 

Vea drawDateRange en el siguiente fragmento de trabajo …

 google.charts.load('current', { callback: function () { drawChart(); $(window).resize(drawChart); }, packages: ['controls', 'corechart'] }); function drawChart() { var oneDay = (1000 * 60 * 60 * 24); var oneWeek = (oneDay * 7); var startDate = new Date(2017, 0, 1); var endDate = new Date(); var data = new google.visualization.DataTable(); data.addColumn('date', 'TimeStamp'); data.addColumn('number', 'Value'); for (var i = startDate.getTime(); i < endDate.getTime(); i = i + oneDay) { data.addRow([ new Date(i), (2 * ((i - startDate.getTime()) / oneDay) + 8) // y = 2x + 8 ]); } var controlDate = new google.visualization.ControlWrapper({ controlType: 'ChartRangeFilter', containerId: 'control-date', options: { filterColumnLabel: 'TimeStamp', ui: { chartOptions: { hAxis: { format: 'dd MMM yyyy' } } } } }); function drawDateRange(rangeStart) { var drawAgain = true; var rangeEnd = new Date(rangeStart.getTime() + oneWeek); if (rangeEnd.getTime() > endDate.getTime()) { rangeEnd = endDate; drawAgain = false; } controlDate.setState({ range: { start: rangeStart, end: rangeEnd } }); controlDate.draw(); if (drawAgain) { setTimeout(function () { drawDateRange(rangeEnd); }, 200); } else { setTimeout(function () { controlDate.setState({}); controlDate.draw(); }, 200); } } function drawTimeRange() { var state = controlDate.getState(); controlTime.setState({ range: { start: state.range.start, end: state.range.end } }); controlTime.draw(); } $("#play").click(function () { drawDateRange(startDate); }); google.visualization.events.addListener(controlDate, 'ready', drawTimeRange); google.visualization.events.addListener(controlDate, 'statechange', drawTimeRange); var controlTime = new google.visualization.ControlWrapper({ controlType: 'ChartRangeFilter', containerId: 'control-time', options: { filterColumnLabel: 'TimeStamp', ui: { chartOptions: { hAxis: { format: 'hh:mm:ss' } } } } }); var chart = new google.visualization.ChartWrapper({ chartType: 'LineChart', containerId: 'chart-line' }); var dash = new google.visualization.Dashboard(document.getElementById('dashboard')); dash.bind([controlDate, controlTime], [chart]); dash.draw(data); }