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/


B4X: 
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)
 
Click to expand...
Mashiane

Mashiane

Expert
Licensed User
Longtime User
Exploring further properties, e.g. DateFormat for both table and tooltip display.

MashJSGantt.gif


B4X: 
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)

HideColumns.png


Other Settings (click on the image to enlarge it)

OtherSettings.png
 
Last edited:
Mashiane

Mashiane

Expert
Licensed User
Longtime User
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

Final.png


B4X: 
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...
 

Attachments

  • MashJSGantt.bas
    16.1 KB · Views: 491
J

joulongleu

Active Member
Licensed User
Longtime User
Hi:Mashiane:Thank You,is very cool,but I run is Collapse can be expanded ?
The following screen is Collapse:
upload_2018-5-8_13-37-41.png
 
Mashiane

Mashiane

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

B4X: 
SetOpen(1,True)

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

B4X: 
'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
 

Attachments

  • MashJSGantt.bas
    16.9 KB · Views: 486
You must log in or register to reply here.
Top