数秒後にグラフの範囲スライダを移動してGoogleグラフでシミュレーションする

Question

enter image description hereチャート範囲フィルタスライダを使用してグラフを移動したいとします。私は画面上に再生ボタンがあるのと同じようなものを持っています。私が再生ボタンを押すと、固定された範囲スライダが特定の時間間隔で移動しています。私はあなたと私のコードを共有します。私はシミュレーションのようなものが欲しい。

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 


     } 
    }); 

その後、私のコントロールのラッパーコードが

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' } 

       } 
      } 
     }, 

    }); 

を下回っていると、ボタンのクリックイベントを再生するには、このようなものです...

$("#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); 

Answer 1

は、次の作業のスニペットでdrawDateRangeを参照してください...

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); 
 
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
 
<script src="https://www.gstatic.com/charts/loader.js"></script> 
 
<div id="dashboard"> 
 
    <button id="play">Play</button> 
 
    <div id="control-date"></div> 
 
    <div id="chart-line"></div> 
 
    <div id="control-time"></div> 
 
</div>