Google Chartsのグラフ範囲フィルタLineChart

Question

Google Charts Line Chartを使用していますが、チャート範囲フィルタにバインドする際に問題があります。 コンテナ：

<div id="dashboard_div"> 
       <!--Divs that will hold each control and chart--> 
       <div id="control_div" style="width: 100%; height: 100%"></div> 
       <div id="daily_container_count_lineChart" style="width: 100%; height: 100%"></div> 
      </div> 

JSの一部を：

var chart = new google.visualization.ChartWrapper({ 
    chartType: 'LineChart', 
    containerId: 'daily_container_count_lineChart', 
    options: { 
     theme: 'maximized' 
    } 
}); 

var control = new google.visualization.ControlWrapper({ 
    controlType: 'ChartRangeFilter', 
    containerId: 'control_div', 
    options: { 
     filterColumnIndex: 0 
    } 
}); 

var dashboard = new google.visualization.Dashboard(document.getElementById('dashboard_div')); 
dashboard.bind([control], [chart]); 
dashboard.draw(data); 

私は、Webページ内のダッシュボードの代わりに、次のエラーを取得する。ここ

は、私がしようとしているものです。コンソールにエラーはありません。

つ以上の参加者が

あなたはむしろあなたがしてdraw（）メソッドを呼び出し

たDataTableまたはDataViewのよりもデータの間違ったタイプとdraw（）メソッドと呼ばれる）（描画することができませんでしたデータの間違ったタイプではなく、DataTableのか、DataViewの

私はちょうど下のようなグラフのレンジフィルターなしで折れ線グラフを描画しようとすると、それが出て、エラーを正常に動作します：

ChartRangeFilterずに単に線グラフを描く：

データをロード

var dailyContainerChart = new google.charts.Line(document.getElementById('daily_container_count_lineChart')); 
dailyContainerChart.draw(data, {allowHtml: true, width: '100%', height: '100%'}); 

を：

var getDailyContainerLineData = function (sourceData) 
{ 
var data = new google.visualization.DataTable(); 
data.addColumn('date', 'Date'); 
data.addColumn('number', 'VIC - STH CRT'); 
data.addColumn('number', 'NSW - MINTO'); 
data.addColumn('number', 'QLD - PINKENBA'); 
data.addColumn('number', 'WA - HAZELMERE'); 

for(k =1;k< sourceData.getNumberOfColumns();k++) 
{ 
    var rowData = new Array(); 
    var rowStart = sourceData.getColumnLabel(k); 
    rowData.push(new Date(rowStart)); 
    for(l =0;l<sourceData.getNumberOfRows()-1;l++) // we don't want the 'total' row from the daily container table 
    { 
     var test = sourceData.getValue(l, k); 
     if(typeof test === 'string') 
     { 
      var date = Date.parse(test); 
      rowData.push(date); 
     } 
     else 
     { 
      rowData.push(test); 
     } 

    } 

    data.addRow(rowData); 
} 

return data; 
} 

上方から返されるデータは、ダッシュボードを描画するために使用されLineGraphを使用します。

私の質問は以下のとおりです。 なぜ私は私が唯一の折れ線グラフ

を描くとき、​​私はフィルタにChartRangeFilerを得ることができます私はChartRangeFilterと折れ線グラフを描画しようとすると、間違ったデータ型エラーを取得しますが、いない午前同時に異なるデータソースを持つ2つのグラフ（テーブルと折れ線グラフ）

乾杯。

Answer 1

ダッシュボードでは、通常のグラフと同じデータ形式を使用できます。
提供されたサンプルデータからDataTableを構築すると、うまくいくようです。
loadステートメントが表示されませんでした。ダッシュボードの描画時に必要なパッケージがすべてロードされていることを確認してください。あなたが複数のデータ・ソースへの単一のコントロールをバインドすることはできませんが、2番目の質問については

...
は、あなたが他の情報源を制御するために 'statechange'イベントを使用することができます。 `data`が定義されていて、サンプルを共有することができ

次の例を参照してください...

google.charts.load('current', { 
 
    callback: function() { 
 
    var data = new google.visualization.DataTable(); 
 
    data.addColumn('date', 'Date'); 
 
    data.addColumn('number', 'VIC - STH CRT'); 
 
    data.addColumn('number', 'NSW - MINTO'); 
 
    data.addColumn('number', 'QLD - PINKENBA'); 
 
    data.addColumn('number', 'WA - HAZELMERE'); 
 

 
    data.addRow([new Date('04/01/2001'), 3, 4, 7, 6]); 
 
    data.addRow([new Date('04/02/2001'), 0, 9, 8, 7]); 
 
    data.addRow([new Date('04/03/2001'), 9, 9, 0, 7]); 
 
    data.addRow([new Date('04/04/2001'), 5, 5, 5, 2]); 
 
    data.addRow([new Date('04/05/2001'), 6, 7, 1, 1]); 
 
    data.addRow([new Date('04/06/2001'), 4, 4, 1, 9]); 
 
    data.addRow([new Date('04/07/2001'), 4, 5, 9, 0]); 
 

 
    var dataOther = new google.visualization.DataTable(); 
 
    dataOther.addColumn('date', 'Date'); 
 
    dataOther.addColumn('number', 'HLS - FLORENCE'); 
 
    dataOther.addColumn('number', 'FGT - GAY'); 
 
    dataOther.addColumn('number', 'KNX - FULTON'); 
 
    dataOther.addColumn('number', 'TN - VOLS'); 
 

 
    dataOther.addRow([new Date('04/01/2001'), 1, 8, 5, 2]); 
 
    dataOther.addRow([new Date('04/02/2001'), 2, 9, 6, 3]); 
 
    dataOther.addRow([new Date('04/03/2001'), 3, 0, 7, 4]); 
 
    dataOther.addRow([new Date('04/04/2001'), 4, 1, 8, 5]); 
 
    dataOther.addRow([new Date('04/05/2001'), 5, 2, 9, 6]); 
 
    dataOther.addRow([new Date('04/06/2001'), 6, 3, 0, 7]); 
 
    dataOther.addRow([new Date('04/07/2001'), 7, 4, 1, 8]); 
 

 
    var chart = new google.visualization.ChartWrapper({ 
 
     chartType: 'LineChart', 
 
     containerId: 'daily_container_count_lineChart', 
 
     options: { 
 
     theme: 'maximized' 
 
     } 
 
    }); 
 

 
    var control = new google.visualization.ControlWrapper({ 
 
     controlType: 'ChartRangeFilter', 
 
     containerId: 'control_div', 
 
     options: { 
 
     filterColumnIndex: 0 
 
     } 
 
    }); 
 

 
    var table = new google.visualization.ChartWrapper({ 
 
     chartType: 'Table', 
 
     containerId: 'table_div', 
 
     dataTable: dataOther, 
 
     options: { 
 
     sortColumn: 1 
 
     } 
 
    }); 
 

 
    google.visualization.events.addListener(control, 'statechange', function() { 
 
     var state = control.getState(); 
 
     var view = new google.visualization.DataView(dataOther); 
 
     view.setRows(view.getFilteredRows([{column: 0, minValue: state.range.start, maxValue: state.range.end}])); 
 
     table.setDataTable(view); 
 
     table.draw(); 
 
    }); 
 

 
    var dashboard = new google.visualization.Dashboard(document.getElementById('dashboard_div')); 
 
    dashboard.bind([control], [chart]); 
 
    dashboard.draw(data); 
 
    table.draw(); 
 
    }, 
 
    packages: ['controls', 'corechart', 'table'] 
 
});

<script src="https://www.gstatic.com/charts/loader.js"></script> 
 
<div id="dashboard_div"> 
 
    <div id="control_div" style="width: 100%; height: 100%"></div> 
 
    <div id="daily_container_count_lineChart" style="width: 100%; height: 100%"></div> 
 
</div> 
 
<div id="table_div"></div>