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

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

  1. Mashiane

    Mashiane Expert Licensed User

    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

    Code:
    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)
     
    jmon and joulongleu like this.
  2. Mashiane

    Mashiane Expert Licensed User

    Adding tasks...

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

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

    Attached Files:

  3. Mashiane

    Mashiane Expert Licensed User

    Critical Path

    CriticalPath.png

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

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

    Code:
    Dim mgantt1 As MashGGhatt
        mgantt1.Initialize(
    page,"mgantt1")
        mgantt1.IsTime = 
    True
        mgantt1.DefaultStartDate = 
    "2015-03-28"
        mgantt1.AddMinutes(
    "toTrain""Walk to train stop""walk"5100"")
        mgantt1.AddMinutes(
    "music""Listen to music""music"70100"")
        mgantt1.AddMinutes(
    "wait""Wait for train""wait"10100"toTrain")
        mgantt1.AddMinutes(
    "train""Train ride""train"4575"wait")
        mgantt1.AddMinutes(
    "toWork""Walk to work""walk"100"train")
        mgantt1.AddMinutes(
    "work""Sit down at desk"""20"toWork")
        
        
    page.cell(3,1).AddComponent(mgantt1.abmcomp)
     
    Johan Schoeman and joulongleu like this.
  4. joulongleu

    joulongleu Member

    Hi:Mashiane: The following problem occurs
    java.text.ParseException: Unparseable date: "2015-01-01"
     
  5. Mashiane

    Mashiane Expert Licensed User

    You need to set the DateTime.DateFormat = "yyyy-MM-dd" in your code before. I updated the component code and its also in post 1.
     
    joulongleu likes this.
  6. joulongleu

    joulongleu Member

    Run is ok ,Thank you very much.
     
  7. joulongleu

    joulongleu Member

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

    frollow as :

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

    joulongleu Member

    The problem has been solved,Thank you.
     
  9. alwaysbusy

    alwaysbusy Expert Licensed User

    @joulongleu It would be nice if you could post your solution as reference for others who encounter the same problem.
     
    joulongleu likes this.
  10. joulongleu

    joulongleu Member

    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)});

    Code:
    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
     
    Anser, Mashiane and alwaysbusy like 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