Googleグラフのグラフ範囲フィルタの値を変更します

Question

`` enter image description here私は折れ線グラフの2つのチャート範囲フィルタを持っています。 1つは日付用、2つ目はtime.First用です。最初のスライダに関して、他のチャート範囲スライダの値を変更したいのではなく、日付範囲フィルタから日付を選択したいと思います。または、どのようにチャート範囲フィルタの "hAxis"値を設定することができます。前もって感謝します 。

var controll = new google.visualization.ControlWrapper({ 
       controlType: 'ChartRangeFilter', 
       containerId: 'control_div1', 
       options: { 

        filterColumnIndex: 0, 

        ui: { 
         chartOptions: { 
          height: 50, 
          labelStacking: 'vertical', 

          chartArea: { 
           width: '80%', 
          }, 

          'hAxis': { 'baselineColor': 'none', format: "dd MMM yyyy" } 


         } 
        } 
       }, 
       state: { 
        range: { 
         start: new Date(2017, 5, 8, 20, 00, 00, 00), 
         end: new Date(2017, 5, 8, 20, 50, 00, 00) 

         //state: { lowValue: new Date(2017, 5, 5, 20, 00, 00, 00), 
         // highValue: new Date(2017, 5, 13, 20, 50, 00, 00) } 
        } 

       } 
      }); 

および第2の制御ラッパーは時間変化に対して次さ

var control = new google.visualization.ControlWrapper({ 
     controlType: 'ChartRangeFilter', 
     containerId: 'control_div', 
     options: { 

      filterColumnIndex: 0, 

      ui: { 
       chartOptions: { 
        height: 50, 

        chartArea: { 
         width: '80%', 
        }, 

        'hAxis': { 'baselineColor': 'none', format: " hh:mm:ss" } 



       } 
      } 
     }, 


    }); 

Answer 1

は第二に範囲を設定するstateプロパティ値を使用し、その後、第一の制御に'statechange'イベントに

を聴きます

状態を設定した後、コントロールを再描画するようにしてください。

google.visualization.events.addListener(controlDate, 'statechange', function() { 
    var stateDate = controlDate.getState(); 
    controlTime.setState({ 
    range: { 
     start: stateDate.range.start, 
     end: stateDate.range.end 
    } 
    }); 
    controlTime.draw(); 
}); 

---

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

google.charts.load('current', { 
 
    callback: drawChart, 
 
    packages: ['controls', 'corechart'] 
 
}); 
 

 
function drawChart() { 
 
    var data = new google.visualization.DataTable(); 
 
    data.addColumn('date', 'TimeStamp'); 
 
    data.addColumn('number', 'Value'); 
 
    data.addRow([new Date('05/03/2016 12:00:19'), 0]); 
 
    data.addRow([new Date('05/03/2016 12:01:31'), 1]); 
 
    data.addRow([new Date('05/03/2016 12:02:43'), 2]); 
 
    data.addRow([new Date('05/03/2016 12:32:01'), 3]); 
 
    data.addRow([new Date('05/03/2016 12:33:14'), 4]); 
 
    data.addRow([new Date('06/03/2016 11:50:42'), 5]); 
 
    data.addRow([new Date('06/03/2016 11:51:57'), 6]); 
 
    data.addRow([new Date('06/03/2016 11:53:11'), 7]); 
 
    data.addRow([new Date('06/03/2016 11:54:25'), 8]); 
 
    data.addRow([new Date('06/03/2016 11:55:39'), 9]); 
 
    data.addRow([new Date('07/03/2016 15:43:50'), 10]); 
 
    data.addRow([new Date('07/03/2016 15:45:02'), 11]); 
 
    data.addRow([new Date('07/03/2016 15:46:14'), 12]); 
 
    data.addRow([new Date('07/03/2016 15:47:26'), 13]); 
 

 
    var controlDate = new google.visualization.ControlWrapper({ 
 
    controlType: 'ChartRangeFilter', 
 
    containerId: 'control-date', 
 
    options: { 
 
     filterColumnLabel: 'TimeStamp', 
 
     ui: { 
 
     chartOptions: { 
 
      hAxis: { 
 
      format: 'dd MMM yyyy' 
 
      } 
 
     } 
 
     } 
 
    } 
 
    }); 
 

 
    google.visualization.events.addListener(controlDate, 'statechange', function() { 
 
    var stateDate = controlDate.getState(); 
 
    controlTime.setState({ 
 
     range: { 
 
     start: stateDate.range.start, 
 
     end: stateDate.range.end 
 
     } 
 
    }); 
 
    controlTime.draw(); 
 
    }); 
 

 
    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://www.gstatic.com/charts/loader.js"></script> 
 
<div id="dashboard"> 
 
    <div id="control-date"></div> 
 
    <div id="chart-line"></div> 
 
    <div id="control-time"></div> 
 
</div>