Google Visualisierung Chart durchschnittliche Anzahl der Verkaufs Arten von Jahr

Question

Ich habe folgendes Datatable:

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

Was möchte ich tun, ist Diagramm die durchschnittliche Anzahl von ‚Barverkauf‘ Sale Arten für jedes Jahr. Ich kann leicht eine Datatable mit der Gesamtzahl der Verkäufe für alle Verkaufsarten pro Jahr erhalten, wie folgt:

var groupedData = google.visualization.data.group(
    dataTableSales, 
    [ { column: 2, modifier: getYearForRow, type: 'string', label: 'Year' } ], 
    [ { column: 6, aggregation: google.visualization.data.count, type: 'number', label: 'Total Sales' } ]); 

Ist dies möglich, indem eine Gruppe mit? Wenn nicht, was ist der beste Weg, dies zu erreichen?

Answer 1

, wenn Sie die Zählungen von Jahr haben, group die Daten unter Verwendung ...

google.visualization.data.avg

siehe folgende Arbeits Schnipsel ...

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: 'Year', 
 
    type: 'string', 
 
    calc: function (dt, row) { 
 
     return dt.getValue(row, 0).getFullYear().toString(); 
 
    } 
 
    }]; 
 
    var avgColumns = []; 
 
    var sumColumns = []; 
 
    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; 
 
     } 
 
    }); 
 
    avgColumns.push({ 
 
     aggregation: google.visualization.data.avg, // <-- avg aggregation 
 
     column: colIndex - 1, 
 
     label: saleType, 
 
     type: 'number' 
 
    }); 
 
    sumColumns.push({ 
 
     aggregation: google.visualization.data.sum, 
 
     column: colIndex - 1, 
 
     label: saleType, 
 
     type: 'number' 
 
    }); 
 
    }); 
 

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

 
    var sum = google.visualization.data.group(
 
    view, 
 
    [0], 
 
    sumColumns 
 
); 
 

 
    var avg = google.visualization.data.group(
 
    sum, 
 
    [{column: 0, type: 'string', modifier: function() {return 'Average';}}], 
 
    avgColumns 
 
); 
 

 
    var table = new google.visualization.ChartWrapper({ 
 
    chartType: 'Table', 
 
    containerId: 'table_div', 
 
    dataTable: avg 
 
    }); 
 
    table.draw(); 
 
}

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

---

EDIT

durchschnittlichen Umsatz nach Art zu erhalten pro Jahr ...

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: 'Year', 
 
    type: 'string', 
 
    calc: function (dt, row) { 
 
     return dt.getValue(row, 0).getFullYear().toString(); 
 
    } 
 
    }]; 
 
    var sumColumns = []; 
 
    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; 
 
     } 
 
    }); 
 
    sumColumns.push({ 
 
     aggregation: google.visualization.data.sum, 
 
     column: colIndex - 1, 
 
     label: saleType, 
 
     type: 'number' 
 
    }); 
 
    }); 
 
    var colIndex = viewColumns.push({ 
 
    label: 'total', 
 
    type: 'number', 
 
    calc: function (dt, row) { 
 
     return 1; 
 
    } 
 
    }); 
 
    sumColumns.push({ 
 
    aggregation: google.visualization.data.sum, 
 
    column: colIndex - 1, 
 
    label: 'total', 
 
    type: 'number' 
 
    }); 
 

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

 
    var sum = google.visualization.data.group(
 
    view, 
 
    [0], 
 
    sumColumns 
 
); 
 

 
    var avgColumns = [0]; 
 
    for (var i = 1; i < sum.getNumberOfColumns() - 1; i++) { 
 
    // use function to lock the value of --> i 
 
    addAvgCol(i); 
 
    } 
 

 
    function addAvgCol(colIndex) { 
 
    avgColumns.push({ 
 
     label: sum.getColumnLabel(colIndex), 
 
     type: sum.getColumnType(colIndex), 
 
     calc: function (dt, row) { 
 
     var typeAvg; 
 
     if (dt.getValue(row, sum.getNumberOfColumns() - 1) !== 0) { 
 
      typeAvg = dt.getValue(row, colIndex)/dt.getValue(row, sum.getNumberOfColumns() - 1); 
 
     } else { 
 
      typeAvg = null; 
 
     } 
 
     return typeAvg; 
 
     } 
 
    }); 
 
    } 
 

 
    var viewAvg = new google.visualization.DataView(sum); 
 
    viewAvg.setColumns(avgColumns); 
 

 
    var tableSum = new google.visualization.ChartWrapper({ 
 
    chartType: 'Table', 
 
    containerId: 'table_sum', 
 
    dataTable: sum 
 
    }); 
 
    tableSum.draw(); 
 

 
    var tableAvg = new google.visualization.ChartWrapper({ 
 
    chartType: 'Table', 
 
    containerId: 'table_avg', 
 
    dataTable: viewAvg 
 
    }); 
 
    tableAvg.draw(); 
 
}

div { 
 
    padding: 4px; 
 
}

<script src="https://www.gstatic.com/charts/loader.js"></script> 
 
<div>Sum</div> 
 
<div id="table_sum"></div> 
 
<div>Avg</div> 
 
<div id="table_avg"></div>