Gantt Chart

This is one of the operating modes of the table component. 

To display the Gantt diagram by day or hour, do the following: 
  1. 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). 
  2. 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
  3. 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())
  4. Additionally the following parameters can be configured in the 3 select query: 
    1. ganttScale - default format days, hours, weeks и т.д.
    2. ganttNavigate - how the diagram navigation will be displayed - scroll, buttons
    3. 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). 
    4. 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