B4J Library [B4X] xGanttLite b4xlib

Current version 1.1

The xGanttLite library allows to draw Gantt charts.

It was initiated in this post.

There does also exist an xGantt, library which is more complete.
The differences are that the xGantt treats durations and dependencies but the xGanttLite uses only begin and end times.
The xGantt scale is days only, the xGanttLite has three scales: hour, day large and day small.

The xGanttLite custom view is a B4X library.
It works on all three platforms: B4A, B4i and B4J, not yet tested with B4i.
The xGanttLite.b4xlib and the xGanttLite.xml files are attached.
You need to copy the xGanttLite.b4xlib file to the AdditionlLibraries\B4X folder!
The recommended AdditionlLibraries folder structure is explained HERE.

Do not copy the xGanttLite.xml file to the AdditionalLibraries folder, copy it in another folder for all b4xlib xml files.
Example: AdditionlLibraries\B4XlibXMLFiles
The xGanttLite.xml file is for help purposes only and is useful with the B4X Help Viewer or the B4XObjectBrowser.
The xGanttLitexml file was generated with this tool: b4xlib - XML generation

Demo projects for all three platforms as a B4XPages project.
Tested on PC, Android Samsung S10, Samsung Tab S2. Not yet tested with B4i.
xGanttLiteDemo.zip
xGanttLite.b4xlib
xGanttLite.xml


1726923545870.png


Data structure:

A xGanttLite chart is a composed of rows.
Each row has these properties:
1. The ID of the objcet
2. One of the three object types.
2.1. Task
2.2. Group
2.3. Empty, just an empty row

2.1 Task
This is the main object with different properties:
1. ID - a string that identifies the task.
2. Row - the row number in the chart.
3. Name - a string with the name of the task.
4. Responsible - the name of the person in charge of the task.
5. GroupID - the ID of the Group the Task belongs to or an empty string.
6. BeginTime - the begin date and time of the task.
7. EndTime - the end date and time of the task.
8. Color - only for the display.
9. Comment - a comment for the task

2.2 Group
1. ID - a string that identifies the group.
2. Row - the row number in the chart.
3. Name - a string with the name of the group.
4. Color - only for the display.
5. Comment - a comment for the group.

What you can do:
1. Scroll if needed, horizontally on the time scale and vertically the rows.
2. Jump to the beginning or the end with the scrollbar.
3. Show the line data in the upper left corner; clicking on a row and moving the mouse over the rows.
1726923933154.png

4. Display with three different scales, you can select the scale with the small buttons in the lower left corner:
1726924821017.png

4.1 HOUR:
1726925194120.png

4.2 DAY_LARGE
1726925210714.png

4.3 DAY_SMALL
1726925222974.png


5 Edit the time in the chart.
5.1 Double click on a task.
1726926351306.png

1726924236925.png


5.2 Move one of the three lines: left move the beginning, middle move the task and right move the end time.
1726924485484.png

After releasing the mouse you will be asked if you want to keep the new position, continue editing or cancel.
1726924560070.png

And the result:
1726924661363.png


You can set the Language with the LanguageCode property:
Three files are included in the Assets folder:
texts_en.txt for English
texts_fr.txt for Français
texts_de.txt for Deutsch.
If you want to adapt it to your language you can translate one of the text files and save it as texts_xx.txt in the SharedFiles folder of the project.
Where xx is your two character language code.


xGanttLite

Author:
Klaus CHRISTL (klaus)
Version: 1.1
  • Events:
    • SelectedRow (RowIndex As Int)
  • Fields:
    • mBase As B4XView
    • Tag As Object
  • Functions:
    • AddEmpty
      Adds an empty row
    • AddGroup (ID As String, Name As String, Color As Int, Comment As String)
      Adds a Group
      ID = identification of the group.
      Name = description of the group.
      Color = color of the bar in the chart
      Comment = a comment for the group
    • AddTaskDates (ID As String, Name As String, Responsible As String, GroupID As String, BeginTime As String, EndTime As String, Color As Int, Comment As String)
      Adds a Task, the times are Strings
      ID = identification of the task.
      Name = description of the task.
      Responsible = person un charge of the task
      GroupID = ID of the group the Task belongs to, empty string if the task does not belong to a group.
      BeginTime = time of the start of the task; DateFormat yyyy-MM-dd HH.mm.ss
      EndTime = time of the end of the task; DateFormat yyyy-MM-dd HH.mm.ss
      Color = color of the bar in the chart
      Comment = a comment for the task
    • AddTaskTicks (ID As String, Name As String, Responsible As String, GroupID As String, BeginTimeTicks As Long, EndTimeTicks As Long, Color As Int, Comment As String)
      Adds a Task, the times are Ticks
      ID = identification of the task.
      Name = description of the task.
      Responsible = person un charge of the task
      GroupID = ID of the group the Task belongs to, empty string if the task does not belong to a group.
      BeginTimeTicks = time of the start of the task in Ticks
      EndTimeTicks = time of the end of the task in Ticks
      Color = color of the bar in the chart
      Comment = a comment for the task
    • DesignerCreateView (Base As Object, Lbl As Label, Props As Map)
      Base type must be Object
    • DrawGantt
      Draws the Gantt chart
    • GetDate (Ticks As Long, DateFormat As String) As String
      Returns the date string for the given date ticks with the given DateFormat
    • GetDateTicks (Date As String) As Long
      Returns Ticks for a date with the yyyy-MM-dd format
    • GetGroup (GroupID As String) As GanttLiteGroupData
      Returns the Group data for the given Group ID
    • GetTask (TaskID As String) As GanttLiteTaskData
      Returns the Task data for the given Task ID
    • Initialize (Callback As Object, EventName As String)
    • JumpToBegin
      Jumps to the beginning of the chart
    • JumpToDate (Ticks As Long)
      Jumps to the given date in Ticks
    • JumpToDate2 (Date As String)
      Jumps to the given date in the current DateFormat
      default date format "yyyy-MM-dd HH:mm:ss"
    • JumpToEnd
      Jumps to the end of the chart
    • JumpToNow
      Jumps to the current time, the current time is in the middle of the screen
  • Properties:
    • BackgroundColor As Int
      Sets or gets the BackgroundColor property
      It must be a xui color
      Example: xGanttLite1.BackgroundColor = xui.Color_White
    • BeginDate As String [write only]
      Sets or gets the BeginDate property
      Begin day of the chart
      Default value "" empty string
      This means that the begin date is the first day of all tasks.
    • DateFormat As String
      Sets or gets the DateFormat property
      Default value = "yyyyMMdd"
    • DisplayResponsibleColumn As Boolean
      Sets or gets the DisplayResponsibleColumn property
      When True, the Responsible column is displayed
    • DisplayRowData As Boolean
      Sets or gets the DisplayRowData property
      When True, the row data is displayed in the upper left corner when the user presses and moves the mouse on a row
    • DisplayRowIndexColumn As Boolean
      Sets or gets the DisplayRowIndexColumn property
      When True, the RowIndex column is displayed
    • EndDate As String [write only]
      Sets or gets the EndDate property
      End day of the chart
      Default value "" empty string
      This means that the end date is the last day of all tasks.
    • GridColor As Int
      Sets or gets the GridColor property
      It must be a xui color
      Example: xGanttLite1.GridColor = xui.Color_Gray
    • GridFrameColor As Int
      Sets or gets the GridFrameColor property
      It must be a xui color
      Example: xGanttLite1.GridFrameColor = xui.Color_Black
    • LanguageCode As String
      Sets or gets the language code.
      en English
      fr Français
      de Deutsch
    • Snapshot As B4XBitmap [read only]
      Returns a B4XBitmap object of the chart (read only).
    • TextColor As Int
      Sets or gets the TextColor property
      It must be an xui color
      Example: xGanttLite1.TextColor = xui.Color_Blue
    • TextSize As Float
      Sets or gets the TextSize property
      The row height depends on the text size, it is automatically adjusted
    • TimeDisplayMode As String
      Sets or gets the TimeDisplayMode property
      Possible values:
      "HOUR" = displays 24 hours a day
      "DAY_LARGE" = diplays days with a large column
      "DAY_SMALL" = diplays days with a samll column
 

Attachments

  • xGanttLite.xml
    13.7 KB · Views: 65
  • xGanttLiteDemo.zip
    61.7 KB · Views: 58
  • xGanttLite.b4xlib
    15 KB · Views: 59
Last edited:
Top