У меня есть панель инструментов для отображения записей в таблице со столбчатой диаграммой с фильтром категорий. хорошо, это работает, если у меня есть записи около 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 |