Google Charts - столбчатая диаграмма, не отображающая более 50 записей для отображения - PullRequest
0 голосов
/ 02 мая 2020

У меня есть панель инструментов для отображения записей в таблице со столбчатой ​​диаграммой с фильтром категорий. хорошо, это работает, если у меня есть записи около 50 ...

, но если записи выше 50 или 60 или 150, то и таблица, и столбец диаграммы не генерируются для отображения ... отображается просто пустым без ошибок.

как отобразить все свои записи в виде таблицы и столбца диаграммы. иногда у меня тоже может быть 200 записей ...

Мой код ниже:

<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 () {
                drawMainDashboard2();
            });

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

var categoryPicker = new google.visualization.ControlWrapper({
  'controlType': 'CategoryFilter',
  'containerId': 'categoryPicker_div3',
  'state': {'setValues': ['Mark']},
  'options': {
    'filterColumnIndex': 1,
    'ui': {
        'label': 'Customer Selection:',
        'labelStacking': 'vertical',
        'allowTyping': true,
        'allowMultiple': false
    }
  }
  });

  var columnchrt = new google.visualization.ChartWrapper({
  'chartType': 'ColumnChart',
  'containerId': 'div_ListTankCapacity2',
  'options': {
       annotations: {
          },
         width: 850,
         height: 500,
         legend: { position: 'top', maxLines: 2 },
         bar: { groupWidth: '50%' },
         isStacked: true,
         explorer: {keepInBounds: true, maxZoomIn: 10.0},
  },
  'view': {'columns': [0,4,5]}
  });

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

    var data = google.visualization.arrayToDataTable([

     ['Cus_id', 'Customer', 'Branch', 'Type', 'Avail bal','req-bal', 'Total', { role: 'annotation' } ],
     <c:forEach items="${columnCustomerList}" var="entry">
        [ '${entry.key}','${entry.value2}', '${entry.value3}', '${entry.value4}', ${entry.value5}, ${entry.value6}, ${entry.value7}, ${entry.value7}],
      </c:forEach>
   ]);              


dashboard.bind([categoryPicker], [columnchrt, table]);
dashboard.draw(data);
}
</script>

<div id="dashboard_division2" style="clear:left; display:inline-block; width:100%; float:left; margin-top:5px;background-color: #5c5c5c; padding-top: 10px;">
    <div class="float_left panel" style="float:left; width:58%; padding:0px;">
        <div id="div_ListTankCapacity2"></div>
    </div>
    <div class="float_left panel" style="width:40%; padding:0px;">
        <div class="table_bbar" style="background-color:#27ae60;" >
            <div id="categoryPicker_div2" style="float:left; padding-right:25px;"></div>
            <div id="categoryPicker_div3" ></div>
        </div>
        <div id="table_div2"></div>
    </div>
</div>

Пример данных:

+---------+------------------+--------------+--------+-----------+---------+-------+
| CUS_ID  | CUSTOMER         | BRANCH       | TYPE   | AVAIL_BAL | REQ_BAL | TOTAL |
+---------+------------------+--------------+--------+-----------+---------+-------+
| CS00005 | Mark             | MU          | SBA-BG |        15 |       82 |    97 |
| CS00006 | Mark             | PS          | SBA-BG |       211 |        3 |   214 |
| CS00007 | Mark             | PS          | SBA-IG |       155 |        1 |   156 |
| CS00008 | Mark             | PS          | SBA-FG |       220 |        0 |   220 |
| CS00009 | Mark             | PS          | SBA-FG |       220 |        0 |   220 |
| CS00011 | Mark             | VA          | SBA-FG |    212.17 |   7.8300 |   220 |
| CS00012 | Mark             | VA          | SBA-FG |     92.92 |   127.08 |   220 |
| CS00013 | Mark             | VA          | SBA-FG |    195.86 |   24.139 |   220 |
| CS00014 | Mark             | VA          | SBA-IG |    208.31 |   11.689 |   220 |
| CS00019 | Mark             | BL          | SBA-IG |        25 |        6 |    31 |
| CS00020 | Andrew           | VJ          | SBA-BG |    14.735 |   6.2650 |    21 |
| CS00021 | Andrew           | BL          | SBA-BG |    32.457 |   18.543 |    51 |
| CS00022 | Andrew           | Cni         | SBA-BG |    32.488 |   18.512 |    51 |
| CS00031 | Mark             | VA          | SBA-IG |    28.583 |   24.417 |    53 |
| CS00032 | Mark             | BPL         | SBA-IG |         0 |       79 |    79 |
| CS00033 | Carter           | Cni         | SBA-IG |     8.508 |   10.492 |    19 |
| CS00034 | Mark             | SAI         | SBA-BG |    222.71 |   -2.710 |   220 |
| CS00037 | Mark             | SAI         | SBA-BG |       203 |       17 |   220 |
Добро пожаловать на сайт PullRequest, где вы можете задавать вопросы и получать ответы от других членов сообщества.
...