B4J Library [ABMaterial] Googling around with Google's Gantt Chart

Hi there...

https://developers.google.com/chart/interactive/docs/gallery/ganttchart

A project management app wouldn't do without a proper gantt chart. I must say I'm rather impressed with what Google has come around with here, more especially with the fact that it can calculate and draw the critical path and its look and feel is rather nice. Some tests so far...

MashGGantt.gif


B4X: 
Dim mgantt As MashGGhatt
    mgantt.Initialize(page,"mgantt")
    mgantt.Height = "400"
    mgantt.AddTask("Research", "Find sources", "2015-01-01", "2015-01-05", "", "100", "")
    mgantt.addtask("Write", "Write paper", "", "2015-01-09", "3", "25", "Research,Outline")
    mgantt.addtask("Cite", "Create bibliography", "", "2015-01-07", "1", "20", "Research")
    mgantt.addtask("Research", "Find sources", "2015-01-01", "2015-01-05", "", "100", "")
    mgantt.addtask("Complete", "Hand on paper", "", "2015-01-10", "1", "0", "")
    mgantt.addtask("Outline", "Outline paper", "", "2015-01-06", "1", "100", "Research")
 
    page.cell(2,1).AddComponent(mgantt.abmcomp)
 
Click to expand...
Mashiane

Mashiane

Expert
Licensed User
Longtime User
Adding tasks...

B4X: 
'add a task to the gantt
Sub AddTask(TaskID As String, TaskName As String, StartDate As String, EndDate As String, Duration As String, PercentComplete As String, Dependencies As String)
    'get year, month, day from date
    Dim sDate As String = "null"
    Dim eDate As String = "null"
    If Duration = "" Then Duration = "null"
    If Duration <> "null" Then
        Duration = $"daysToMilliseconds(${Duration})"$
    End If
    If Dependencies = "" Then Dependencies = "null"
    If Dependencies <> "null" Then
        Dependencies = $"'${Dependencies}'"$
    End If
    If StartDate <> "" Then
        Dim lDate As Long = DateTime.DateParse(StartDate)
        Dim syyyy As String = DateTime.GetYear(lDate)
        Dim smm As String = DateTime.GetMonth(lDate)
        Dim sdd As String = DateTime.GetDayOfMonth(lDate)
        sDate = $"new Date(${syyyy}, ${smm}, ${sdd})"$
    End If
    If EndDate <> "" Then
        Dim lDate As Long = DateTime.DateParse(EndDate)
        Dim eyyyy As String = DateTime.GetYear(lDate)
        Dim emm As String = DateTime.GetMonth(lDate)
        Dim edd As String = DateTime.GetDayOfMonth(lDate)
        eDate = $"new Date(${eyyyy}, ${emm}, ${edd})"$
    End If
    Dim tsk As String = $"['${TaskID}', '${TaskName}', ${sDate}, ${eDate}, ${Duration},  ${PercentComplete},  ${Dependencies}]"$
    tasks.Put(TaskID.ToLowerCase,tsk)
End Sub

Preparing the content of the custom component...

B4X: 
'build the tasks
private Sub BuildTasks() As String
    Dim sb As StringBuilder
    sb.Initialize
    For Each tskKey As String In tasks.Keys
        Dim tskValue As String = tasks.Get(tskKey)
        sb.Append(tskValue).Append(",")
    Next
    sb = MashPlugIns.RemDelimSB(",",sb)
    Return sb.tostring
End Sub

'refresh the gantt chart
Sub Refresh
    ABM.ReplaceMyHTML(Page,compid,HTML)
    Dim script As StringBuilder
    script.initialize
    script.Append($"google.charts.load('current', {'packages':['gantt']});
    google.charts.setOnLoadCallback(drawChart);
    function daysToMilliseconds(days) {
      return days * 24 * 60 * 60 * 1000;
    }
    function drawChart() {
      var data = new google.visualization.DataTable();
      data.addColumn('string', 'Task ID');
      data.addColumn('string', 'Task Name');
      data.addColumn('date', 'Start Date');
      data.addColumn('date', 'End Date');
      data.addColumn('number', 'Duration');
      data.addColumn('number', 'Percent Complete');
      data.addColumn('string', 'Dependencies');
      data.addRows([${BuildTasks}]);
      var options = {
        height: ${Height}
      };
      var chart = new google.visualization.Gantt(document.getElementById('${compid}'));
      chart.draw(data, options);
    }"$)
    'add to global scripts
    JavaCalls.Add(script)
    Dim scripta As String = Element.MvFromList(JavaCalls,"")
    If MashPlugIns.Debug = True Then
        Element.VerifyJavaScript(JavaCalls)
        Element.VerifyHTML(HTML)
        Page.ws.Eval(scripta, Array As String(compid))
    Else
        Page.ws.Eval(scripta, Array As String(compid))
    End If
End Sub
 

Attachments

  • MashGGhatt.bas
    7.8 KB · Views: 572
Mashiane

Mashiane

Expert
Licensed User
Longtime User
Critical Path

CriticalPath.png


B4X: 
Dim mgantt As MashGGhatt
    mgantt.Initialize(page,"mgantt")
    mgantt.criticalPathEnabled = True
    mgantt.AddTask("Research", "Find sources", "", "2015-01-01", "2015-01-05", "", "100", "")
    mgantt.addtask("Write", "Write paper", "write", "", "2015-01-09", "3", "25", "Research,Outline")
    mgantt.addtask("Cite", "Create bibliography", "write", "", "2015-01-07", "1", "20", "Research")
    mgantt.addtask("Complete", "Hand on paper", "complete", "", "2015-01-10", "1", "0", "Cite,Write")
    mgantt.addtask("Outline", "Outline paper", "write", "", "2015-01-06", "1", "100", "Research")
    page.cell(3,1).AddComponent(mgantt.abmcomp)

No Dependencies

NoDependencies.png


B4X: 
Dim mg As MashGGhatt
    mg.Initialize(page,"mg")
    'set the start date
    mg.DefaultStartDate = "2015-03-28"
    mg.criticalPathEnabled = True
    Dim gt As GanttTask
    gt = mg.CreateTask
    gt.TaskID = "2014Spring"
    gt.TaskName = "Spring 2014"
    gt.Resource = "spring"
    gt.StartDate = "2014-02-22"
    gt.EndDate = "2014-05-20"
    gt.PercentComplete = "100"
    mg.AddTask1(gt)
    
    mg.AddTask("2014Summer", "Summer 2014", "summer",    "2014-05-21", "2014-08-20", "", "100", "")
    mg.AddTask("2014Autumn", "Autumn 2014", "autumn",    "2014, 8, 21", "2014, 11, 20", "", "100", "")
    mg.AddTask("2014Winter", "Winter 2014", "winter",    "2014, 11, 21", "2015, 2, 21", "", 100, "")
    mg.AddTask("2015Spring", "Spring 2015", "spring",    "2015, 2, 22", "2015, 5, 20", "", 50, "")
    page.cell(3,1).AddComponent(mg.ABMComp)

Time

Time.png


B4X: 
Dim mgantt1 As MashGGhatt
    mgantt1.Initialize(page,"mgantt1")
    mgantt1.IsTime = True
    mgantt1.DefaultStartDate = "2015-03-28"
    mgantt1.AddMinutes("toTrain", "Walk to train stop", "walk", 5, 100, "")
    mgantt1.AddMinutes("music", "Listen to music", "music", 70, 100, "")
    mgantt1.AddMinutes("wait", "Wait for train", "wait", 10, 100, "toTrain")
    mgantt1.AddMinutes("train", "Train ride", "train", 45, 75, "wait")
    mgantt1.AddMinutes("toWork", "Walk to work", "walk", 10, 0, "train")
    mgantt1.AddMinutes("work", "Sit down at desk", "", 2, 0, "toWork")
    
    page.cell(3,1).AddComponent(mgantt1.abmcomp)
 
J

joulongleu

Active Member
Licensed User
Longtime User
Hi:Mashiane: The following problem occurs
java.text.ParseException: Unparseable date: "2015-01-01"
 
J

joulongleu

Active Member
Licensed User
Longtime User
Hi:Mashiane: I find Google's Gantt Chart both can use Google table ,but how to use table_select event in Abmaterial.

frollow as :

B4X: 
    Dim script As StringBuilder

    script.initialize
    script.Append($"google.charts.load('current', {'packages':['table'],'language': 'zh'});
    google.charts.setOnLoadCallback(drawTable);
    function drawTable() {
      var data = new google.visualization.DataTable();
        data.addColumn('string', '${Column1}');
        data.addColumn('string', '${Column2}');
        data.addColumn('string', '${Column3}');
        data.addColumn('string', '${Column4}');
        data.addColumn('string', '${Column5}');
        data.addColumn('string', '${Column6}');
        data.addRows([${BuildData}]);
        
        var table = new google.visualization.Table(document.getElementById('${compid}'));
        table.draw(data, {showRowNumber: true, width: '100%', height: '100%' ,  showRowNumber: true,
        page: 'enable',
        pageSize: '${Pagesize}',
        pagingSymbols: {
            prev: '←',
            next: '→'
        },
        pagingButtonsConfiguration: 'auto'});
      
    }"$)
    'add to global scripts
    JavaCalls.Add(script)
    Dim scripta As String = Element.MvFromList(JavaCalls,"")
    If MashPlugIns.Debug = True Then
        Element.VerifyJavaScript(JavaCalls)
        Element.VerifyHTML(HTML)
        Page.ws.Eval(scripta, Array As String(compid))
    Else
        Page.ws.Eval(scripta, Array As String(compid))
    End If
 
J

joulongleu

Active Member
Licensed User
Longtime User
Hi:I later discovered that with the following red words, I could use Abmaterial Event.
Thank you alwaysbusy advice.

b4j_raiseEvent('${compid}_select', {'value':data.getValue(row, 0)});

B4X: 
Dim script As StringBuilder
    script.initialize
    script.Append($"google.charts.load('current', {'packages':['table'],'language': 'zh'});
    google.charts.setOnLoadCallback(drawTable);
    function drawTable() {
      var data = new google.visualization.DataTable();
        data.addColumn('string', '${Column1}');
        data.addColumn('string', '${Column2}');
        data.addColumn('string', '${Column3}');
        data.addColumn('string', '${Column4}');
        data.addColumn('string', '${Column5}');
        data.addColumn('string', '${Column6}');
        data.addRows([${BuildData}]);
       
        var table = new google.visualization.Table(document.getElementById('${compid}'));
        table.draw(data, {showRowNumber: true, width: '100%', height: '100%' ,  showRowNumber: true,
        page: 'enable',
        pageSize: '${Pagesize}',
        pagingSymbols: {
            prev: '←',
            next: '→'
        },
       
        pagingButtonsConfiguration: 'auto'});

  google.visualization.events.addListener(table, 'select', function() {
    var row = table.getSelection()[0].row;
    b4j_raiseEvent('${compid}_select', {'value':data.getValue(row, 0)});
  });

    }"$)
    'add to global scripts
    JavaCalls.Add(script)
    Dim scripta As String = Element.MvFromList(JavaCalls,"")
    If MashPlugIns.Debug = True Then
        Element.VerifyJavaScript(JavaCalls)
        Element.VerifyHTML(HTML)
        Page.ws.Eval(scripta, Array As String(compid))
    Else
        Page.ws.Eval(scripta, Array As String(compid))
    End If
 
G

Ganiadi

Active Member
Licensed User
Longtime User
Mashiane said:
Critical Path

View attachment 67560

B4X: 
Dim mgantt As MashGGhatt
    mgantt.Initialize(page,"mgantt")
    mgantt.criticalPathEnabled = True
    mgantt.AddTask("Research", "Find sources", "", "2015-01-01", "2015-01-05", "", "100", "")
    mgantt.addtask("Write", "Write paper", "write", "", "2015-01-09", "3", "25", "Research,Outline")
    mgantt.addtask("Cite", "Create bibliography", "write", "", "2015-01-07", "1", "20", "Research")
    mgantt.addtask("Complete", "Hand on paper", "complete", "", "2015-01-10", "1", "0", "Cite,Write")
    mgantt.addtask("Outline", "Outline paper", "write", "", "2015-01-06", "1", "100", "Research")
    page.cell(3,1).AddComponent(mgantt.abmcomp)

No Dependencies

View attachment 67561

B4X: 
Dim mg As MashGGhatt
    mg.Initialize(page,"mg")
    'set the start date
    mg.DefaultStartDate = "2015-03-28"
    mg.criticalPathEnabled = True
    Dim gt As GanttTask
    gt = mg.CreateTask
    gt.TaskID = "2014Spring"
    gt.TaskName = "Spring 2014"
    gt.Resource = "spring"
    gt.StartDate = "2014-02-22"
    gt.EndDate = "2014-05-20"
    gt.PercentComplete = "100"
    mg.AddTask1(gt)
   
    mg.AddTask("2014Summer", "Summer 2014", "summer",    "2014-05-21", "2014-08-20", "", "100", "")
    mg.AddTask("2014Autumn", "Autumn 2014", "autumn",    "2014, 8, 21", "2014, 11, 20", "", "100", "")
    mg.AddTask("2014Winter", "Winter 2014", "winter",    "2014, 11, 21", "2015, 2, 21", "", 100, "")
    mg.AddTask("2015Spring", "Spring 2015", "spring",    "2015, 2, 22", "2015, 5, 20", "", 50, "")
    page.cell(3,1).AddComponent(mg.ABMComp)

Time

View attachment 67562

B4X: 
Dim mgantt1 As MashGGhatt
    mgantt1.Initialize(page,"mgantt1")
    mgantt1.IsTime = True
    mgantt1.DefaultStartDate = "2015-03-28"
    mgantt1.AddMinutes("toTrain", "Walk to train stop", "walk", 5, 100, "")
    mgantt1.AddMinutes("music", "Listen to music", "music", 70, 100, "")
    mgantt1.AddMinutes("wait", "Wait for train", "wait", 10, 100, "toTrain")
    mgantt1.AddMinutes("train", "Train ride", "train", 45, 75, "wait")
    mgantt1.AddMinutes("toWork", "Walk to work", "walk", 10, 0, "train")
    mgantt1.AddMinutes("work", "Sit down at desk", "", 2, 0, "toWork")
   
    page.cell(3,1).AddComponent(mgantt1.abmcomp)
Click to expand...
Hi Mashiene,

Pls help, what s wrong. I tried to test but nothing displayed on the page..just a blank page. I used plugin 1.20

Tks
 
You must log in or register to reply here.

Similar Threads

peacemaker
  • Question
B4J Question [web-app][ABMaterial ?] oscilloscope chart
Replies
1
Views
819
Harris
Harris
Mashiane
  • Article
B4J Library [ABMaterial] Beginning the Frappe Gantt Chart
Replies
4
Views
6K
Mashiane
Mashiane
alwaysbusy
  • Article
B4J Tutorial [ABMaterial] Alternative lightweight charts
Replies
4
Views
4K
Mashiane
Mashiane
juvanum
  • Question
B4J Question ABMATERIAL & Google Chart
Replies
2
Views
2K
juvanum
juvanum
Mashiane
  • Article
B4J Tutorial [ABMaterial] Gantt Chart Anyone?
Replies
1
Views
3K
stanmiller
stanmiller
Top