如何在Google可视化仪表板中使用日期筛选饼图

我有一个从当年销售表中取得的数据组。该组有两列：销售类型（例如现金，租赁等）和计数，这只是日期字段上的汇总。如何在Google可视化仪表板中使用日期筛选饼图

我可以很容易地得到一个饼图。现在我想添加一个类别选择器，允许用户通过选择一年来更改饼图。我怎样才能做到这一点？

这是到目前为止我的代码：

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

图表和类别选择器中得到呈现，我可以选择计数和图表的更新提示如预期的机制正在工作。

来源

2017-05-09 MoreScratch

的data format一个饼图是从其他核心图表
的数据需要在列，而不是列不同
只能有一个系列

一个选择是使用两个聚合。 ..

年，分类，计数
分类，计数

，如果你想允许“所有年份”的选择，二是只需要，或
使用 - >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>

来源

2017-05-12 17:03:29 WhiteHat

如何在Google可视化仪表板中使用日期筛选饼图

回答

相关问题