3 Replies Latest reply on Dec 20, 2011 2:21 PM by Pamela

    How to style a Scheduling Gantt graph?

    Pamela
      Jdeveloper version: 11.1.2.1.0

      Hello, I am trying to style a Scheduling Gantt graph. I need to change the width of it and to make it shorter. Also I need to change the headers of the graph background color color and border color.

      <dvt:schedulingGantt id="gantt1" value="#{bindings.PersonView1.schedulingGanttModel}" var="row"
                                               startTime="2011-07-04 00:00:00" endTime="2011-07-04 23:00:00" summary="gsg"
                                               showMenuBar="false" showToolbar="false" iconPlacement="left"
                                               showTasksAsDailyBar="true" taskSelectionListener="#{homeBean.gga}">
                              <f:facet name="major">
                                  <dvt:timeAxis scale="days" id="ta1"/>
                              </f:facet>
                              <f:facet name="minor">
                                  <dvt:timeAxis scale="hours" id="ta2"/>
                              </f:facet>
                              <f:facet name="nodeStamp">
                                  <af:column sortProperty="#{bindings.PersonView1.hints.PersonId.name}" sortable="false"
                                             headerText="#{bindings.PersonView1.hints.PersonId.label}" id="c1">
                                      <af:outputText value="#{row.PersonId}" id="ot1">
                                          <af:convertNumber groupingUsed="false"
                                                            pattern="#{bindings.PersonView1.hints.PersonId.format}"/>
                                      </af:outputText>
                                  </af:column>
                              </f:facet>
                          </dvt:schedulingGantt>
      If you don't have ideas I'll try doing it with javascript.
        • 1. Re: How to style a Scheduling Gantt graph?
          Pamela
          http://docs.oracle.com/cd/E24382_01/apirefs.1112/e17498/toc.htm

          But finding things like that with google is hard, don't know why. Maybe I can't use google right.
          • 2. Re: How to style a Scheduling Gantt graph?
            John Stegeman
            http://download.oracle.com/docs/cd/E16162_01/index.htm is the starting point for the 11.1.2.1 docs
            • 3. Re: How to style a Scheduling Gantt graph?
              Pamela
              I did the resize and restyle with javascript and jquery. And I am also hiding the columns that are left from the graph.
               
               <af:panelStretchLayout topHeight="83px" id="ptl1" bottomHeight="0" startWidth="0" endWidth="0"
                                                         inlineStyle="vertical-align:bottom;" binding="#{personManagerBean.gantt}">
                                      <f:facet name="top">
                                          <af:serverListener type="jsServerListener" method="#{ganttBean.serverEventHandler}"/>
                                          <dvt:schedulingGantt binding="#{ganttBean.gantt2}" id="gantt"
                                                               value="#{bindings.PersonVewGantt2_11.schedulingGanttModel}" var="row"
                                                               startTime="#{personManagerBean.ganttFromDate}"
                                                               endTime="#{personManagerBean.ganttToDate}" rendered="true"
                                                               splitterPosition="1" summary="graph" showMenuBar="false"
                                                               showToolbar="false" iconPlacement="left" labelPlacement="innerCenter"
                                                               backgroundColor="#fcfcfc" styleClass="tableHeader">
                                              <f:facet name="customChartContextMenu">
                                                  <af:popup childCreation="deferred" autoCancel="enabled" id="p3"/>
                                              </f:facet>
                                              <f:facet name="major">
                                                  <dvt:timeAxis scale="days" id="ta3"/>
                                              </f:facet>
                                              <f:facet name="minor">
                                                  <dvt:timeAxis scale="hours" id="ta4"/>
                                              </f:facet>
                                              <f:facet name="nodeStamp">
                                                  <af:column rendered="true" headerText="Name" id="c2">
                                                      <af:outputText rendered="true" id="ot9"/>
                                                  </af:column>
                                              </f:facet>
                                              <dvt:ganttLegend id="gl2" rows="2" visible="false"/>
                                          </dvt:schedulingGantt>
                                      </f:facet>
               </af:panelStretchLayout>
               function executeOnLoad(func, elementId) {
                  node = document.getElementById(elementId);
                  if (node !== null) {
                      //      alert (elementId + " loaded");
                      func();
                  }
                  else {
                      setTimeout(function () {
                          executeOnLoad(func, elementId);
                      },
              50);
                  }
              }
              
              function executeOnLoad2(func, param, elementId) {
                  node = document.getElementById(elementId);
                  if (node !== null) {
                      //alert (elementId + " loaded");
                      func(param);
                  }
                  else {
                      setTimeout(function () {
                          executeOnLoad2(func, param, elementId);
                      },
              50);
                  }
              }
              
              function hideGanttSplitter() {
                  $("#pt1\\:gantt\\:splitter\\:\\:d").css("left", "0");
              }
              
              function resize(element, sizeDifference) {
                  $.each(element, function () {
                      var width = $(this).width();
                      var newWidth = width * sizeDifference;
                      $(this).css("width", newWidth  + "px");
                      var position = $(this).position();
                      var positionLeft = position.left;
                      if (positionLeft > 0) {
                          var newPositionLeft = positionLeft * sizeDifference;
                          $(this).css("left",  newPositionLeft  + "px");
                      }
                  });
              }
              
              function resizeBottom(widthDifference) {
                  resize($(".x1cf"), widthDifference);// resizeBars
                  $.each($(".x1cf").children(), function () {
                      resize($(this), widthDifference);
                  });
              
                  var oldScrollerChildWidth = $("#pt1\\:gantt\\:ctt\\:\\:scroller").children().eq(0).width();
                  var newScrollerChildWidth = oldScrollerChildWidth * widthDifference - (10 * widthDifference);
              
                  $("#pt1\\:gantt\\:ctt\\:\\:scroller").children().css("width", newScrollerChildWidth + "px");
                  
               
              }
              
               function resizeGantt (widthDifference) {
                          //x1fl minor axis     
                          $(".x1fm").css("background-color", "#4D6D99").css("border-right", "1px solid #FCFCFC");
                          
                          resize($(".x1fm"), widthDifference);
                         
                          //x1fl major axis
                          $(".x1fl").css("padding", "5px 0 1px 0").css("border-right", "1px solid #FCFCFC");
                          resize($(".x1fl"), widthDifference); 
                      
                          var scrollerId = "pt1:gantt:ctt::scroller";
                          executeOnLoad2(resizeBottom, widthDifference, scrollerId);
                          
                      }
              function styleAndResizeGantt() {
                  hideGanttSplitter();   
                   $(".x1fm").css("height", "15px").css("padding", "5px 0 1px 0");
                       $(".x1fl").css("height", "15px").css("padding", "5px 0 1px 0");
                  var defaultGanttWidth = $("#pt1\\:gantt\\:\\:majorAxis").width();
                  var ganttVisiblePartWidth = $("#pt1\\:gantt\\:ctt\\:\\:db").width();
              
                  var dayCount = $(".x1fl").length - 1;
                  var defaultGanttWidthPerDay = defaultGanttWidth / dayCount;
              
                  if (ganttVisiblePartWidth < 1000) {
                      ganttVisiblePartWidth = 1000;
                  }
                  var widthDifference = ganttVisiblePartWidth / defaultGanttWidthPerDay;
                      if (widthDifference < 1) { 
                          $(".x1fi").css("display", "none");//default minor axis borders   
                          resizeGantt (widthDifference);
                      }  
              }
              
              executeOnLoad(styleAndResizeGantt, "pt1:gantt:ctt::db");