B4J Library [ABMaterial] Exploring jsGanttImproved

Discussion in 'B4J Libraries & Classes' started by Mashiane, May 7, 2018.

  1. Mashiane

    Mashiane Expert Licensed User

    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/



    Code:
    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, 12True"",      "",      "")
        g.AddTask1(
    122"Task Variables",       "2016-03-06","2016-03-11""gtaskred",     "",       False"Brian",    60,  g.JSGanttTaskType.normaltask, 12True121,     "",      "")
        g.AddTask1(
    123"Task by Minute/Hour",  "2016-03-09","2016-03-14 12:00""gtaskyellow""",  False"Ilan",     60,  g.JSGanttTaskType.normaltask, 12True"",      "",      "")
        g.AddTask1(
    124"Task Functions",       "2016-03-09","2016-03-29""gtaskred",     "",       False"Anyone",   60,  g.JSGanttTaskType.normaltask, 12True"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, 33True"",      "",      "")
        g.AddTask1(
    333"Task Scrolling Grid",  "2016-03-11","2016-03-20""gtaskblue",    "",       False"Brian",    0,   g.JSGanttTaskType.normaltask, 33True"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, 34True"",      "",      "")
        g.AddTask1(
    342"Calculate Start/Stop""2016-04-12","2016-05-18""gtaskpink",    "",       False"Brian",    60,  g.JSGanttTaskType.normaltask, 34True"",      "",      "")
        g.AddTask1(
    343"Draw Task Div",        "2016-05-13","2016-05-17""gtaskred",     "",       False"Brian",    60,  g.JSGanttTaskType.normaltask, 34True"",      "",      "")
        g.AddTask1(
    344"Draw Completion Div",  "2016-05-17","2016-06-04""gtaskred",     "",       False"Brian",    60,  g.JSGanttTaskType.normaltask, 34True"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)
     
  2. Mashiane

    Mashiane Expert Licensed User

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

    MashJSGantt.gif

    Code:
    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: May 7, 2018
  3. Mashiane

    Mashiane Expert Licensed 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

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

    Attached Files:

  4. joulongleu

    joulongleu Member

    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 likes this.
  5. Mashiane

    Mashiane Expert Licensed User

    If you click the + sign on the task it will expand/collapse the child items.
     
    Last edited: May 8, 2018
    joulongleu likes this.
  6. Mashiane

    Mashiane Expert Licensed User

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

    Code:
    SetOpen(1,True)
    Will expand the project task, its ID is always 1.

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

    Attached Files:

    inakigarm and joulongleu like this.
  7. joulongleu

    joulongleu Member

    Run is ok ,Thank you for your assistance,MashJSGantt is very good Gantt framework
     
    Mashiane likes this.
Loading...
  1. This site uses cookies to help personalise content, tailor your experience and to keep you logged in if you register.
    By continuing to use this site, you are consenting to our use of cookies.
    Dismiss Notice