Question

Местоположение компании GR1 GR2 GR3 GR4 GR5

1 NY C ЗАКАЗЧИКИ 0 0 13 5 19

2 CALI ORG 270 210 0 32 51

3 CALI CUSTOMERS 35,942 39 0 50 126

4 WD C ЗАКАЗЧИКИ 0 0 35 52 88

5 WD C ЗАКАЗЧИКИ 44.507 0 25 18 88

6 NJ ORG 0 0 54 22 28

7 TXS CUSTOMERS 0 0 0 10 11

Расположение фильтра: [NY C, CALI, WD C, NJ, TXS, UT, GA]

Filter Company: [CUSTOMERS, ORG]

IN ColumnChart-STACKED для CALI и WD C показывает два столбца. там я хочу показать в виде одного столбца накопленное значение как CUSTOMERS, так и ORG. но для таблицы нормально показывать два CALI и WD C.

Мой код

<script type="text/javascript" src="https://www.gstatic.com/charts/loader.js"></script>
        <script type="text/javascript">

google.charts.load('current', {
  packages: ['corechart', 'table', 'gauge', 'controls']
}).then(function () {
    drawMainDashboard();
});

function drawMainDashboard() {
var dashboard = new google.visualization.Dashboard(
document.getElementById('dashboard_division1'));

var categoryPicker = new google.visualization.ControlWrapper({
'controlType': 'CategoryFilter',
'containerId': 'categoryPicker_div',
'options': {
  'filterColumnIndex': 1,
  'ui': {
    'labelStacking': 'vertical',
    'label': 'Company Selection:',
    'allowTyping': false,
    'allowMultiple': false
  }
}
});

var categoryPicker1 = new google.visualization.ControlWrapper({
'controlType': 'CategoryFilter',
'containerId': 'categoryPicker_div1',
'options': {
  'filterColumnIndex': 0,
  'ui': {
    'labelStacking': 'vertical',
    'label': 'Location Selection:',
    'allowTyping': false,
    'allowMultiple': false
  }
}
});

var columnchrt = new google.visualization.ChartWrapper({
'chartType': 'ColumnChart',
'containerId': 'chart_div',
'options': {
     title: "Locations  charts today",
     width: 850,
     height: 500,
     legend: { position: 'top', maxLines: 2 },
     bar: { groupWidth: '70%' },
     isStacked: true,
     explorer: {keepInBounds: true, maxZoomIn: 10.0}
},
'view': {'columns': [0,2,3,4,5,7]}
});

var table = new google.visualization.ChartWrapper({
'chartType': 'Table',
'containerId': 'table_div',
'options': {
    showRowNumber: true,
    width: '100%',
    height: '100%',
    allowHtml: true
},
'view': {'columns': [0,1,2,3,4,5,6]}
});

var data = google.visualization.arrayToDataTable([
 ['Location', 'Company', 'Beverage', 'Food', 'Industrial', 'Un-Filled', 'Total', { role: 'annotation' } ],
 <c:forEach items="${GrsByCompanyList}" var="entry">
    [ '${entry.key}', '${entry.value7}', ${entry.value1}, ${entry.value2}, ${entry.value3}, ${entry.value4}, ${entry.value5}, ${entry.value6} ],
  </c:forEach>
]); 

dashboard.bind([categoryPicker,categoryPicker1], [columnchrt, table]);
dashboard.draw(data);
}

<div id="dashboard_division" style="clear:left; display:inline-block; width:100%; float:left; margin-top:5px;">

<div class="float_left panel" style="float:left; width:60%; padding:0px;">
    <div id="chart_div"></div>
</div>
<div class="float_left panel" style="width:38%; padding:0px;">
    <div class="table_bbar" style="background-color:#27ae60;" >
        <h4>by Locations as on Today</h4>
        <div id="categoryPicker_div" style="right:15px; position:absolute;"></div>
        <div id="categoryPicker_div1" ></div>
    </div>

    <div id="table_div"></div>

</div>
</div>

WhiteHat · Answer 1 · 08 апреля 2020

причина, по которой есть два столбца для CALI и WD C,
, состоит в том, что в таблице данных есть две строки.

Чтобы иметь один столбец, вам нужно агрегировать таблицу данных по местоположению.

это можно сделать, удалив диаграмму с приборной панели,
затем нарисовать ее отдельно, когда сработает событие 'ready' таблицы.
, чтобы сделать это, вам необходимо удалить view из столбчатой диаграммы.

при возникновении события готовности агрегировать таблицу данных.
вам также потребуется построить представление данных для таблицы агрегированных данных
, чтобы добавить общую аннотацию.

см. Следующий рабочий фрагмент ...

google.charts.load('current', {
  packages: ['corechart', 'table', 'gauge', 'controls']
}).then(function () {
  drawMainDashboard();
});

function drawMainDashboard() {
  var dashboard = new google.visualization.Dashboard(
  document.getElementById('dashboard_division1'));

  var categoryPicker = new google.visualization.ControlWrapper({
  'controlType': 'CategoryFilter',
  'containerId': 'categoryPicker_div',
  'options': {
    'filterColumnIndex': 1,
    'ui': {
      'labelStacking': 'vertical',
      'label': 'Company Selection:',
      'allowTyping': false,
      'allowMultiple': false
    }
  }
  });

  var categoryPicker1 = new google.visualization.ControlWrapper({
  'controlType': 'CategoryFilter',
  'containerId': 'categoryPicker_div1',
  'options': {
    'filterColumnIndex': 0,
    'ui': {
      'labelStacking': 'vertical',
      'label': 'Location Selection:',
      'allowTyping': false,
      'allowMultiple': false
    }
  }
  });

  var columnchrt = new google.visualization.ChartWrapper({
  'chartType': 'ColumnChart',
  'containerId': 'chart_div',
  'options': {
       title: "Locations  charts today",
       width: 850,
       height: 500,
       legend: { position: 'top', maxLines: 2 },
       bar: { groupWidth: '70%' },
       isStacked: true,
       explorer: {keepInBounds: true, maxZoomIn: 10.0}
  }
  });

  var table = new google.visualization.ChartWrapper({
  'chartType': 'Table',
  'containerId': 'table_div',
  'options': {
      showRowNumber: true,
      width: '100%',
      height: '100%',
      allowHtml: true
  },
  'view': {'columns': [0,1,2,3,4,5,6]}
  });

  google.visualization.events.addListener(table, 'ready', function () {
    // get filtered data table from table chart
    var dt = table.getDataTable();

    // build aggregation and view columns
    var aggColumns = [];
    var viewColumns = [0];
    for (var i = 2; i < dt.getNumberOfColumns(); i++) {
      if (i !== dt.getNumberOfColumns() - 2) {
        if (dt.getColumnType(i) === 'number') {
          if (dt.getColumnRole(i) === 'annotation') {
            addAnnColumn(i);
          } else {
            addAggColumn(i);
            viewColumns.push(i - 1);
          }
        }
      }
    }
    function addAggColumn(index) {
      aggColumns.push({
        aggregation: google.visualization.data.sum,
        column: index,
        label: dt.getColumnLabel(index),
        type: dt.getColumnType(index)
      });
    }
    function addAnnColumn(index) {
      viewColumns.push({
        calc: 'stringify',
        role: 'annotation',
        sourceColumn: aggColumns.length,
        type: 'string'
      });
    }

    // aggregate data table
    var agg = google.visualization.data.group(
      dt,
      [0],
      aggColumns
    );

    // create agg data view to add annotation
    var view = new google.visualization.DataView(agg);
    view.setColumns(viewColumns);

    // draw chart
    columnchrt.setDataTable(view);
    columnchrt.draw();
  });


  var data = google.visualization.arrayToDataTable([
    ['Location', 'Company', 'Beverage', 'Food', 'Industrial', 'Un-Filled', 'Total', { role: 'annotation' } ],
    ['NYC', 'CUSTOMERS', 0, 0, 13, 5, 19, 19],
    ['CALI', 'ORG', 270, 210, 0, 32, 51, 51],
    ['CALI', 'CUSTOMERS', 35.942, 39, 0, 50, 126, 126],
    ['WDC', 'CUSTOMERS', 0, 0, 35, 52, 88, 88],
    ['WDC', 'CUSTOMERS', 44.507, 0, 25, 18, 88, 88],
    ['NJ', 'ORG', 0, 0, 54, 22, 28, 28],
    ['TXS', 'CUSTOMERS', 0, 0, 0, 10, 11, 11]
  ]);

  dashboard.bind([categoryPicker,categoryPicker1], [table]);
  dashboard.draw(data);
}

<script src="https://www.gstatic.com/charts/loader.js"></script>
<div id="dashboard_division" style="clear:left; display:inline-block; width:100%; float:left; margin-top:5px;">

<div class="float_left panel" style="float:left; width:60%; padding:0px;">
    <div id="chart_div"></div>
</div>
<div class="float_left panel" style="width:38%; padding:0px;">
    <div class="table_bbar" style="background-color:#27ae60;" >
        <h4>by Locations as on Today</h4>
        <div id="categoryPicker_div" style="right:15px; position:absolute;"></div>
        <div id="categoryPicker_div1" ></div>
    </div>

    <div id="table_div"></div>

</div>
</div>

РЕДАКТИРОВАТЬ

в столбцах аннотаций, нам нужно вручную вычислить итоговое значение .. .

viewColumns.push({
  calc: function (dt, row) {
    var total = 0;
    for (var c = 1; c < dt.getNumberOfColumns(); c++) {
      total += dt.getValue(row, c);
    }
    return total.toFixed(0);
  },
  role: 'annotation',
  type: 'string'
});

см. Следующий рабочий фрагмент ...

google.charts.load('current', {
  packages: ['corechart', 'table', 'gauge', 'controls']
}).then(function () {
  drawMainDashboard();
});

function drawMainDashboard() {
  var dashboard = new google.visualization.Dashboard(
  document.getElementById('dashboard_division1'));

  var categoryPicker = new google.visualization.ControlWrapper({
  'controlType': 'CategoryFilter',
  'containerId': 'categoryPicker_div',
  'options': {
    'filterColumnIndex': 1,
    'ui': {
      'labelStacking': 'vertical',
      'label': 'Company Selection:',
      'allowTyping': false,
      'allowMultiple': false
    }
  }
  });

  var categoryPicker1 = new google.visualization.ControlWrapper({
  'controlType': 'CategoryFilter',
  'containerId': 'categoryPicker_div1',
  'options': {
    'filterColumnIndex': 0,
    'ui': {
      'labelStacking': 'vertical',
      'label': 'Location Selection:',
      'allowTyping': false,
      'allowMultiple': false
    }
  }
  });

  var columnchrt = new google.visualization.ChartWrapper({
  'chartType': 'ColumnChart',
  'containerId': 'chart_div',
  'options': {
       title: "Locations  charts today",
       width: 850,
       height: 500,
       legend: { position: 'top', maxLines: 2 },
       bar: { groupWidth: '70%' },
       isStacked: true,
       explorer: {keepInBounds: true, maxZoomIn: 10.0}
  }
  });

  var table = new google.visualization.ChartWrapper({
  'chartType': 'Table',
  'containerId': 'table_div',
  'options': {
      showRowNumber: true,
      width: '100%',
      height: '100%',
      allowHtml: true
  },
  'view': {'columns': [0,1,2,3,4,5,6]}
  });

  google.visualization.events.addListener(table, 'ready', function () {
    // get filtered data table from table chart
    var dt = table.getDataTable();

    // build aggregation and view columns
    var aggColumns = [];
    var viewColumns = [0];
    for (var i = 2; i < dt.getNumberOfColumns(); i++) {
      if (i !== dt.getNumberOfColumns() - 2) {
        if (dt.getColumnType(i) === 'number') {
          if (dt.getColumnRole(i) !== 'annotation') {
            addAggColumn(i);
            viewColumns.push(i - 1);
          }
        }
      }
    }
    function addAggColumn(index) {
      aggColumns.push({
        aggregation: google.visualization.data.sum,
        column: index,
        label: dt.getColumnLabel(index),
        type: dt.getColumnType(index)
      });
    }

    // aggregate data table
    var agg = google.visualization.data.group(
      dt,
      [0],
      aggColumns
    );

    viewColumns.push({
      calc: function (dt, row) {
        var total = 0;
        for (var c = 1; c < dt.getNumberOfColumns(); c++) {
          total += dt.getValue(row, c);
        }
        return total.toFixed(0);
      },
      role: 'annotation',
      type: 'string'
    });

    // create agg data view to add annotation
    var view = new google.visualization.DataView(agg);
    view.setColumns(viewColumns);

    // draw chart
    columnchrt.setDataTable(view);
    columnchrt.draw();
  });


  var data = google.visualization.arrayToDataTable([
    ['Location', 'Company', 'Beverage', 'Food', 'Industrial', 'Un-Filled', 'Total', { role: 'annotation' } ],
    ['NYC', 'CUSTOMERS', 0, 0, 13, 5, 19, 19],
    ['CALI', 'ORG', 270, 210, 0, 32, 51, 51],
    ['CALI', 'CUSTOMERS', 35.942, 39, 0, 50, 126, 126],
    ['WDC', 'CUSTOMERS', 0, 0, 35, 52, 88, 88],
    ['WDC', 'CUSTOMERS', 44.507, 0, 25, 18, 88, 88],
    ['NJ', 'ORG', 0, 0, 54, 22, 28, 28],
    ['TXS', 'CUSTOMERS', 0, 0, 0, 10, 11, 11]
  ]);

  dashboard.bind([categoryPicker,categoryPicker1], [table]);
  dashboard.draw(data);
}

<script src="https://www.gstatic.com/charts/loader.js"></script>
<div id="dashboard_division" style="clear:left; display:inline-block; width:100%; float:left; margin-top:5px;">

<div class="float_left panel" style="float:left; width:60%; padding:0px;">
    <div id="chart_div"></div>
</div>
<div class="float_left panel" style="width:38%; padding:0px;">
    <div class="table_bbar" style="background-color:#27ae60;" >
        <h4>by Locations as on Today</h4>
        <div id="categoryPicker_div" style="right:15px; position:absolute;"></div>
        <div id="categoryPicker_div1" ></div>
    </div>

    <div id="table_div"></div>

</div>
</div>

Google Chart - диаграмма с накоплением данных, два фильтра

Пожалуйста, войдите или зарегистрируйтесь чтобы ответить на этот вопрос.

1 Ответ

Пожалуйста, войдите или зарегистрируйтесь что бы добавить комментарий.

Google Chart - диаграмма с накоплением данных, два фильтра

Пожалуйста, войдите или зарегистрируйтесь чтобы ответить на этот вопрос.

1 Ответ

Пожалуйста, войдите или зарегистрируйтесь что бы добавить комментарий.

Похожие темы