Googleビジュアライゼーションダッシュボードで日付を使用して円グラフをフィルタリングする方法

Question

年の売上表からデータグループを取得しました。グループには、販売タイプ（例：現金、リースなど）と、日付フィールドの集計であるカウントの2つの列があります。

簡単に円グラフを得ることができます。今度は、ユーザーが年を選んで円グラフを変更できるようにするカテゴリピッカーを追加します。どうやってやるの？ここで

は、これまでの私のコードです：

var dashboard = new google.visualization.Dashboard(
    document.getElementById('dashboard_div')); 

var categoryPicker = new google.visualization.ControlWrapper({ 
    'controlType': 'CategoryFilter', 
    'containerId': 'categoryPicker_div', 
    'options': { 
     'filterColumnIndex': 1, 
     'ui': { 
      'labelStacking': 'vertical', 
      'label': 'Year:', 
      'allowTyping': false, 
      'allowMultiple': false 
     } 
    } 
}); 

var groupedData = google.visualization.data.group(
    gDataTableSales, 
    [ { column: 3, type: 'string', label: 'Type' } ], 
    [ { column: 2, aggregation: google.visualization.data.count, type: 'number', label: 'Count' } ]); 

var chart = new google.visualization.ChartWrapper({ 
    chartType: 'PieChart', 
    containerId: 'chart_div' }); 

dashboard.bind([ categoryPicker ], [ chart ]); 
dashboard.draw(groupedData); 

チャートとカテゴリピッカーがレンダリングを取得し、私は数とチャートが期待通り力学が働いていることを示唆して更新されて選択することができます。

Answer 1

円グラフためdata formatは、データが行である必要はなく、列
のみ

一つの選択肢は、2件の集計を使用することであろう一連あり得る
他のコアチャートと異なります。 ..

1. 年、カテゴリー、

をカウントし、

んカテゴリ

あなたは「すべての年」の選択を可能にしたい場合は、2番目にのみ必要とされている、または
使用 - >allowNone: true - デフォルト

の代わりに、ダッシュボードにカテゴリフィルタやチャートを結合され、独立

それらを描く作業スニペット以下を参照してください

---

を描画するデータテーブルを決定するためにフィルタのstatechangeイベントを使用して...

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

 
function drawChart() { 
 
    var dataTableSales = google.visualization.arrayToDataTable([ 
 
    ['Sale Date', 'Sale Type'], 
 
    [new Date(2016, 0, 16), 'cash sale'], 
 
    [new Date(2016, 0, 16), 'cash sale'], 
 
    [new Date(2016, 0, 16), 'leased'], 
 
    [new Date(2016, 0, 16), 'leased'], 
 
    [new Date(2016, 0, 16), 'financed'], 
 
    [new Date(2017, 0, 16), 'cash sale'], 
 
    [new Date(2017, 0, 16), 'cash sale'], 
 
    [new Date(2017, 0, 16), 'cash sale'], 
 
    [new Date(2017, 0, 16), 'financed'], 
 
    [new Date(2016, 0, 17), 'cash sale'], 
 
    [new Date(2016, 0, 17), 'financed'], 
 
    [new Date(2016, 0, 17), 'cash sale'], 
 
    [new Date(2016, 0, 17), 'leased'], 
 
    [new Date(2016, 0, 17), 'financed'], 
 
    [new Date(2017, 0, 17), 'financed'], 
 
    [new Date(2017, 0, 17), 'financed'], 
 
    [new Date(2017, 0, 17), 'cash sale'], 
 
    [new Date(2017, 0, 17), 'financed'], 
 
    [new Date(2016, 0, 18), 'leased'], 
 
    [new Date(2016, 0, 18), 'cash sale'], 
 
    [new Date(2017, 0, 18), 'cash sale'], 
 
    [new Date(2017, 0, 18), 'cash sale'] 
 
    ]); 
 
    dataTableSales.sort({column: 0}); 
 

 
    var dataByYear = google.visualization.data.group(
 
    dataTableSales, 
 
    [{ 
 
     column: 0, 
 
     type: 'string', 
 
     modifier: function (value) { 
 
     return value.getFullYear().toString(); 
 
     } 
 
    }, 1], 
 
    [{ 
 
     column: 1, 
 
     type: 'number', 
 
     aggregation: google.visualization.data.count 
 
    }] 
 
); 
 

 
    var dataAll = google.visualization.data.group(
 
    dataTableSales, 
 
    [1], 
 
    [{ 
 
     column: 1, 
 
     type: 'number', 
 
     aggregation: google.visualization.data.count 
 
    }] 
 
); 
 

 
    var yearPicker = new google.visualization.ControlWrapper({ 
 
    controlType: 'CategoryFilter', 
 
    containerId: 'categoryFilter_div', 
 
    dataTable: dataByYear, 
 
    options: { 
 
     filterColumnIndex: 0, 
 
     ui: { 
 
     allowTyping: false, 
 
     allowMultiple: false, 
 
     caption: 'All Years', 
 
     label: '', 
 
     labelStacking: 'vertical' 
 
     }, 
 
     useFormattedValue: true 
 
    } 
 
    }); 
 
    google.visualization.events.addListener(yearPicker, 'statechange', function() { 
 
    if (yearPicker.getState().selectedValues.length > 0) { 
 
     pieChart.setView({ 
 
     columns: [1, 2], 
 
     rows: dataByYear.getFilteredRows([{ 
 
      column: 0, 
 
      value: yearPicker.getState().selectedValues[0] 
 
     }]) 
 
     }); 
 
     pieChart.setDataTable(dataByYear); 
 
    } else { 
 
     pieChart.setView(null); 
 
     pieChart.setDataTable(dataAll); 
 
    } 
 
    pieChart.draw(); 
 
    }); 
 
    yearPicker.draw(); 
 

 
    var pieChart = new google.visualization.ChartWrapper({ 
 
    chartType: 'PieChart', 
 
    containerId: 'chart_div', 
 
    dataTable: dataAll, 
 
    options: { 
 
     height: 300 
 
    } 
 
    }); 
 
    pieChart.draw(); 
 
}

<script src="https://www.gstatic.com/charts/loader.js"></script> 
 
<div id="categoryFilter_div"></div> 
 
<div id="chart_div"></div>