API Google Charts - Панель инструментов: Скрыть строки в таблице

Я пытаюсь создать панель инструментов с API графиков Google.

Панель управления включает ControlWrapper с типом ChartRangeFilter и двумя ChartWrapper (LineChart и Table). Эта настройка работает нормально, но я хочу добавить одно дополнение.

В LineChart должен отображаться весь набор данных, а таблица - только его часть. Например, у меня есть 10 строк, и в таблице должны отображаться только первые 8.

Это мой текущий ControlWrapper:

control = new google.visualization.ControlWrapper({
 'controlType': 'ChartRangeFilter',
 'containerId': 'control',
 'options': {
 'filterColumnIndex': 0,
 'ui': {
 'chartType': 'LineChart',
 'chartOptions': {
 'chartArea': {'width': '95%'},
 'hAxis': {'baselineColor': 'none'}
 },
 'chartView': {
 'columns': [0,1]
 },
 'minRangeSize': 86400000
 }
 }
});

И это таблица:

chart = new google.visualization.ChartWrapper({
 'chartType': 'Table',
 'containerId': 'table',
 'options': {
 width: 470, 
 height: 340, 
 sortColumn: 0,
 sortAscending: false
 },
 'view': {
 'columns': [0, 1]
 //,'rows': [0,1,2,3,4,5,6]
 }
});

Когда я раскомментирую строку "//," rows ": [0,1,2,3,4,5,6]" в определении таблицы, я получаю сообщение об ошибке при перемещении ползунка ControlWrapper:

Invalid row index 6. Should be in the range [0-5]

Есть ли способ заставить это работать?

Причина в том, что (в этом примере) в последних двух строках находятся только данные в столбце 3, которые отображаются только в LineChart, но не в таблице.

Спасибо заранее!

//редактирование:

Вот пример страницы: http://circlecount.com/test.chart.range.php

Вот код:

<div id="dashboard">
 
 
 
 </div>

Что я хочу получить: - Диаграмма на полный период (10 дней) - Таблица только за первые 7 дней - ControlWrapper в течение всего периода (10 дней), управляя диаграммой и таблицей

Я надеюсь, что моя проблема станет более ясной. Если нет, пожалуйста, напишите мне.

Спасибо заранее!

Update: С идеями jmac я получил его работу со следующей функцией:

google.visualization.events.addListener(control, 'statechange',
 function(event) {
 if (control.getState()["range"]["end"] > myLastRealDate) {
 var myRowsArr = new Array();
 var myTempDate = control.getState()["range"]["start"];
 for (var i=0;i
<p>Здесь вы можете найти рабочий пример: <a href="http://circlecount.com/test.chart.range.php" rel="nofollow noreferrer" target="_blank">http://circlecount.com/test.chart.range.php</a></p>
2 ответа

Проблема может быть решена с помощью следующей функции:

google.visualization.events.addListener(control, 'statechange',
 function(event) {
 if (control.getState()["range"]["end"] > myLastRealDate) {
 var myRowsArr = new Array();
 var myTempDate = control.getState()["range"]["start"];
 for (var i=0;i
<p>Число строк должно быть сохранено в массиве на дату, например:</p> <pre class="prettyprint linenums">myDateArr['11/7/2011'] = 0;</pre> <p>Строка и дата "перерыва" также должны сохраняться в переменных:</p> <pre class="prettyprint linenums">myLastRealDate = new Date('11/14/2011'); myLastRealRow = 7;</pre> <p>Вот рабочий пример: <a href="http://circlecount.com/test.chart.range.php" rel="nofollow noreferrer" target="_blank">http://circlecount.com/test.chart.range.php</a></p>


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

Один из способов исправить это - изменить параметры, в частности ui.minRangeSize, чтобы быть больше 7 (количество строк, которое вы хотите показать на диаграмме). Это сделает ваш код для контроля:

control = new google.visualization.ControlWrapper({
 'controlType': 'ChartRangeFilter',
 'containerId': 'control',
 'options': {
 'filterColumnIndex': 0,
 'ui': {
 'chartType': 'LineChart',
 'chartOptions': {
 'chartArea': {'width': '95%'},
 'hAxis': {'baselineColor': 'none'}
 },
 'chartView': {
 'columns': [0,1]
 },
 'minRangeSize': 604800000
 }
 }
});

Это предотвращает появление ошибки, останавливая диапазон селектора, чтобы он находился ниже 7 дней.

Если это не достаточно хорошо для вашего приложения, вам нужно будет сделать что-то сложное, например этот jsfiddle от asgallant. Этот метод довольно запутан, но в основном то, что он делает, это рисовать скрытую таблицу с экрана, используя событие изменения (при фильтрации диаграммы), чтобы определить, какие данные находятся в таблице, и создать новый тип данных из этих фильтрованных данных.

Затем вы можете использовать новый набор подфайлов для фильтрации любым способом, который вы хотите.

Другим вариантом будет изменение фильтра строк в таблице из rows: [0, 1, 2, 3, 4, 5, 6] на переменное число строк в зависимости от количества строк в базовой таблице. Таким образом, вы можете проверить state ползунка (см. Документацию здесь) и создать динамический массив строк на основе того, сколько строк находится в таблица (макс. 7).

Все рассмотренные вещи, вероятно, проще всего ограничить диапазон слайдера, поскольку это вызовет наименьшие головные боли.

licensed under cc by-sa 3.0 with attribution.