Here's an example of how the Gantt chart can be integrated into a mini-app, which in this case, is an example of project managment. The Gantt chart is dynamic - you can drag the events left and right and enlarge the event if you click the event towards the right-hand side.
The data is loaded from and saved to the browsers localData variable (which is like a cookie but does not get sent back and forth to the server).
TODO:
keyup event.
If you want a skeleton/cut down version of this page, with no extraneous text and just the Gantt chart on it then you can find it here.
Name:
Start date:
(dd/mm)
Duration:
(days)
Percent Complete:
This goes in the documents header:
<script src="RGraph.common.core.js"></script> <script src="RGraph.common.dynamic.js"></script> <script src="RGraph.gantt.js"></script>Put this where you want the chart to show up:
<canvas id="cvs" width="950" height="450">[No canvas support]</canvas>
<p />
<button onclick="addPerson()">Add...</button>
<button onclick="deletePerson()">Delete</button>
<p id="eventForm">
<span class="formLabel">Name:</span>
<input type="text" id="name" />
<button onclick="updateName()">Update</button>
<br />
<span class="formLabel">Start date:</span>
<input type="text" id="startdate" readonly />
<i>(dd/mm)</i>
<br />
<span class="formLabel">Duration:</span>
<input type="text" id="duration" readonly />
<i>(days)</i>
<br />
<span class="formLabel">% Complete:</span>
<input type="text" id="complete" />
<button onclick="updateComplete()">Update</button>
<p>
<button id="reset" onclick="reset()" style="background-color: red; color: white">Reset data to defaults</button>
</p>
</p>
This is the code that generates the chart: