Cedric

Gantt Chart With Php And Mysql

Recommended Posts

Hello Fusion Team,

 

I have a small internal project managment system, and I would like to add gantt chart to it.

All data is stored in a mysql database, and I use php to query it.

 

 

I tried to play a bit with your evaluation and demo gallery but I am a bit lost.

 

Should i use the JS class? should I export data to an xml file?

My request is to make a query to my database, create the xml or json object, and then display the gantt.

 

Do you have a example for this?

 

 

Rgds,

 

Cedruc

Share this post


Link to post
Share on other sites
Guest Sumedh

Hi,

 

You can generate Gantt Chart XML using MY SQL database with PHP.

 

You would need to generate Gantt Chart specific XML and retrieve data from database accordingly.

 

For more information, please refer the following URL's:

http://blog.fusioncharts.com/2012/03/javascript-charts-using-php-and-mysql-with-fusioncharts-xt-part-2/

 

http://docs.fusioncharts.com/widgets/Contents/?Gantt/Overview.html

Share this post


Link to post
Share on other sites

I have tried this,

 

<title>FusionWidgets XT - My 
First Chart </title>

<script type="text/javascript" 
src="../../FusionCharts/JSClass/FusionCharts.js"></script>
 <script 
type="text/javascript" 
src="../../javascript/jquery-1.7.1.js"></script>
 <script 
type="text/javascript" language="Javascript" 
src="../../FusionCharts/Contents/JS/lib.js"></script>




       <link 
href="../../FusionCharts/assets/ui/css/style.css" rel="stylesheet" 
type="text/css" />





 <style 
type="text/css">

h2.headline 
{

font: normal 110%/137.5% "Trebuchet MS", Arial, Helvetica, 
sans-serif;

padding: 
0;

margin: 25px 0 25px 
0;

color: 
#7d7c8b;

text-align: 
center;

}
           p.small 
{

font: normal 68.75%/150% Verdana, Geneva, 
sans-serif;

color: 
#919191;

padding: 
0;

margin: 0 
auto;

width: 
664px;

text-align: 
center;

}

</style>

 </head>

<body>




       <div id="wrapper">




           <div 
id="header">







<div class="logo"><a class="imagelink"  href="[url="http://www.fusioncharts.com/widgets"]http://www.fusioncharts.com/widgets[/url]" 
target="_blank"><img src="../assets/ui/images/fwxt-logo.png" width="73" 
height="74" alt="FusionWidgets XT logo" 
/></a></div>
    <h1 
class="brand-name">FusionWidgets 
XT</h1>

<h1 class="logo-text">First Gantt 
Chart</h1>

</div>

   <div 
class="content-area">

<div 
id="content-area-inner-main">

<p class="text" align="center">The sample represents a Gantt Chart showing 
the timeline of a fictitious 
project.</p>
    <div id="messageBox" 
style="margin-left:130px; margin-right:130px; 
display:none;"></div>
    <p> </p>





<div class="gen-chart-render">





<div id="chartContainer">FusionWidgets will load 
here</div>


<script 
type="text/javascript"><!--
     var 
myChart = new FusionCharts( "../../FusionCharts/Charts/FCF_Gantt.swf", 
"myChartId", "600", "400", "0", "1" );


     myChart.setXMLData('<chart 
dateFormat="mm/dd/yyyy" caption="Project Gantt" subCaption="From 1st Feb 2007 - 
31st Aug 2007">\n\
<categories>\n\
<category 
start="02/01/2007" end="03/01/2007" label="Feb" />\n\
<category 
start="03/01/2007" end="04/01/2007" label="Mar" />\n\
<category 
start="04/01/2007" end="05/01/2007" label="Apr" />\n\
<category 
start="05/01/2007" end="06/01/2007" label="May" />\n\
<category 
start="06/01/2007" end="07/01/2007" label="Jun" />\n\
<category 
start="07/01/2007" end="08/01/2007" label="Jul" />\n\
<category 
start="08/01/2007" end="09/01/2007" label="Aug" 
/>\n\
</categories>\n\
<processes fontSize="12" isBold="1" 
align="right">\n\
<process label="Identify Customers"  
/>\n\
<process label="Survey 50 Customers" />\n\
<process 
label="Interpret Requirements" />\n\
<process label="Study Competition" 
/>\n\
<process label="Documentation of features" 
/>\n\
<process label="Brainstorm concepts" />\n\
<process 
label="Design & Code" />\n\
<process label="Testing / QA" 
/>\n\
<process label="Documentation of product" />\n\
<process 
label="Global Release" 
/>\n\
</processes>\n\
<tasks>\n\
<task 
start="02/04/2007" end="02/10/2007" />\n\
<task start="02/08/2007" 
end="02/19/2007" />\n\
<task start="02/19/2007" end="03/02/2007" 
/>\n\
<task start="02/24/2007" end="03/02/2007" />\n\
<task 
start="03/02/2007" end="03/21/2007" />\n\
<task start="03/21/2007" 
end="04/06/2007" />\n\
<task start="04/06/2007" end="07/21/2007" 
/>\n\
<task start="07/21/2007" end="08/19/2007" />\n\
<task 
start="07/28/2007" end="08/24/2007" />\n\
<task start="08/24/2007" 
end="08/27/2007" 
/>\n\
</tasks>\n\
</chart>');


myChart.render("chartContainer");
      // 
-->

</script>


</div>

<div 
class="clear"></div>

<p> </p>

<p class="small">    
</p>

<div 
class="underline-dull"></div>

</div>

</div>
  <div 
id="footer">

<p class="highlightBlock">The above sample showcases how to create a Gantt 
chart. Click <a href="../../Contents/Index.html?Gantt/FirstChart.html" 
target="_blank">here</a> to know more on how the code of this example 
works.</p>

</div>
       </div>

 

but I have these errors:

 

SCRIPT438: object does not handle property or method« setXMLData »

gantt.php, Ligne 59 Caractère 7

SCRIPT5009: « showConditionalMessage » is not defined

 

gantt.php, Ligne 112 Caractère 7

 

 

 

 

Share this post


Link to post
Share on other sites
Guest Sashibhusan

Hi,

 

With regard to your query, please note that FusionCharts Free does not support the JavaScript method "setXMLData()" of FusionCharts XT.

 

So, could you please try once by replacing "setXMLData()" with "setDataXML()" ( the older method which is supported by FusionCharts Free)?

 

Hope this helps!

Share this post


Link to post
Share on other sites

Thanks, we progress.

How do you manage dates now? (categories I assume)

 

I try to display all tasks of a project, and I can be with a wide range of dates.

 

How do you manage the top date range?

 

Do I have to calculate this? Is there an auto range option??

 

Do you have any example to deal with this?

 

Rgds,

 

Cedric

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