Sign in to follow this  
Followers 0
Jeff jiang

How to show vertical scroll in gantt

By Jeff jiang, in Using FusionWidgets XT

Recommended Posts

Jeff jiang   

Jeff jiang
Posted

I'm using the gantt.swf, but I have one question, how to show vertical scroll in gantt, Well- intentioned people who help me to fix the issue? which attributes to be configed. Thanks !!!!!!

Share this post

Link to post
Share on other sites

Jeff jiang   

Jeff jiang
Posted

Hi, I see the document of FusionWidgets, V3.3.1 has supported the vertical scrolling, how to set in Javascript ganntt chart.

 

Vertical scrolling

Starting FusionWidgets XT v3.3.1, vertical scrolling has been introduced for the Gantt view pane in JavaScript Gantt chart.

Note: The vertical scrolling is not applicable in Flash Gantt chart.

Share this post

Link to post
Share on other sites

Haritha   

Haritha
Posted

Hi,

 

The vertical scrolling is enabled by default depending on the height of the chart. If the number of processes fits within the height of the chart, then vertical scrolling will not appear. 

 

If you want to see a vertical scroll bar and you are using JavaScript variant of Gantt chart then please set the attribute "useVerticalScrolling" to 1 and also decrease the height of the chart for the vertical scroll bar to appear.

 

Ref.

<chart useVerticalScrolling='1' ...> 

 

Also, to ensure that you see a JavaScript Gantt chart, please place the following line before chart creation code :

 

FusionCharts.setCurrentRenderer("javaScript");

 

Hope this helps.

Share this post

Link to post
Share on other sites

Jeff jiang   

Jeff jiang
Posted

Hi, Haritha

I have updated the my codes according to your comments, but still don't see the vertical scill bar, I will paster my codes as below, would you help me to check my codes?  thanks. I have only modify a litter in FusionWidgets_XT_Trial\FusionWidgets_XT_Trial\Gallery\Gantt\ Gantt5.html  , see the red place.

 

 <body>       
  <h3 class="chart-title" >Gantt Chart for Residential Construction</h3>
        <p> </p>
        <script type="text/javascript" src="../Data/String/js/Gantt5.js" ></script>       
        <div id="chartdiv" align="center">Chart will load here</div>
        <script type="text/javascript">
     FusionCharts.setCurrentRenderer("javaScript");
            var chart = new FusionCharts("../../Charts/Gantt.swf", "ChartId", "580", "300", "0", "1" );
            chart.setXMLData( dataString );
            chart.render("chartdiv");
        </script>
        <p align="center" style="padding-left:5px; padding-right:5px;">In this Gantt Chart, legends are used  to explain color keys. Connectors help in indicating the process flow.</p>
<p> </p>
        <div class="qua-button-holder"></div>
        <div class="show-code-block"></div>
     </body>

 

And I also modify the related the Gantt5.js in "FusionWidgets_XT_Trial\FusionWidgets_XT_Trial\Gallery\Data\String\js\Gantt5.js.    scripts as below, see the red place.

 

var dataString ='<chart useVerticalScrolling="1" manageResize="1" dateFormat="dd/mm/yyyy" outputDateFormat="ddds mns yy" ganttWidthPercent="65" canvasBorderColor="999999" canvasBorderThickness="" gridBorderColor="4567aa" gridBorderAlpha="20" ganttPaneDuration="3" ganttPaneDurationUnit="m" >\n\
    <categories  bgColor="009999" showHoverBand="0">\n\
        <category start="1/3/2008" end="31/8/2008" label="Residential Construction"  fontColor="ffffff" fontSize="16" />\n\
    </categories>\n\
    <categories  bgColor="4567aa" fontColor="ff0000" showHoverBand="0" >\n\
        <category start="1/3/2008" end="31/8/2008" label="Months"  alpha="" font="Verdana" fontColor="ffffff" fontSize="16" />\n\
    </categories>\n\
    <categories  bgColor="ffffff" fontColor="1288dd" fontSize="10" isBold="1" align="center" hoverBandColor="EEEEEE" hoverBandAlpha="20" >\n\
        <category start="1/3/2008" end="31/3/2008" label="March" />\n\
        <category start="1/4/2008" end="30/4/2008" label="April" />\n\
        <category start="1/5/2008" end="31/5/2008" label="May" />\n\
        <category start="1/6/2008" end="30/6/2008" label="June" />\n\
        <category start="1/7/2008" end="31/7/2008" label="July" />\n\
        <category start="1/8/2008" end="31/8/2008" label="August" />\n\
    </categories>\n\
    <processes headerText="Task" fontColor="000000" fontSize="11" isAnimated="1" bgColor="4567aa"  headerVAlign="bottom" headerAlign="left" headerbgColor="4567aa" headerFontColor="ffffff" headerFontSize="16"  align="left" isBold="1" bgAlpha="25" hoverBandColor="869cc8" hoverBandAlpha="25" >\n\
        <process label="Writing" id="1" />\n\
        <process label="Signing" id="2" />\n\
        <process label="Financing" id="3" />\n\
        <process label="Permission" id="4" />\n\
        <process label="Plumbing" id="5" />\n\
        <process label="Terrace" id="6" />\n\
        <process label="Inspection" id="7" />\n\
        <process label="Wood Work" id="8" />\n\
        <process label="Interiors" id="9" />\n\
        <process label="Shifting" id="10" />\n\
    </processes>\n\
    <dataTable showProcessName="1" nameAlign="left" fontColor="000000" fontSize="10" vAlign="right" align="center" headerVAlign="bottom" headerAlign="left" headerbgColor="4567aa" headerFontColor="ffffff" headerFontSize="16" >\n\
        <dataColumn bgColor="eeeeee" headerText="Start" >\n\
            <text label="7/3/2008" />\n\
            <text label="6/4/2008" />\n\
            <text label="1/5/2008" />\n\
            <text label="13/5/2008" />\n\
            <text label="2/5/2008" />\n\
            <text label="1/6/2008" />\n\
            <text label="15/6/2008" />\n\
            <text label="22/6/2008" />\n\
            <text label="18/6/2008" />\n\
            <text label="15/7/2008" />\n\
        </dataColumn>\n\
        <dataColumn bgColor="eeeeee" headerText="Finish">\n\
            <text label="22/4/2008" />\n\
            <text label="12/5/2008" />\n\
            <text label="2/6/2008" />\n\
            <text label="19/6/2008" />\n\
            <text label="19/6/2008" />\n\
            <text label="19/7/2008" />\n\
            <text label="11/8/2008" />\n\
            <text label="5/8/2008" />\n\
            <text label="22/7/2008" />\n\
            <text label="11/8/2008" />\n\
        </dataColumn>\n\
        <dataColumn bgColor="eeeeee" headerText="Hrs">\n\
            <text label="150" />\n\
            <text label="340" />\n\
            <text label="60" />\n\
            <text label="20" />\n\
            <text label="30" />\n\
            <text label="45" />\n\
            <text label="40" />\n\
            <text label="102" />\n\
            <text label="60" />\n\
            <text label="30" />\n\
            <text label="90" />\n\
            <text label="30" />\n\
        </dataColumn>\n\
        <dataColumn align="right" bgColor="4567aa" bgAlpha="25" headerText="Cost" isBold="1">\n\
            <text label="$4100" />\n\
            <text label="$8290" />\n\
            <text label="$12340" />\n\
            <text label="$2330" />\n\
            <text label="$4550" />\n\
            <text label="$15720" />\n\
            <text label="$1780" />\n\
            <text label="$32330" />\n\
            <text label="$9890" />\n\
            <text label="$1110" />\n\
            <text label="$1260" />\n\
            <text label="$4260" />\n\
        </dataColumn>\n\
    </dataTable>\n\
    <tasks>\n\
        <task label="Planned" processId="1" start="7/3/2008" end="18/4/2008" id="1-1" color="4567aa" height="32%" topPadding="12%" />\n\
        <task label="Actual" processId="1" start="9/3/2008" end="22/4/2008" id="1" color="EEEEEE" alpha="100"  topPadding="56%" height="32%" />\n\
        <task label="" processId="8" start="22/6/2008" end="29/7/2008" id="2-1" color="4567aa" alpha="100"  height="32%" topPadding="12%" showLabel="1"/>\n\
        <task label="" processId="8" start="22/6/2008" end="5/8/2008" id="2" color="EEEEEE" alpha="100"  height="32%" topPadding="56%" percentComplete="78" showLabel="1"/>\n\
        <task label="Planned" processId="2" start="6/4/2008" end="2/5/2008" id="3-1" color="4567aa" height="32%" topPadding="12%" />\n\        <task label="Actual" processId="2" start="6/4/2008" end="12/5/2008" id="3" color="EEEEEE" alpha="100"  isAnimated="1" height="32%" topPadding="56%"/>\n\
        <task label="Planned" processId="9" start="18/6/2008" end="21/7/2008" id="4-1" color="4567aa" height="32%" topPadding="12%" />\n\
        <task label="Actual" processId="9" start="18/6/2008" end="22/7/2008" id="4" color="EEEEEE" alpha="100"  isAnimated="1" height="32%" topPadding="56%"/>\n\
        <task label="Planned" processId="3" start="1/5/2008" end="2/6/2008" id="5-1" color="4567aa" height="32%" topPadding="12%" />\n\
        <task label="Actual" processId="3" start="1/5/2008" end="2/6/2008" id="5" color="EEEEEE" height="32%" topPadding="56%"/>\n\
        <task label="Planned" processId="4" start="11/5/2008" end="12/6/2008" id="6-1" color="4567aa" height="32%" topPadding="12%" />\n\
        <task label="Actual" processId="4" start="13/5/2008" end="19/6/2008" id="6" color="EEEEEE"  height="32%" topPadding="56%"/>\n\
        <task label="Planned" processId="5" start="1/5/2008" end="12/6/2008" id="7-1" color="4567aa" height="32%" topPadding="12%" />\n\
        <task label="Actual" processId="5" start="2/5/2008" end="19/6/2008" id="7" color="EEEEEE"  height="32%" topPadding="56%"/>\n\
        <task label="Planned" processId="6" start="1/6/2008" end="12/7/2008" id="8-1" color="4567aa" height="32%" topPadding="12%" />\n\
        <task label="Actual" processId="6" start="1/6/2008" end="19/7/2008" Id="8" color="EEEEEE" height="32%" topPadding="56%" percentComplete="91"/>\n\
        <task label="Planned" processId="7" start="11/6/2008" end="7/8/2008" Id="9-1" color="4567aa" height="32%" topPadding="12%" />\n\
        <task label="Actual" processId="7" start="15/6/2008" end="11/8/2008" Id="9" color="EEEEEE" height="32%" topPadding="56%"/>\n\
        <task label="Planned" processId="10" start="11/7/2008" end="7/8/2008" Id="10-1" color="4567aa" height="32%" topPadding="12%" />\n\
        <task label="Actual" processId="10" start="15/7/2008" end="11/8/2008" Id="10" color="EEEEEE" height="32%" topPadding="56%"/>\n\
    </tasks>\n\
    <connectors>\n\
        <connector fromTaskId="3" toTaskId="5" color="4567aa" thickness="2" fromTaskConnectStart="1"/>\n\
        <connector fromTaskId="8" toTaskId="2" color="4567aa" thickness="2" fromTaskConnectStart="1"/>\n\
    </connectors>\n\
    <milestones>\n\
        <milestone date="7/8/2008" taskId="10-1" color="2E4472" shape="star" toolText="Original moving date" />\n\
        <milestone date="21/8/2008" taskId="10" color="999999" shape="star" toolText="New estimated moving date" />\n\
    </milestones>\n\
    <legend>\n\
        <item label="Planned" color="4567aa" />\n\
        <item label="Actual" color="999999" />\n\
        <item label="Slack (Delay)" color="FF5E5E" />\n\
    </legend>\n\
    <styles>\n\
        <definition>\n\
            <style type="Font" name="legendFont" size="12" />\n\
        </definition>\n\
        <application>\n\
            <apply toObject="LEGEND" styles="legendFont" />\n\
        </application>\n\
    </styles>\n\
</chart>';

Share this post

Link to post
Share on other sites

Bindhu   

Bindhu
Posted

Hi,

 

I am unable to replicate the issue using your code.

 

Please find attached screen shot of the chart rendered.

 

Please try clearing your cache memory.

 

Hope this helps!

post-62559-0-57415900-1395300311_thumb.png

Share this post

Link to post
Share on other sites

Bindhu   

Bindhu
Posted

Hi,

 

We do not support this feature.

 

Cell heights will be processed automatically depending on the chart height and the number of processes.

 

Hope this helps!

Share this post

Link to post
Share on other sites

Jeff jiang   

Jeff jiang
Posted

Addition information:

I using the \FusionWidgets_XT_Trial \Code\MyFirstChart\customer-satisfaction, I only add one code  below scripts of red one.   but the error message show in IE browse: Retrieving data.Please wait.

Whether Javascript chat support the function "setXMLUrl("Data.xml")" or not?  if not, how to support it ? input a parameter of XML file? 

 

<script type="text/javascript">
                         FusionCharts.setCurrentRenderer('JavaScript');
      var myChart = new FusionCharts( "../../Charts/AngularGauge.swf",
           "myChartId", "400", "200", "0", "1" );
            myChart.setXMLUrl("Data.xml");
            myChart.render("chartContainer");
      
       myChart.addEventListener( "nodatatodisplay", function() {
        if ( window.windowIsReady ){
         notifyLocalAJAXSecurityRestriction();
        }else
        {
         $(document).ready (function(){
          notifyLocalAJAXSecurityRestriction();
         });
        }
       });
       </script>

Share this post

Link to post
Share on other sites

Haritha   

Haritha
Posted

Hi, 

 

Many browsers restrict JavaScript from accessing local file system owing to security reasons. The JavaScript charts, when running locally, will not be able to access data provided as a URL (setXMLUrl/setJSONUrl). If you run the files from a server, it will run absolutely fine, though. When running locally, however, if you provide the data as string (using the Data String method), it works fine.  For information on this, you may refer the documentation link : http://docs.fusionch...singPureJS.html

 

Hence, please try running the sample from a server and check it again.

 

Hope this helps.

Share this post

Link to post
Share on other sites

Jeff jiang   

Jeff jiang
Posted

hi,

Above the issue (Retrieving data.Please wait. ), I adjusted the IE version to IE 10,  the data can be shown.  other IE version didn't  work .  Whether Javascript chat  restricted  IE's version or not?

Share this post

Link to post
Share on other sites

Haritha   

Haritha
Posted

Hi,

 

Please try running your sample after deploying it on a server and check again. The URL should be an IP of server or a localhost if your server is present on the same machine. Please refer the attached screenshot.

 

You are able to see the chart fine on IE 10 since as said in the previous post, Internet Explorer browser restricts JavaScript from accessing local file system owing to security reasons in IE 11 and this restriction is not present in other versions of IE.

 

Hope this helps.

post-37797-0-58640900-1395828512_thumb.png

Share this post

Link to post
Share on other sites

Jeff jiang   

Jeff jiang
Posted

hi,

I deployed my web site in IIS,  input the  URL contained  "an IP of server",  only IE 10 can normal show the chart, other IE versions(IE8,9,11) cannot show the chart. I don't know why it is . :(

Share this post

Link to post
Share on other sites

Haritha   

Haritha
Posted

Hi,

 

Could you please send us a screenshot of the URL being accessed from your browser? Also, please check if you see any error in the console of IE 9. (To view the console, go to Tools-  Developer tools- Console).

 

Awaiting your response.

Share this post

Link to post
Share on other sites

Jeff jiang   

Jeff jiang
Posted

Sorry, I don't know how to upload my snapshot, I don't find any places to upload my images. :(

Or would you give me an email address? I send my snapshots or my test application to you. is it ok?

Share this post

Link to post
Share on other sites

Guest Sashibhusan   

Guest Sashibhusan
Posted

Hi,

 

We have tested your sample application from Visual Studio 2010 and it seems Gantt chart is rendering  fine in almost all browsers (tested in: IE10/8/11, Chrome, Firefox).

Please find the attached screen shot of the same for your reference.

Could you please let us know, if you are getting any error in browser console, while trying to render in IE other than IE10?

Also, a couple of screen shots would help us to under your issue, as the sample application is not replicating the same issue from our end.

Hope this helps!

post-23588-0-49450500-1397026557_thumb.png

Share this post

Link to post
Share on other sites

Jeff jiang   

Jeff jiang
Posted
hi,
I have attached 3 snapshots, my IE version is IE11.
Press F12 to development tools, for choosing the document mode to emulate other IE versions .
 
for figure 1, when I choose the document mode is 10, the gantt can normal show.
for figure 2, when I choose the document mode is 9, the gantt cannot normal show. and I don't see any error .
for figure 3,when I choose the document mode is 8, the gantt also cannot normal show. and I don't see any error .
 
Looking forward to your helps. thanks.

 

post-62561-0-04112600-1397230041_thumb.jpg

post-62561-0-14034500-1397230057_thumb.jpg

post-62561-0-19583700-1397230072_thumb.jpg

Share this post

Link to post
Share on other sites

Swarnam   

Swarnam
Posted

Hi Jeff,

 

Can you please try loading the Gantt chart using native IE 9 and IE 8?

 

Also, please try explicitly loading the FusionCharts.HC.Gantt.js in the head section?

Share this post

Link to post
Share on other sites

Create an account or sign in to comment

You need to be a member in order to leave a comment

Create an account

Sign up for a new account in our community. It's easy!

Register a new account

Sign in

Already have an account? Sign in here.

Sign In Now
Sign in to follow this  
Followers 0
Go To Topic Listing Using FusionWidgets XT