Google Visualilization PieChart：無効な列インデックス... [0-1]の範囲の整数である必要があります。しかし、正しいデータはまだ表示されています

Question

すべて私の円グラフで動作しているようです。新しい日付を選択するたびに、「無効な列インデックス... [0〜1]の範囲の整数である必要があります。」すべての適切なデータが表示されますが、それでもこのエラーが表示されます。チャートは、フィルタ

これは試してみダッシュボードを原因にグラフをバインドする必要はありません'statechange'
にダイナミックviewで描かれているので、

google.charts.load('current', {'packages':['corechart', 'controls', 'timeline']}); 
google.charts.setOnLoadCallback(drawAmount); 



function drawAmount() { 
var query = new google.visualization.Query("https://docs.google.com/spreadsheets/d/1m155RLnguM5hmg3zBnmeXb3nUiNKHaP6H-dYmKpXBKU/gviz/tq?gid=974830734"); 
query.send(amountGraph); 
} 

function amountGraph(response) { 
if (response.isError()) { 
    alert('Error in query: ' + response.getMessage() + ' ' + response.getDetailedMessage()); 
    return; 
} 

var data = response.getDataTable(); 

var columnsTable = new google.visualization.DataTable(); 
columnsTable.addColumn('number', 'colIndex'); 
columnsTable.addColumn('string', 'colLabel'); 
var initState = {selectedValues: []}; 
// put the columns into this data table (skip column 0) 
for (var i = 1; i < data.getNumberOfColumns(); i++) { 
    columnsTable.addRow([i, data.getColumnLabel(i)]); 
    // you can comment out this next line if you want to have a default selection other than the whole list 
    initState.selectedValues.push(data.getColumnLabel(i)); 
} 
// you can set individual columns to be the default columns (instead of populating via the loop above) like this: 
// initState.selectedValues.push(data.getColumnLabel(4)); 

var amChart = new google.visualization.ChartWrapper({ 
    chartType: 'PieChart', 
    containerId: 'amoChart', 
    dataTable: data, 
    options: { 
     title: 'Num. of Activities', 
     width: 600, 
     height: 400 
    } 
}); 

var amColumnFilter = new google.visualization.ControlWrapper({ 
    controlType: 'CategoryFilter', 
    containerId: 'amoFilter', 
    dataTable: columnsTable, 
    options: { 
     filterColumnLabel: 'colLabel', 
     ui: { 
      label: 'Date', 
      allowTyping: false, 
      allowMultiple: false, 
      allowNone: false, 
      selectedValuesLayout: 'aside' 
     } 
    }, 
    state: initState 
}); 

function setChartView() { 
    var state = amColumnFilter.getState(); 
    var row; 
    var view = { 
     columns: [0] 
    }; 
    for (var i = 0; i < state.selectedValues.length; i++) { 
     row = columnsTable.getFilteredRows([{column: 1, value: state.selectedValues[i]}])[0]; 
     view.columns.push(columnsTable.getValue(row, 0)); 
    } 
    // sort the indices into their original order 
    view.columns.sort(function (a, b) { 
     return (a - b); 
    }); 
    amChart.setView(view); 
    amChart.draw(); 
} 

google.visualization.events.addListener(amColumnFilter, 'statechange', setChartView); 

setChartView(); 
amColumnFilter.draw(); 
var dashboard = new google.visualization.Dashboard(
    document.getElementById('amount')); 
dashboard.bind(amColumnFilter, amChart); 
} 

Answer 1

問題がdashboard.bind

から来ていますグラフを再描画するには、view

グラフはすぐに再表示されるため、 setChartView

によって描かれただけで、これが役に立てば幸い

google.charts.load('current', {'packages':['corechart', 'controls', 'timeline']}); 
 
google.charts.setOnLoadCallback(drawAmount); 
 

 
function drawAmount() { 
 
    var query = new google.visualization.Query("https://docs.google.com/spreadsheets/d/1m155RLnguM5hmg3zBnmeXb3nUiNKHaP6H-dYmKpXBKU/gviz/tq?gid=974830734"); 
 
    query.send(amountGraph); 
 
} 
 

 
function amountGraph(response) { 
 
    if (response.isError()) { 
 
    alert('Error in query: ' + response.getMessage() + ' ' + response.getDetailedMessage()); 
 
    return; 
 
    } 
 

 
    var data = response.getDataTable(); 
 

 
    var columnsTable = new google.visualization.DataTable(); 
 
    columnsTable.addColumn('number', 'colIndex'); 
 
    columnsTable.addColumn('string', 'colLabel'); 
 
    var initState = {selectedValues: []}; 
 

 
    // put the columns into this data table (skip column 0) 
 
    for (var i = 1; i < data.getNumberOfColumns(); i++) { 
 
    columnsTable.addRow([i, data.getColumnLabel(i)]); 
 
    // you can comment out this next line if you want to have a default selection other than the whole list 
 
    initState.selectedValues.push(data.getColumnLabel(i)); 
 
    } 
 
    // you can set individual columns to be the default columns (instead of populating via the loop above) like this: 
 
    // initState.selectedValues.push(data.getColumnLabel(4)); 
 

 
    var amChart = new google.visualization.ChartWrapper({ 
 
     chartType: 'PieChart', 
 
     containerId: 'amoChart', 
 
     dataTable: data, 
 
     options: { 
 
      title: 'Num. of Activities', 
 
      width: 600, 
 
      height: 400 
 
     } 
 
    }); 
 

 
    var amColumnFilter = new google.visualization.ControlWrapper({ 
 
     controlType: 'CategoryFilter', 
 
     containerId: 'amoFilter', 
 
     dataTable: columnsTable, 
 
     options: { 
 
      filterColumnLabel: 'colLabel', 
 
      ui: { 
 
       label: 'Date', 
 
       allowTyping: false, 
 
       allowMultiple: false, 
 
       allowNone: false, 
 
       selectedValuesLayout: 'aside' 
 
      } 
 
     }, 
 
     state: initState 
 
    }); 
 

 
    function setChartView() { 
 
     var state = amColumnFilter.getState(); 
 
     var row; 
 
     var view = { 
 
      columns: [0] 
 
     }; 
 
     for (var i = 0; i < state.selectedValues.length; i++) { 
 
      row = columnsTable.getFilteredRows([{column: 1, value: state.selectedValues[i]}])[0]; 
 
      view.columns.push(columnsTable.getValue(row, 0)); 
 
     } 
 
     // sort the indices into their original order 
 
     view.columns.sort(function (a, b) { 
 
      return (a - b); 
 
     }); 
 
     amChart.setView(view); 
 
     amChart.draw(); 
 
    } 
 

 
    google.visualization.events.addListener(amColumnFilter, 'statechange', setChartView); 
 

 
    setChartView(); 
 
    amColumnFilter.draw(); 
 

 
    //don't need this... 
 
    //var dashboard = new google.visualization.Dashboard(
 
     //document.getElementById('amount')); 
 
    //dashboard.bind(amColumnFilter, amChart); 
 
}

<script src="https://www.gstatic.com/charts/loader.js"></script> 
 
<div id="amount"> 
 
    <div id="amoFilter"></div> 
 
    <div id="amoChart"></div> 
 
</div>