Google-Diagramme, wie mit 3-Spalten-Recordset umgehen?

Question

Ich habe einen MySQL-Cord wie:

Date;Customer;Turnover 
2016-03-01;Cust1;120 
2016-03-01;Cust2;120 
2016-04-01;Cust1;130 
2016-04-01;Cust2;125 
2016-05-01;Cust1;135 
2016-05-01;Cust2;110 

Mein Ziel ein gestapeltes Balkendiagramm mit Jahr/Monat auf der x-Achse zu haben ist (Art des Datums, so kann ich Datumsfilter verwenden) und die Kundenwert gestapelt übereinander. Außerdem muss ich die Kunden filtern, die ich vor dem Display verstecken möchte.

Ich habe stundenlang versucht, die Daten zu gruppieren/aggregieren, auch mit Dashboard-Filter-Steuerelementen gespielt, aber ich habe noch keinen Durchbruch erzielt, also hoffte ich, dass jemand mir einen Hinweis geben könnte, wo ich anfangen soll.

Thanx

Answer 1

um das Datum auf der x-Achse angezeigt wird, müssen Sie eine Spalte für jeden Kunden

1. Gruppe der Daten nach Datum, Kunden
2. Sortieren nach Datum gruppierten Daten, Kunden
3. Erhalten Sie einzigartige Kundennummer des
4. neue Tabelle Bauen Sie mit Spalte für jeden Kunden

siehe Beispiel von der mitgelieferten Geige genommen ...

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

 
function drawVisualization() { 
 
    var data = new google.visualization.DataTable({ 
 
    cols: [ 
 
     {id: 'dat_ym', label: 'Start Date', type: 'date'}, 
 
     {id: 'user-id', label: 'User-Id', type: 'string'}, 
 
     {id: 'customer-id', label: 'Customer-Id', type: 'string'}, 
 
     {id: 's_minutes', label: 'minutes', type: 'number'} 
 
    ], 
 
    rows: [ 
 
     {c:[{v: new Date('2016, 01, 01')}, {v: '44836'}, {v: '67205'}, {v: 1122} ]}, 
 
     {c:[{v: new Date('2016, 01, 01')}, {v: '86495'}, {v: '67205'}, {v: 332} ]}, 
 
     {c:[{v: new Date('2016, 01, 01')}, {v: '44836'}, {v: '228626'}, {v: 0} ]}, 
 
     {c:[{v: new Date('2016, 01, 01')}, {v: '86495'}, {v: '228626'}, {v: 334} ]}, 
 
     {c:[{v: new Date('2016, 02, 01')}, {v: '44836'}, {v: '67205'}, {v: 554} ]}, 
 
     {c:[{v: new Date('2016, 02, 01')}, {v: '86495'}, {v: '67205'}, {v: 0} ]}, 
 
     {c:[{v: new Date('2016, 02, 01')}, {v: '44836'}, {v: '228626'}, {v: 0} ]}, 
 
     {c:[{v: new Date('2016, 02, 01')}, {v: '86495'}, {v: '228626'}, {v: 544} ]}, 
 
    ] 
 
    }); 
 

 
    // group data by date, customer 
 
    var grouped_data = google.visualization.data.group(
 
    data, 
 
    [0, 2], 
 
    [ 
 
     {'column': 3, 'aggregation': google.visualization.data.sum, 'type': 'number'} 
 
    ] 
 
); 
 

 
    // sort grouped data 
 
    grouped_data.sort([{column: 0},{column: 1}]); 
 

 
    // get unique customers 
 
    var custGroup = google.visualization.data.group(
 
    data, 
 
    [2] 
 
); 
 

 
    // build customer data table 
 
    var custData = new google.visualization.DataTable({ 
 
    cols: [ 
 
     {id: 'dat_ym', label: 'Start Date', type: 'date'}, 
 
    ] 
 
    }); 
 

 
    // add column for each customer 
 
    for (var i = 0; i < custGroup.getNumberOfRows(); i++) { 
 
    custData.addColumn(
 
     {label: custGroup.getValue(i, 0), type: 'number'} 
 
    ); 
 
    } 
 

 
    // add rows for each date 
 
    var rowDate; 
 
    var rowIndex; 
 
    for (var i = 0; i < grouped_data.getNumberOfRows(); i++) { 
 
    // add row when date changes 
 
    if (rowDate !== grouped_data.getValue(i, 0).getTime()) { 
 
     rowDate = grouped_data.getValue(i, 0).getTime(); 
 
     rowIndex = custData.addRow(); 
 
     custData.setValue(rowIndex, 0, new Date(rowDate)); 
 
    } 
 

 
    // find customer column 
 
    for (var x = 1; x < custData.getNumberOfColumns(); x++) { 
 
     if (custData.getColumnLabel(x) === grouped_data.getValue(i, 1)) { 
 
     custData.setValue(rowIndex, x, grouped_data.getValue(i, 2)); 
 
     } 
 
    } 
 
    } 
 

 
    var options = { 
 
    hAxis: {title: '', textStyle: { fontSize: '13' }, textPosition: 'in'}, 
 
    vAxis: {title: '', textStyle: { fontSize: '10' }}, 
 
    seriesType: 'bars', 
 
    legend: {position: 'top', textStyle: {color: 'black', fontSize: 14}}, 
 
    isStacked: true 
 
    }; 
 

 
    var tableTE = new google.visualization.Table(document.getElementById('table_div_te')); 
 
    tableTE.draw(data, {showRowNumber: true, frozenColumns: 1, width: '100%', height: '300'}); 
 

 
    var tableTEAgg = new google.visualization.Table(document.getElementById('table_div_teagg')); 
 
    tableTEAgg.draw(custData, {showRowNumber: true, frozenColumns: 1, width: '100%', height: '300'}); 
 

 
    var chart = new google.visualization.ComboChart(document.getElementById('chart_div')); 
 
    chart.draw(custData, options); 
 
}

<script src="https://www.gstatic.com/charts/loader.js"></script> 
 
<div id="table_div_te"></div> 
 
<div id="table_div_teagg"></div> 
 
<div id="chart_div" style="width: 1600px; height: 300px;"></div>