This is one of the operating modes of the table component.
To display the Gantt diagram by day or hour, do the following:
Create a table with the columns id (PK, string),name,and desc. These will be Gantt lines
(i.e. for each of these elements, the event feed will be loaded by date).
In the third select in GetItems, specify the output type viewType= "gantt"
select 'gantt' viewType, 'days' ganttScale, 'financeItemInfo' ganttItemForm, 'Description of operation details' ganttItemFormTitle, 'Finance by date' Title
In the fourth select, we output data for Gantt elements in GetItems (instead of footer data).
select top 60 (select name from fin_financeCategories where id = categoryID) as itemID, -- 'itemID' must match winth the ID of the item from the second select created [from], -- start and end date of the Gantt element dateadd(hour, 0.5, created) [to], 'Х' [label], -- placemark on the chart convert(nvarchar, created, 104) + ' : ' + isnull((select name from fin_financeCategories where id = categoryID), 'Without categories') + ' : ' + try_cast(sum as nvarchar) [desc], -- hint when hovering over an element 'text-warning' customClass, --css class for styling an element on a diagram cast(id as nvarchar) dataObj-- ID of the element to display the modal form from fin_finances where isnull(isDeleted,0)=0 and (isnull(@filterCategoryID,0)=0 or @filterCategoryID = categoryID) and created > dateadd(month, -3, getdate())
Additionally the following parameters can be configured in the 3 select query:
ganttScale - default format days, hours, weeks и т.д.
ganttNavigate - how the diagram navigation will be displayed - scroll, buttons
ganttItemForm-form code. If specified, when clicking on a chart element in the modal window, the
form will be called(the form with the specified code will need to be implemented separately, Itemid=dataObj is passed to it from the 4 select query).
ganttItemFormTitle - title of the form dialog box
Note on Gantt diagrams:
Paging for the chart is set equal to paging for the table's settings.
Gantt elements take at least 1 hour in the grid. If you had an event from 14: 02 to 15: 02, it will take 2 cells - 14 and 15.
Therefore, it is better to make events 1 minute long.
Elements can fit on top of each other, so it's better to group events by the hour in the day + show the number in the header.
and in the modal window (form), click to show the elements that correspond to the cell.
Desc for categories should be set to some value, and should not be left empty.
If you need to color elements, use the customClass parameter - set bootstrap classes: bg-warning
Falcon Space is a functional web development platform on a narrow stack MS SQL/Bootstrap. Falcon Space Gettting started
- Falcon Space Foundation
- Basic components
- Falcon Space Features
- Коммуникация с пользователем
- Дизайн, стилизация
- Additional component Falcon Space. Working with indicators Falcon Space. Panel-hints Falcon Space. The counters component Falcon Space. Business processes Falcon Space. Working with the catalog, shopping cart, and orders Working with HTML blocks Falcon Space. Working with trees (hierarchy) Universal likes, dislikes, ratings, voting for products Interactive tree Gantt Chart The Kanban Board Chartbar diagram Map with markers Cards Progress line Timeline Uploaded files Data output in the form of a graph on the site Output of the request movement by statusbar statuses
- Продвижение, SEO
- Системные моменты
- HOWTO Tables
- HOWTO Forms
- Working with SQL
- HOWTO JS
- HOWTO Layout
- Solve problems
Falcon Space Platform
This is a reduction in the cost of ownership
at the expense of fewer people to support
This is a quick change
while using the program
This is a modern interface
full adaptation for mobile devices