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
Examples of how Falcon Space platform components workExamples of convenient tables and forms Examples of dashboards Examples of graphs and charts Example of a calendar Table with API data Example of displaying a map with points Types of form fields Example of a statistics widget Example of a hierarchy tree Example of the Time line component Example of a product card Example of resource load tracking Example of a Kanban board Example of a master form Example of uploading Excel/Word documents Example of filling in TIN data
- Falcon Space Foundation
- Basic components Falcon Space. Working with tables Falcon Space. Working with forms Falcon Space. Working with dashboards Falcon Space. Working with resources Falcon Space. Working with entities Falcon Space. Business processes Falcon Space. Generating Docx and Xlsx documents Falcon Space. Working with trees (hierarchy) Working with HTML blocks External actions (notifications, push, email, API call) Diagrams and Graphs Interactive tree Gantt Chart The Kanban Board Chartbar diagram Map with markers Cards Progress line Timeline The calendar
- Falcon Space Features
- Additional component
- HOWTO Tables
- HOWTO Forms
- HOWTO JS
- HOWTO CSS
- 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