Google图表：在仪表板上获取条形图的列数 [英] Google Chart: Get Column Count in Dashboard for Bar Chart

问题描述

我有如下所示的JSON数据，用于在Google图表中构建仪表板。
我想绘制一个月度条形图，其中x轴为scan_time（月），y轴为该月的tag_id计数。 tag_ids可以重复。

I have a JSON data like below to build a dashboard in google chart. I would like to draw a monthly bar chart with x-axis as scan_time (Month) and y-axis as count of tag_id's that comes into that month. The tag_ids can be duplicate.

以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",
       }
    ]

类似

Month       Count
    Sept        2
    Oct         1
    Nov         1

推荐答案

将JSON加载到数据表中后，

once JSON is loaded into a DataTable,

使用数据处理方法-> group（）

use the Data Manipulation Method --> group()

返回汇总的数据表

，请参见以下工作片段，

group方法将第一列转换为 month字符串，

并汇总每个 month的标记ID计数

see following working snippet,
the group method converts the first column to a 'month' string,
and aggregates the count of tag id's for each 'month'

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>

编辑

使用DataView对行进行自定义排序

use a DataView to custom sort the rows

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

使用视图绘制表格图表，以及其他任何图表...

use view to draw the Table chart, and any other charts...

以下代码段包括ColumnChart ...

the following snippet includes a 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>

编辑2 >

使用ChartWrapper，将视图设置为 dataTable 属性，例如

using a ChartWrapper, set the view as the dataTable property, e.g.

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

请参阅以下工作摘要...

see following working snippet...

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>

这篇关于Google图表：在仪表板上获取条形图的列数的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！