This is a more sophisticated version of the HTML Gantt chart that uses the same technique but uses javascript to make it dynamic and easier to update.
Description
Start Date
End Date
Chart
Important Event
24 Aug 2015
22 Oct 2015
Another Event
22 Oct 2015
2 Jun 2016
Something Else
9 Sep 2015
2 Jun 2016
Medium Priority
1 Sep 2015
1 Sep 2015
Low Priority
22 Nov 2015
2 May 2016
You can use this jqGrid to add, edit or remove entries from the above gantt chart. The chart depends on a bit of JSON which is refreshed each time an update is made.
undefined
Gantt Chart Data
ID
Description
Start
End
Indicator
Here is HTML to reproduce the above gantt chart. It should work on most pages, if the correct jQuery references are in place.
Here are the references that your page will need to jQuery, jqGrid and jQuery-UI.
Here’s what the above HTML actually does
Here is how the JSON object is formatted.
var _data=
{
"gantt": {
"bar": [
{
"id":"1",
"description": "Important Event",
"start": "08/24/2015",
"end": "10/22/2015",
"indicator": "redbar"
}
}
}