Google Säulendiagramme mit Gruppen

Question

Meine Datenformat -

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

Ich werde einen Filter verwenden von Gruppenspalte getrennten Daten für jeden Monat anzuzeigen.

X-Achse wird Gruppen haben. Y-Achse wird für alle Jahre (2014, 2015, 2016 ...) zählen.

So etwas wie dieses

Ich verwende Google Dashboard für diese. Mein Code-

var dashboard = new google.visualization.Dashboard(document.getElementById('dashboard4_div')); 
var slider = new google.visualization.ControlWrapper({ 
      'controlType': 'CategoryFilter', 
      'containerId': 'filter4_div', 
      'options': { 
      'filterColumnLabel': 'Month', 
      'ui': { 
      'allowTyping': true, 
      'allowMultiple': false, 
      'allowNone': false, 
      'sortValues': false, 
      'label': 'Choose month', 
     } 
      } 
     }); 

var ColumnChart = new google.visualization.ChartWrapper({ 
    'chartType': 'ColumnChart', 
    'containerId': 'chart4_div', 

// How to take in two column values 

}); 
dashboard.bind(slider, ColumnChart); 

     // Draw the dashboard. 
     dashboard.draw(data); 

Ich möchte wissen, wie zwei Charts Spaltenwerte in meinem Diagramm mit Google

Answer 1

hinzuzufügen, da die Datenmanipulation erfordert, bevor das Diagramm zeichnen,
der Kategorie Filter und Diagramm zeichnen unabhängig

die Originaldatentabelle für slider
dann verwenden, wenn entweder die 'ready' oder 'statechange' Ereignisse auf slider auftreten,
Verwendung selectedValues die Zeilen

einmal gefiltert zu filtern, verwenden Sie data.group zu transformieren Jahre aus Zeilen in Spalten

siehe folgende Arbeits Schnipsel ...

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], 
 
     ['A', 7, 'February', 2016], 
 
     ['B', 5, 'February', 2016], 
 
     ['C', 12, 'February', 2015], 
 
     ['A', 20, 'March', 2015], 
 
     ['B', 16, 'March', 2015], 
 
     ['C', 30, 'March', 2016], 
 
     ['A', 14, 'March', 2016], 
 
     ['B', 10, 'March', 2016], 
 
     ['C', 24, 'March', 2015] 
 
    ]); 
 

 
    var slider = new google.visualization.ControlWrapper({ 
 
     'controlType': 'CategoryFilter', 
 
     'containerId': 'filter_div', 
 
     'dataTable': data, 
 
     'options': { 
 
     'filterColumnLabel': 'Month', 
 
     'ui': { 
 
      'allowTyping': true, 
 
      'allowMultiple': false, 
 
      'allowNone': false, 
 
      'sortValues': false, 
 
      'label': 'Choose month', 
 
     } 
 
     } 
 
    }); 
 

 
    google.visualization.events.addListener(slider, 'ready', drawChart); 
 
    google.visualization.events.addListener(slider, 'statechange', drawChart); 
 

 
    function drawChart() { 
 
     var sliderData = new google.visualization.DataView(slider.getDataTable()); 
 
     sliderData.setRows(sliderData.getFilteredRows([{ 
 
     column: 2, 
 
     value: slider.getState().selectedValues[0] 
 
     }])); 
 

 
     // group by 'Group'/'Year' 
 
     var dataGroup = google.visualization.data.group(
 
     sliderData, 
 
     [0, 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: 'Group', 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 ColumnChart = new google.visualization.ChartWrapper({ 
 
     'chartType': 'ColumnChart', 
 
     'containerId': 'chart_div', 
 
     'dataTable': view 
 
     }); 
 
     ColumnChart.draw(); 
 
    } 
 

 
    slider.draw(); 
 
    }, 
 
    packages: ['controls', 'corechart'] 
 
});

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