Линия диаграммы фильтрации Dashboard Google по году

Question

У меня есть таблица данных с количеством продаж автомобилей за последние 3 года. Я хочу создать линейную диаграмму, показывающую тренд продаж за определенный год. Мне нужен элемент select, который позволит пользователям фильтровать продажи по годам.

Моя таблица имеет множество столбцов, в том числе для даты продажи (колонка 0):

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

До сих пор у меня есть:

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

    // Create a line chart, passing some options 
    var lineChart = new google.visualization.ChartWrapper({ 
     'chartType': 'LineChart', 
     'containerId': 'chart_div', 
     'options': { 
     'width': 720, 
     'height': 300 
     } 
    }); 

    dashboard.bind(datePicker, lineChart); 
    dashboard.draw(gDataTableSales); 

Datepicker получить заселена с даты продажи, но мне нужно год. Кроме того, линейная диаграмма не отображает - я получаю сообщение об ошибке: все серии на данной оси должны иметь один и тот же тип данных. Любые указатели на решение будут оценены.

Answer 1

во-первых, нужно агрегировать счетчики для 'sale type'
(по аналогии с this other answer)

после того, как данные были объединены, форматирование столбец даты, как 'yyyy'

затем использовать следующую опцию в 'CategoryFilter'
useFormattedValue: true

---

см следующий рабочий фрагмент кода ...

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

 
    // build view and aggregation columns 
 
    var viewColumns = [{ 
 
    label: dataTableSales.getColumnLabel(0), 
 
    type: dataTableSales.getColumnType(0), 
 
    calc: function (dt, row) { 
 
     return { 
 
     v: dt.getValue(row, 0), 
 
     f: dt.getValue(row, 0).getFullYear().toString() 
 
     }; 
 
    } 
 
    }]; 
 
    var aggColumns = []; 
 
    var saleTypes = dataTableSales.getDistinctValues(1); 
 
    saleTypes.forEach(function (saleType) { 
 
    var colIndex = viewColumns.push({ 
 
     label: saleType, 
 
     type: 'number', 
 
     calc: function (dt, row) { 
 
     return (dt.getValue(row, 1) === saleType) ? 1 : 0; 
 
     } 
 
    }); 
 
    aggColumns.push({ 
 
     aggregation: google.visualization.data.sum, 
 
     column: colIndex - 1, 
 
     label: saleType, 
 
     type: 'number' 
 
    }); 
 
    }); 
 

 
    var view = new google.visualization.DataView(dataTableSales); 
 
    view.setColumns(viewColumns); 
 

 
    var summary = google.visualization.data.group(
 
    view, 
 
    [0], 
 
    aggColumns 
 
); 
 

 
    var formatDate = new google.visualization.DateFormat({ 
 
    pattern: 'yyyy' 
 
    }); 
 
    formatDate.format(summary, 0); 
 

 
    var datePicker = new google.visualization.ControlWrapper({ 
 
    controlType: 'CategoryFilter', 
 
    containerId: 'categoryFilter_div', 
 
    options: { 
 
     filterColumnIndex: 0, 
 
     ui: { 
 
     allowTyping: false, 
 
     allowMultiple: false, 
 
     label: 'Year:', 
 
     labelStacking: 'vertical' 
 
     }, 
 
     useFormattedValue: true 
 
    } 
 
    }); 
 

 
    var lineChart = new google.visualization.ChartWrapper({ 
 
    chartType: 'LineChart', 
 
    containerId: 'chart_div', 
 
    options: { 
 
     width: 720, 
 
     height: 300 
 
    } 
 
    }); 
 

 
    var dashboard = new google.visualization.Dashboard(document.getElementById('dashboard_div')); 
 
    dashboard.bind(datePicker, lineChart); 
 
    dashboard.draw(summary); 
 
}

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