Google Chart：棒グラフのダッシュボードで列数を取得

Question

私はGoogleチャートでダッシュボードを作成するために以下のようなJSONデータを持っています。 私はその月に来るtag_idの数としてscan_time（Month）とy軸としてx軸を持つ月単位の棒グラフを描きたいと思います。 tag_idsは重複している可能性があります。 JSONで

入力データ：

[ 
     { 
      "tag_id":"04:0f", 
      "scan_time":"2016-09-29 06:47:47", 
     }, 
     { 
      "tag_id":"04:0f", 
      "scan_time":"2016-09-29 14:48:42", 
     }, 
     { 
      "tag_id":"99:9n", 
      "scan_time":"2016-10-29 06:47:47", 
     }, 
     { 
      "tag_id":"05:m8", 
      "scan_time":"2016-11-29 06:48:42", 
     } 
    ] 

JSON一度

Month  Count 
    Sept  2 
    Oct   1 
    Nov   1 

Answer 1

のようなものがDataTableのにロードされ、

は、データ操作メソッドを使用 - >group()

を集計されたDataTableを返す

は
グループの方法は、「月」の文字列に
を最初の列を変換し、各「月」

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

 
function drawChart() { 
 
    var data = google.visualization.arrayToDataTable([ 
 
    ['date', 'tag_id'], 
 
    [new Date('2016-09-29 06:47:47'), '04:0f'], 
 
    [new Date('2016-09-29 14:48:42'), '04:0f'], 
 
    [new Date('2016-10-29 06:47:47'), '99:9n'], 
 
    [new Date('2016-11-29 06:48:42'), '05:m8'], 
 
    ]); 
 

 
    var formatDate = new google.visualization.DateFormat({pattern: 'MMMM'}); 
 

 
    var dataGroup = google.visualization.data.group(
 
    data, 
 

 
    // group by column 
 
    [{ 
 
     column: 0, 
 
     label: 'Month', 
 
     modifier: function (val) { 
 
     return formatDate.formatValue(val); 
 
     }, 
 
     type: 'string' 
 
    }], 
 

 
    // agg columns 
 
    [{ 
 
     aggregation: google.visualization.data.count, 
 
     column: 1, 
 
     label: 'Tag Count', 
 
     type: 'number' 
 
    }] 
 
); 
 

 
    var table = new google.visualization.Table(document.getElementById('chart_div')); 
 
    table.draw(dataGroup); 
 
}

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

のタグIDの数を集計し、作業スニペットを次のように表示します

編集

データビューを使用して行をカスタムソートする

var view = new google.visualization.DataView(dataGroup); 
view.setRows([2, 1, 0]); 

表チャートを描画する使用view、および任意の他のチャート...

次のスニペットColumnChartのを含む...

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

 
function drawChart() { 
 
    var data = google.visualization.arrayToDataTable([ 
 
    ['date', 'tag_id'], 
 
    [new Date('2016-09-29 06:47:47'), '04:0f'], 
 
    [new Date('2016-09-29 14:48:42'), '04:0f'], 
 
    [new Date('2016-10-29 06:47:47'), '99:9n'], 
 
    [new Date('2016-11-29 06:48:42'), '05:m8'], 
 
    ]); 
 

 
    var formatDate = new google.visualization.DateFormat({pattern: 'MMMM'}); 
 

 
    var dataGroup = google.visualization.data.group(
 
    data, 
 

 
    // group by column 
 
    [{ 
 
     column: 0, 
 
     label: 'Month', 
 
     modifier: function (val) { 
 
     return formatDate.formatValue(val); 
 
     }, 
 
     type: 'string' 
 
    }], 
 

 
    // agg columns 
 
    [{ 
 
     aggregation: google.visualization.data.count, 
 
     column: 1, 
 
     label: 'Tag Count', 
 
     type: 'number' 
 
    }] 
 
); 
 

 
    var view = new google.visualization.DataView(dataGroup); 
 
    view.setRows([2, 1, 0]); 
 

 
    var chart = new google.visualization.ColumnChart(document.getElementById('chart_div')); 
 
    chart.draw(view); 
 

 
    var table = new google.visualization.Table(document.getElementById('table_div')); 
 
    table.draw(view); 
 
}

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

EDIT 2

をChartWrapperを使用してviewをdataTableプロパティに設定します。

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

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

 
function drawChart() { 
 
    var data = google.visualization.arrayToDataTable([ 
 
    ['date', 'tag_id'], 
 
    [new Date('2016-09-29 06:47:47'), '04:0f'], 
 
    [new Date('2016-09-29 14:48:42'), '04:0f'], 
 
    [new Date('2016-10-29 06:47:47'), '99:9n'], 
 
    [new Date('2016-11-29 06:48:42'), '05:m8'], 
 
    ]); 
 

 
    var formatDate = new google.visualization.DateFormat({pattern: 'MMMM'}); 
 

 
    var dataGroup = google.visualization.data.group(
 
    data, 
 

 
    // group by column 
 
    [{ 
 
     column: 0, 
 
     label: 'Month', 
 
     modifier: function (val) { 
 
     return formatDate.formatValue(val); 
 
     }, 
 
     type: 'string' 
 
    }], 
 

 
    // agg columns 
 
    [{ 
 
     aggregation: google.visualization.data.count, 
 
     column: 1, 
 
     label: 'Tag Count', 
 
     type: 'number' 
 
    }] 
 
); 
 

 
    var view = new google.visualization.DataView(dataGroup); 
 
    view.setRows([2, 1, 0]); 
 

 
    var chart = new google.visualization.ChartWrapper({ 
 
    chartType: 'ColumnChart', 
 
    containerId: 'chart_div', 
 
    dataTable: view 
 
    }); 
 
    chart.draw(); 
 

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

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