Диаграмма Ганта на сайте

Это один из режимов работы компонента Таблица.

Для показа диаграммы Ганта по дням или часам, необходимо сделать следующее:

Создать таблицу с колонками id (PK, можно строка), name, desc. Это будут строки Ганта
(т.е. для каждого из этих элементов будет грузиться лента событий по датам).

В третьем select в GetItems указать тип вывода viewType=’gantt’

select 'gantt' viewType, 'days' ganttScale, 'financeItemInfo' ganttItemForm, 'Описание деталей операции' ganttItemFormTitle, 'Финансы по датам' Title

В четвертом select в GetItems (вместо данных футера) выводим данные по элементам Ганта.

select top 60 (select name from fin_financeCategories where id = categoryID) as  itemID,
       -- 'itemID' должен совпадать с id элемента из второго select
       created [from], -- дата начала и конца элемента Ганта
       dateadd(hour, 0.5, created) [to],
       'Х' [label], -- метка на диаграмме
       convert(nvarchar, created, 104) + ' : ' +  isnull((select name
                                                          from fin_financeCategories
                                                          where id = categoryID),
                                                          'Без категории')
       + ' : ' + try_cast(sum as nvarchar) [desc], -- подсказка при наведении на элемент
       'text-warning' customClass, --css класс для стилизации элемента на диаграмме
       cast(id  as nvarchar) dataObj-- идентификатор элемента, для показа модальной формы
from fin_finances
where isnull(isDeleted,0)=0
  and (isnull(@filterCategoryID,0)=0 or @filterCategoryID = categoryID)
  and created > dateadd(month, -3, getdate())

Дополнительно в 3 запросе select можно настроить следующие параметры:

ganttScale - формат по умолчанию days, hours, weeks и т.д.
ganttNavigate - как будет выводиться навигация по диаграмме - scroll, buttons
ganttItemForm - код формы. Если указан, то при клике на элемент диаграммы в модальном окне будет вызываться форма
(форму с указанным кодом необходимо будет реализовать отдельно, ей передается itemID=dataObj из 4 запроса select).
ganttItemFormTitle - заголовок диалогового окна формы

Примечание по диаграммам Ганта:

Пейджинг для диаграммы устанавливается равным пейджингу настроек таблицы.
Элементы Ганта занимают минимально 1 час в сетке. Если у вас событие было с 14:02 до 15:02 то это займет 2 ячейки - 14 и 15.
Поэтому лучше делайте события длинной в 1 минуту.
Элементы могут налезать друг на друга, поэтому лучше группировать события по часам в дне + показывать количество в заголовке.
А в модальном окне (форма) по клику показывать уже элементы, которые соответствуют ячейке.
desc для категорий лучше ставить в какое-то значение, а не оставлять пустым.
Если нужно раскрашивать элементы в цвета, используйте параметр customClass - ставьте классы bootstrap: bg-warning

Falcon Space - функциональная веб-платформа разработки на узком стеке MS SQL/Bootstrap. Вводная по Falcon Space

Google поиск по нашей документации

Нужна бесплатная консультация?

Планируете делать веб-проект?

Шаг 1. Создать концепт проекта
Шаг 2. Получить оценку бюджета (КП)
Шаг 3. Заключить договор
Шаг 4. Создать совместно техническое задание
Шаг 5. Поэтапная реализация проекта