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>