Render Highcharts Gantt

Documentation

Parameters

• …

Implementation

%STARTINCLUDE%%ADDTOZONE{"script" id="HIGHCHARTS::GANTT" requires="JQUERYPLUGIN" 
text="<script src='https://code.highcharts.com/highcharts.js'></script>
<script src='https://code.highcharts.com/gantt/modules/gantt.js'></script>
<script src='https://code.highcharts.com/gantt/modules/exporting.js'></script>"
}%<div id="container"></div>%STOPINCLUDE%

Configuration

%STARTSECTION{"config"}%
<literal><script type='text/javascript'>
   var today = new Date(),
    day = 1000 * 60 * 60 * 24;
   // Set to 00:00:00:000 today
   today.setUTCHours(0);
   today.setUTCMinutes(0);
   today.setUTCSeconds(0);
   today.setUTCMilliseconds(0);
   $(document).ready(function(){
   // THE CHART
   Highcharts.ganttChart('container', {
   chart: {
       events: {
         load() {
           let chart = this;
           chart.xAxis[0].setExtremes(Date.UTC(%CALCULATE{"$FORMATTIME($TIMEADD($TIME(), -38, day), $year, $mo, $day)"}%), Date.UTC(%CALCULATE{"$FORMATTIME($TIME(), $year, $mo, $day)"}%))
         }
       }
   },
   title: {
           text: '%TITLE{default="Task Timeline"}%'
   }, 
    xAxis: {
        currentDateIndicator: true
    },
      yAxis: {
      uniqueNames: true
    },
    navigator: {
        enabled: true,
        liveRedraw: true,
        series: {
            type: 'gantt',
            pointPlacement: 0.5,
            pointPadding: 0.25
        },
         yAxis: {
            min: 0,
            max: 3,
            reversed: true,
            categories: []
        }
    },
    scrollbar: {
        enabled: true
    },
    rangeSelector: {
        enabled: true,
        selected: 0
    },
    series: [{
        name: 'Timeline',
        data: [%INCLUDE{"%WEB%.%TOPIC%" section="data"}%]
    }]
   });
});
</script></literal>
%ENDSECTION{"config"}%

Format Data

%STARTSECTION{"data"}%<noautolink>%DBQUERY{"form='Task'%IF{"defined EXTRAQUERY" then=" AND $percntEXTRAQUERY$percnt"}%"
   web="%BASEWEB%"
   sort="StartDate"
   separator=", "
   remote="on"
   format="$percntINCLUDE{\"%WEB%.%TOPIC%\" section=\"task\" TASK=\"$web.$topic\"}$percnt"
}%</noautolink>%ENDSECTION{"data"}%

Format Single Task

• TASK - required - the referenced task topic ( web.topic )

%STARTSECTION{"task"}% %DBQUERY{topic="%TASK%"
      header="{$n            "
      format="id: 'id$topic',$n            name: '$expand(TopicTitle or topic)', "
         +"$percntIF{\"'$expand(Start)'!='0'\" "
               +" then=\"$n            start: Date.UTC($dollarpercntCALCULATE{\\\"$FORMATTIME($TIMEADD($expand(Start), -1, month), $year, $mo, $day)\\\"}$dollarpercnt), "
                     +"$percntIF{\"'$expand(Due)'='0' and '$expand(Start)'!='0'\" then=\"$n            milestone: true\" "
                           +"else=\"$n            end: Date.UTC($percntCALCULATE{\\"$FORMATTIME($TIMEADD($expand(Due), -1, month), $year, $mo, $day)\\"}$percnt)\""
                     +"}$percnt \" "
               +" else=\"$n            pointWidth: 5\" "
         +"}$percnt "
         +"$percntIF{\"'$expand(Parent)'!=''\" "
               +" then=\",$n            parent: 'id$expand(Parent)'\""
         +"}$percnt$percntIF{\"'$expand(Progress)'!='0'\""
               +" then=\",$n            completed: 0$expand(Progress)\""
         +"}$percnt$percntFORMATLIST{\"$formfield(DependsOn)\" "
               +"hidenull=\"on\" "
               +"header=\",$n           dependency: [\" "
               +"footer=\"]\" "
               +"format=\"'id$1'\" "
         +"}$percnt"
         +"$percntSET{\"THISDEPENDENCY\" value=\"$formfield(DependsOn)\"}$percnt"
      footer="$n         }"
         +"$percntIF{\"$'DEPENDENCIES'='y' and '$percntTHISDEPENDENCY$percnt'!=''\" "
            +"then=\"$dollarpercntFORMATLIST{\\"$percntTHISDEPENDENCY$percnt\\" "
                        +"format=\\"$dollardollarpercntINCLUDE{\\\"%WEB%.%TOPIC%\\\" section=\\\"task\\\" TASK=\\\"%BASEWEB%.$1\\\"}$dollardollarpercnt\\" "
                        +"header=\\", \\" "
                        +"separator=\\", \\" "
                        +"hidenull=\\"on\\" "
                  +"}$dollarpercnt\""
          +"}$percnt"
}%%ENDSECTION{"task"}%

Calls to 'RenderHighchartsGantt'

• College View Template

Copyright