Google图表，汇总/分组过滤的DataTable [英] Google charts, aggregate/group a filtered DataTable

查看：471
本文介绍了Google图表，汇总/分组过滤的DataTable的处理方法，对大家解决问题具有一定的参考价值，需要的朋友们下面随着小编来一起学习吧！

问题描述

我有一个DataTable，一个DateRangeFilter和一个聚合对象。
我希望我可以使用DateRangeFilter过滤DataTable中的数据，并限制聚合到FILTERED DataTable。但这不是发生。
我做错了事（可能忘记刷新/绘制），或者类似的东西是不可能的。



我的代码在这里：
https://jsfiddle.net/v0w5ehsc/ 

  var dashboard = new google.visualization.Dashboard（document.getElementById（'daterange_div'））; 
 dashboard.bind（slider，tableChart）; 
 dashboard.draw（dataAll）; 
 
 var grouped_data = google.visualization.data.group（
 dataAll，
 [0，2]，
 [
 {'column'：3 ，'aggregation'：google.visualization.data.sum，'type'：'number'} 
] 
）;


解决方案

您只能将一个数据表绑定到仪表板/过滤。



以聚合过滤的数据表...


  1. 等待 ol>

    查看下面的示例，建立上一个问题... 



      google.charts.load 'current'，{callback：drawVisualization，packages：['corechart'，'table'，'controls']}）; function drawVisualization（）{var data = new google.visualization.DataTable（{cols：[{id： dat_ym'，label：'Start Date'，type：'date'}，{id：'user-id'，label：'User-Id'，type：'string'}，{id：'customer-id' label：'Customer-Id'，type：'string'}，{id：'s_minutes'，label：'minutes'，type：'number'}] 2016，01，01'）}，{v：'44836'}，{v：'67205'}，{v：1122}]，{c：[{v：new Date（' ）}，{v：'86495'}，{v：'67205'}，{v：332}]，{c：[{v：new Date（'2016，01，01'）} '44836'}，{v：'228626'}，{v：0}]，{c：[{v：new Date（'2016，01，01'）}，{v：'86495'}， v：'228626'}，{v：334}]}，{c：[{v：new Date（'2016，02，01'）}，{v：'44836'}，{v：'67205'} ，{v：554}]，{c：[{v：new Date（'2016，02，01'）}，{v：'86495'}，{v：'67205'}，{v：0} ]}，{c：[{v：new Date（'2016，02，01'）}，{v：'44836'}，{v：'228626'}，{v：0}]} [{v：new Date（'2016，02，01'）}，{v：'86495'}，{v：'228626'}，{v：544}]}， var options = {hAxis：{title：''，textStyle：{fontSize：'13'}，textPosition：'in'}，vAxis：{title：''，textStyle：{fontSize：'10'}} 'bars'，legend：{position：'top'，textStyle：{color：'black'，fontSize：14}}，isStacked：true}; // build dashboard var dashboard = new google.visualization.Dashboard（document.getElementById（'dashboard-div'））; var table = new google.visualization.ChartWrapper（{chartType：'Table'，containerId：'table-div'，options：{allowHtml：true}}）; var dateSlider = new google.visualization.ControlWrapper（{controlType：'DateRangeFilter'，containerId：'slider-div'，options：{filterColumnIndex：0}}）; // table'ready'event google.visualization.events.addListener（table，'ready'，function（）{//按照日期分组数据，客户var grouping_data = google.visualization.data.group（//获取数据表ChartWrapper table.getDataTable（），[0，2]，[{'column'：3，'aggregation'：google.visualization.data.sum，'type'：'number'}]）; .sort（[{column：0}，{column：1}]）; //获取唯一客户var custGroup = google.visualization.data.group（data，[2]）; //构建客户数据表var custData = new google.visualization.DataTable（{cols：[{id：'dat_ym'，label：'Start Date'，type：'date'}，]}）; //为每个客户添加（var i = 0; i  

     < script src =https://www.gstatic.com/charts/loader.js>< / script>< div id =dashboard-div> < div id =slider-div>< / div> < div id =table-div>< / div> < br /> < div id =agg-div>< / div>< / div>

    $ b

    I have a DataTable, a DateRangeFilter and a aggregation object. I was hoping I could use DateRangeFilter to filter the data in the DataTable and to limit the aggregation to the FILTERED DataTable. But that's not happening. Am I doing something wrong (maybe forgot to refresh/draw), or something like that is not possible.

    My code is here: https://jsfiddle.net/v0w5ehsc/

        var dashboard = new google.visualization.Dashboard(document.getElementById('daterange_div'));
dashboard.bind(slider, tableChart);
dashboard.draw(dataAll);

var grouped_data = google.visualization.data.group(
    dataAll,
    [0, 2],
    [
        {'column': 3, 'aggregation': google.visualization.data.sum, 'type': 'number'}
    ]
);

    解决方案

    you can only bind one data table to a dashboard / filter.

    in order to aggregate the filtered data table...

    1. Wait for the 'ready' event on the ChartWrapper
    2. Aggregate the filtered data table from the ChartWrapper

    see following example building off previous question... 

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

function drawVisualization() {
  var data = new google.visualization.DataTable({
    cols: [
      {id: 'dat_ym', label: 'Start Date', type: 'date'},
      {id: 'user-id', label: 'User-Id', type: 'string'},
      {id: 'customer-id', label: 'Customer-Id', type: 'string'},
      {id: 's_minutes', label: 'minutes', type: 'number'}
    ],
    rows: [
      {c:[{v: new Date('2016, 01, 01')}, {v: '44836'}, {v: '67205'}, {v: 1122} ]},
      {c:[{v: new Date('2016, 01, 01')}, {v: '86495'}, {v: '67205'}, {v: 332} ]},
      {c:[{v: new Date('2016, 01, 01')}, {v: '44836'}, {v: '228626'}, {v: 0} ]},
      {c:[{v: new Date('2016, 01, 01')}, {v: '86495'}, {v: '228626'}, {v: 334} ]},
      {c:[{v: new Date('2016, 02, 01')}, {v: '44836'}, {v: '67205'}, {v: 554} ]},
      {c:[{v: new Date('2016, 02, 01')}, {v: '86495'}, {v: '67205'}, {v: 0} ]},
      {c:[{v: new Date('2016, 02, 01')}, {v: '44836'}, {v: '228626'}, {v: 0} ]},
      {c:[{v: new Date('2016, 02, 01')}, {v: '86495'}, {v: '228626'}, {v: 544} ]},
    ]
  });

  var options = {
    hAxis: {title: '', textStyle: { fontSize: '13' }, textPosition: 'in'},
    vAxis: {title: '', textStyle: { fontSize: '10' }},
    seriesType: 'bars',
    legend: {position: 'top', textStyle: {color: 'black', fontSize: 14}},
    isStacked: true
  };

  // build dashboard
  var dashboard = new google.visualization.Dashboard(document.getElementById('dashboard-div'));
  var table = new google.visualization.ChartWrapper({
    chartType: 'Table',
    containerId: 'table-div',
    options: {
      allowHtml: true
    }
  });
  var dateSlider = new google.visualization.ControlWrapper({
    controlType: 'DateRangeFilter',
    containerId: 'slider-div',
    options: {
      filterColumnIndex: 0
    }
  });

  // Table 'ready' event
  google.visualization.events.addListener(table, 'ready', function () {
    // group data by date, customer
    var grouped_data = google.visualization.data.group(
      // get data table from ChartWrapper
      table.getDataTable(),
      [0, 2],
      [
        {'column': 3, 'aggregation': google.visualization.data.sum, 'type': 'number'}
      ]
    );

    // sort grouped data
    grouped_data.sort([{column: 0},{column: 1}]);

    // get unique customers
    var custGroup = google.visualization.data.group(
      data,
      [2]
    );

    // build customer data table
    var custData = new google.visualization.DataTable({
      cols: [
        {id: 'dat_ym', label: 'Start Date', type: 'date'},
      ]
    });

    // add column for each customer
    for (var i = 0; i < custGroup.getNumberOfRows(); i++) {
      custData.addColumn(
        {label: custGroup.getValue(i, 0), type: 'number'}
      );
    }

    // add row for each date / customer
    var rowDate;
    var rowIndex;
    for (var i = 0; i < grouped_data.getNumberOfRows(); i++) {
      if (rowDate !== grouped_data.getValue(i, 0).getTime()) {
        rowDate = grouped_data.getValue(i, 0).getTime();
        rowIndex = custData.addRow();
        custData.setValue(rowIndex, 0, new Date(rowDate));
      }
      for (var x = 1; x < custData.getNumberOfColumns(); x++) {
        if (custData.getColumnLabel(x) === grouped_data.getValue(i, 1)) {
          custData.setValue(rowIndex, x, grouped_data.getValue(i, 2));
        }
      }
    }

    // draw agg table
    new google.visualization.ChartWrapper({
      chartType: 'Table',
      containerId: 'agg-div',
      dataTable: custData,
      options: {
        allowHtml: true
      }
    }).draw();
  });

  // draw dashboard
  dashboard.bind(dateSlider, table);
  dashboard.draw(data);
}

    <script src="https://www.gstatic.com/charts/loader.js"></script>
<div id="dashboard-div">
  <div id="slider-div"></div>
  <div id="table-div"></div>
  <br/>
  <div id="agg-div"></div>
</div>

    这篇关于Google图表，汇总/分组过滤的DataTable的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！

查看全文
相关文章
其他开发最新文章
热门教程
热门工具
登录 关闭
扫码关注1秒登录
发送“验证码”获取 | 15天全站免登陆