B4J Library [ABMaterial] Exploring jsGanttImproved

Ola

Spent some time exploring another Gantt framework, sadly not responsive but kicks a few punches. I guess for desktops it can do.

https://jsganttimproved.github.io/jsgantt-improved/

Dim g As MashJSGantt
    g.Initialize(page,"g")
    g.GanttFormat = g.JSGanttFormat.day
    g.AddTask1(1,  "Define Chart API",     "",           "",          "ggroupblack",  "",       False, "Brian",    0,  g.JSGanttTaskType.StandardGroupTask, 0,  True, "",      "",      "Some Notes text")
    g.AddTask1(11,  "Chart Object",         "2016-02-20","2016-02-20", "gmilestone",   "",       False, "Shlomy",   100,  g.JSGanttTaskType.normaltask, 1,  True, "",      "",      "")
    g.AddTask1(12,  "Task Objects",         "",           "",          "ggroupblack",  "",       False, "Shlomy",   40,  g.JSGanttTaskType.StandardGroupTask, 1,  True, "",      "",      "")
    g.AddTask1(121, "Constructor Proc",     "2016-02-21","2016-03-09", "gtaskblue",    "",       False, "Brian T.", 60,  g.JSGanttTaskType.normaltask, 12, True, "",      "",      "")
    g.AddTask1(122, "Task Variables",       "2016-03-06","2016-03-11", "gtaskred",     "",       False, "Brian",    60,  g.JSGanttTaskType.normaltask, 12, True, 121,     "",      "")
    g.AddTask1(123, "Task by Minute/Hour",  "2016-03-09","2016-03-14 12:00", "gtaskyellow", "",  False, "Ilan",     60,  g.JSGanttTaskType.normaltask, 12, True, "",      "",      "")
    g.AddTask1(124, "Task Functions",       "2016-03-09","2016-03-29", "gtaskred",     "",       False, "Anyone",   60,  g.JSGanttTaskType.normaltask, 12, True, "123SS", "This is a caption", "")
    g.AddTask1(2,   "Create HTML Shell",    "2016-03-24","2016-03-24", "gtaskyellow",  "",       False, "Brian",    20,  g.JSGanttTaskType.normaltask, 0,  True, "122",     "",      "")
    g.AddTask1(3,   "Code Javascript",      "",           "",          "ggroupblack",  "",       False, "Brian",    0,   g.JSGanttTaskType.StandardGroupTask, 0,  True, "",      "",      "")
    g.AddTask1(31,  "Define Variables",     "2016-02-25","2016-03-17", "gtaskpurple",  "",       False, "Brian",    30,  g.JSGanttTaskType.normaltask, 3,  True, "",      "Caption 1","")
    g.AddTask1(32,  "Calculate Chart Size", "2016-03-15","2016-03-24", "gtaskgreen",   "",       False, "Shlomy",   40,  g.JSGanttTaskType.normaltask, 3,  True, "",      "",      "")
    g.AddTask1(33,  "Draw Task Items",      "",           "",          "ggroupblack",  "",       False, "Someone",  40,  g.JSGanttTaskType.CombinedGroupTask, 3,  True, "",      "",      "")
    g.AddTask1(332, "Task Label Table",     "2016-03-06","2016-03-09", "gtaskblue",    "",       False, "Brian",    60,  g.JSGanttTaskType.normaltask, 33, True, "",      "",      "")
    g.AddTask1(333, "Task Scrolling Grid",  "2016-03-11","2016-03-20", "gtaskblue",    "",       False, "Brian",    0,   g.JSGanttTaskType.normaltask, 33, True, "332",   "",      "")
    g.AddTask1(34,  "Draw Task Bars",       "",           "",          "ggroupblack",  "",       False, "Anybody",  60,  g.JSGanttTaskType.StandardGroupTask, 3,  False, "",      "",     "")
    g.AddTask1(341, "Loop each Task",       "2016-03-26","2016-04-11", "gtaskred",     "",       False, "Brian",    60,  g.JSGanttTaskType.normaltask, 34, True, "",      "",      "")
    g.AddTask1(342, "Calculate Start/Stop", "2016-04-12","2016-05-18", "gtaskpink",    "",       False, "Brian",    60,  g.JSGanttTaskType.normaltask, 34, True, "",      "",      "")
    g.AddTask1(343, "Draw Task Div",        "2016-05-13","2016-05-17", "gtaskred",     "",       False, "Brian",    60,  g.JSGanttTaskType.normaltask, 34, True, "",      "",      "")
    g.AddTask1(344, "Draw Completion Div",  "2016-05-17","2016-06-04", "gtaskred",     "",       False, "Brian",    60,  g.JSGanttTaskType.normaltask, 34, True, "342,343","",     "")
    g.AddTask1(35,  "Make Updates",         "2016-07-17","2017-09-04", "gtaskpurple",  "",       False, "Brian",    30,  g.JSGanttTaskType.normaltask, 3,  True, "333",   "",      "")
    page.Cell(2,1).AddComponent(g.ABMComp)

 

[Mashiane]

Exploring further properties, e.g. DateFormat for both table and tooltip display.

Dim g As MashJSGantt
    g.Initialize(page,"g")
    g.GanttFormat = g.JSGanttFormat.month
    g.RowHeight = 32
    g.DateTaskTableDisplayFormat = g.JSGanttDateOutputFormat.yyyy_mm_dd
    g.DateTaskDisplayFormat = g.JSGanttDateOutputFormat.dd_mon_yyyy_day
g.CaptionType = g.JSGanttCaptionType.Resource
    g.ShowResource = False 'default true
    g.ShowDuration = True  ' default true
    g.ShowPercentComplete = True ' default true
    g.ShowStartDate = True ' default true
    g.ShowEndDate = True ' dfault true
    g.ShowEndWeekDate = False ' default false
    g.WeekMinorDateDisplayFormat = "dd mon"
    g.DayMajorDateDisplayFormat = "mon yyyy - Week ww"
    g.DateInputFormat = "yyyy-mm-dd"

Would be nice if the columns to be resizable..

Hide Columns (click on the image to enlarge it)

Other Settings (click on the image to enlarge it)

 

[Mashiane]

Final Version: I think I can use this (click image to enlarge)

1. Set Colors
2. Set Milestones
3. Set Resources
4. Auto Calculation of dates and % Complete

Dim g As MashJSGantt
    g.Initialize(page,"g")
    g.GanttFormat = g.JSGanttFormat.day
    g.RowHeight = 32
    g.DateTaskTableDisplayFormat = g.JSGanttDateOutputFormat.yyyy_mm_dd
    g.DateTaskDisplayFormat = g.JSGanttDateOutputFormat.dd_mon_yyyy_day
    g.CaptionType = g.JSGanttCaptionType.Resource
    g.ShowResource = False 'default true
    g.AddProject("Gantt Charts")
    g.AddTask(1,2,"Research Gantt Charts","2018-05-05","2018-05-05",80,"Mashy","")
    g.AddTask(2,3,"Google Charts","2018-05-06","2018-05-06",100,"Mashy","").SetGreen(3)
    g.AddTask(2,4,"jsGantt Improved","2018-05-07","2018-05-07",100,"Mashy","")
   
    g.AddTask(1,5,"Build ABM Components","2018-05-05","2018-05-05",80,"Mashy","2")
    g.AddTask(5,6,"Google Charts","2018-05-06","2018-05-06",100,"Mashy","").SetYellow(6)
    g.AddTask(5,7,"jsGantt Improved","2018-05-07","2018-05-07",100,"Mashy","")
   
    g.AddTask(1,8,"Blog on B4X Website","2018-05-05","2018-05-05",100,"Mashy","5")
    g.AddTask(8,9,"Google Charts","2018-05-07","2018-05-07",20,"Mashy","").SetPurple(9)
    g.AddTask(8,10,"jsGantt Improved","2018-05-07","2018-05-07",50,"Mashy","").SetMileStone(10,True)

Source code attached for exploration...

 

[joulongleu]

Hi:Mashiane:Thank You,is very cool,but I run is Collapse can be expanded ?
The following screen is Collapse:

 

[Mashiane]

If you click the + sign on the task it will expand/collapse the child items.

 

[Mashiane]

I have added a method called SetOpen, you pass it the taskid and a boolean variable.

SetOpen(1,True)

Will expand the project task, its ID is always 1.

'set a task open / not
Sub SetOpen(TaskID As Int, Open As Boolean) As MashJSGantt
    Dim tKey As String = "task-" & TaskID
    If tasks.ContainsKey(tKey) Then
        Dim tt As JSGanttTask = tasks.Get(tKey)
        tt.pOpen = MashPlugIns.iif(Open,1,0)
        tasks.Put(tKey,tt)
    End If
    Return Me
End Sub

 

[joulongleu]

Run is ok ,Thank you for your assistance,MashJSGantt is very good Gantt framework