Google Säulendiagramm mit zwei Spalten

Question

Wie Sie sich einem column chart nähern, wenn Sie Monat und Jahr haben.

My Daten in diesem Format

['Group','Count','Month','Year'], 
['A',10,'February',2015], 
['B',8,'February',2015], 
['C',15,'February',2016] 

Ziel ist ein Säulendiagramm zu erzeugen, die X-Achse als Monthund Y-Achse als Count. Auf der X-Achse sollte Count seit Jahren nach Monat gruppiert sein. So etwas -

Ich habe versucht, einfach die obigen Daten zu übergeben, um zu sehen, was ich bekommen kann, aber ich bekomme einen Fehler.

Gibt es eine Möglichkeit, Axis die Werte basierend auf dem Jahr nach Monat gruppiert zuzuordnen?

JsFiddle of Google Chart Example

Answer 1

brauchen nur drei Spalten, so etwas wie dieses ...

['Month', '2015', '2016'], 
    ['Jan', 10, 15], 
    ['Feb', 12, 18], 
    ['Mar', 14, 21], 
    ['Apr', 16, 24] 

dann können Sie eine DataView verwenden, um die Anmerkungen hinzufügen, über berechnete Spalten ...

var view = new google.visualization.DataView(data); 
view.setColumns([0, 1, { 
    calc: 'stringify', 
    sourceColumn: 1, 
    type: 'string', 
    role: 'annotation' 
    }, 2, { 
    calc: 'stringify', 
    sourceColumn: 2, 
    type: 'string', 
    role: 'annotation' 
}]); 

siehe folgenden Arbeitsschnipsel ...

google.charts.load('current', { 
 
    callback: function() { 
 
    var data = google.visualization.arrayToDataTable([ 
 
     ['Month', '2015', '2016'], 
 
     ['Jan', 10, 15], 
 
     ['Feb', 12, 18], 
 
     ['Mar', 14, 21], 
 
     ['Apr', 16, 24] 
 
    ]); 
 

 
    var view = new google.visualization.DataView(data); 
 
    view.setColumns([0, 1, { 
 
     calc: 'stringify', 
 
     sourceColumn: 1, 
 
     type: 'string', 
 
     role: 'annotation' 
 
     }, 2, { 
 
     calc: 'stringify', 
 
     sourceColumn: 2, 
 
     type: 'string', 
 
     role: 'annotation' 
 
    }]); 
 

 
    var chart = new google.visualization.ColumnChart(document.getElementById('chart_div')); 
 
    chart.draw(view, {}); 
 
    }, 
 
    packages: ['corechart'] 
 
});

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

EDIT

alle Google-Charts erfordern eine spezifische DataFormat

Bedeutung haben, Manipulation erforderlich, wenn die Daten nicht bereits

in diesem Format existieren, um die Visualisierung Bibliothek bietet einige Data Manipulation Methods, s uch als group()

die verwendet werden könnten, die Daten in das gewünschte Format

1) Gruppe die Daten nach Monat und Jahr
2) ein neues Datentabelle mit dem Monat Spalte
3) zu transformieren, fügen Sie eine Spalte für jedes Jahr aus der gruppierten Tabelle
4) fügen Sie die Zeilen für jeden Monat

folgenden Arbeits Schnipsel zu sehen, die Daten aus der Frage mit ...

google.charts.load('current', { 
 
    callback: function() { 
 
    var data = google.visualization.arrayToDataTable([ 
 
     ['Group', 'Count', 'Month', 'Year'], 
 
     ['A', 10, 'February', 2015], 
 
     ['B', 8, 'February', 2015], 
 
     ['C' , 15, 'February', 2016] 
 
    ]); 
 

 
    // group by month/year 
 
    var dataGroup = google.visualization.data.group(
 
     data, 
 
     [2, 3], 
 
     [{column: 1, aggregation: google.visualization.data.sum, type: 'number', label: 'Count'}] 
 
    ); 
 
    dataGroup.sort([{column: 0},{column: 1}]); 
 

 
    // build final data table 
 
    var yearData = new google.visualization.DataTable({ 
 
     cols: [ 
 
     {label: 'Month', type: 'string'} 
 
     ] 
 
    }); 
 

 
    // add column for each year 
 
    var years = dataGroup.getDistinctValues(1); 
 
    for (var i = 0; i < years.length; i++) { 
 
     yearData.addColumn(
 
     {label: years[i], type: 'number'} 
 
    ); 
 
    } 
 

 
    // add row for each month 
 
    var rowMonth = null; 
 
    var rowIndex = null; 
 
    for (var i = 0; i < dataGroup.getNumberOfRows(); i++) { 
 
     if (rowMonth !== dataGroup.getValue(i, 0)) { 
 
     rowMonth = dataGroup.getValue(i, 0); 
 
     rowIndex = yearData.addRow(); 
 
     yearData.setValue(rowIndex, 0, rowMonth); 
 
     } 
 
     for (var x = 1; x < yearData.getNumberOfColumns(); x++) { 
 
     if (yearData.getColumnLabel(x) === dataGroup.getValue(i, 1).toString()) { 
 
      yearData.setValue(rowIndex, x, dataGroup.getValue(i, 2)); 
 
     } 
 
     } 
 
    } 
 

 
    var view = new google.visualization.DataView(yearData); 
 
    view.setColumns([0, 1, { 
 
     calc: 'stringify', 
 
     sourceColumn: 1, 
 
     type: 'string', 
 
     role: 'annotation' 
 
     }, 2, { 
 
     calc: 'stringify', 
 
     sourceColumn: 2, 
 
     type: 'string', 
 
     role: 'annotation' 
 
    }]); 
 

 
    var container = document.getElementById('chart_div'); 
 
    var chart = new google.visualization.ColumnChart(container); 
 
    chart.draw(view); 
 
    }, 
 
    packages: ['corechart'] 
 
});

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