# Project S.T.A.R schedule for 2017

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:

- Incorporate a notes field. These notes would be added to the Gantt chart data (the Gantt chart would ignore the extra data).
- Do away with the update buttons and have the data automatically saved using the `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 - it should be placed AFTER the canvas tag(s):