Google 시각화 대시 보드에서 날짜를 사용하여 원형 차트를 필터링하는 방법

Question

해당 연도의 판매 테이블에서 가져온 데이터 그룹이 있습니다. 그룹에는 판매 유형 (예 : 현금, 임대 등)과 날짜 필드의 집계 인 Count가 있습니다.

난 쉽게 파이 차트를 얻을 수 있습니다. 이제 사용자가 연도를 선택하여 원형 차트를 변경할 수 있도록하는 카테고리 선택기를 추가하려고합니다. 어떻게해야합니까?

여기에 지금까지 내 코드입니다 :

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

차트 및 카테고리 선택기 렌더링 얻을 나는 수를 선택하고 차트가 예상대로 기계가 작동하는지 제시 업데이트됩니다. 는, PieChart에 대한

Answer 1

data format

는
만이 집계를 사용하는

하나의 옵션이 될 하나의 시리즈가있을 수 있습니다 다른 핵심 데이터 행에 있어야 차트
보다는 열 다르다. ..

1. 년, 카테고리,
2. 카테고리 카운트 카운트

,691 363,210

당신은 "모든 연도"의 선택을 허용 할 경우 두 번째에만 필요, 또는
사용 ->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>