Googleのコラムチャートで年間のカテゴリを要約する

Question

私は過去3年間に自動車販売台数のデータテーブルを持っています。私は毎年、 "リース"、 "資金調達"、 "現金販売"の列を持つ縦棒グラフを作成したいと考えています。

マイテーブルには、販売日と販売タイプの2つの列があります。

は、これまでのところ私が持っている：動作しません

var groupedData = google.visualization.data.group(
    googleDataTable, 
    [ { column: 0, modifier: getYearForRow, type: 'string', label: 'Year'} ], 
    [ { column: 1, type: 'string', label: 'Type'} ]); 

が、私はエラーになっています「TypeError例外を：未定義の 『と呼ぶ』プロパティを読み取ることができません」。どのように私はこれを動作させることができます上の任意の提案？

Answer 1

まず、ビュー

作業スニペット以下参照を集約するグループのメソッドを使用し、各販売のタイプについて

を列を持つデータビューを構築...

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

 
function drawChart() { 
 
    var data = 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'] 
 
    ]); 
 

 
    // build view and aggregation columns 
 
    var viewColumns = [{ 
 
    label: 'year', 
 
    type: 'string', 
 
    calc: function (dt, row) { 
 
     return dt.getValue(row, 0).getFullYear().toString(); 
 
    } 
 
    }]; 
 
    var aggColumns = []; 
 
    var saleTypes = data.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(data); 
 
    view.setColumns(viewColumns); 
 

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

 
    var container = document.body.appendChild(document.createElement('div')); 
 
    var chart = new google.visualization.ColumnChart(container); 
 
    chart.draw(summary, { 
 
    legend: { 
 
     position: 'top' 
 
    } 
 
    }); 
 
}

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