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.

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.

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.

        <link rel="stylesheet" type="text/css" href="http://ajax.googleapis.com/ajax/libs/jqueryui/1.8.14/themes/base/jquery-ui.css">
        <link rel="stylesheet" type="text/css" href="http://trirand.com/blog/jqgrid/themes/ui.jqgrid.css">

        <script type="text/javascript" src="http://www.jlion.com/js/jquery.min.js"></script>
        <script type="text/javascript" src="http://www.jlion.com/js/trirand/jquery.jqGrid.min.js"></script>
        <script type="text/javascript" src="http://www.jlion.com/js/trirand/grid.locale-en.js"></script>
        <script type="text/javascript" src="http://www.jlion.com/js/jquery-ui.min.js"></script>
     

Here's what the above HTML actually does

    <!-- gantshow.css is the style sheet that controls formatting of the chart. Some important classes 
        are: DESCRIPTION, STARTDATE, ENDDATE and BARINDICATOR, which control the formatting for these columns. -->
    <link rel="stylesheet" href="http://www.jlion.com/css/ganttshow.css">

    <!-- gantshow.js is the javascript page that creates the chart as a series of embedded DIV elements. -->
    <script src="http://www.jlion.com/js/ganttshow.js"></script>

    <!-- Here we override the INDICATOR style to set the width of the indicator column to 500px. -->
    <style type="text/css">.barindicator {width: 500px;}</style>

    <!-- Now we actually create the chart. We'll use the jQuery "bind" function to make sure that this javascript doesn't 
    execute until the entire page has loaded. GANTTCHART is the name of a DIV on the page, and it's followed by JSON string 
    that represents the contents to display in the chart.-->
    <script type="text/javascript">
    $(window).bind("load", function() {
    var _ganttChart = new ganttchart();
    _ganttChart.makechart('ganttchart',
    '{\"gantt\":{\"bar\":[{\"id\":\"1\",\"description\":\"Important Event\",\"start\":\"08/24/2015\",\"end\":\"10/22/2015\",\"indicator\":\"redbar\"},{\"id\":\"2\",\"description\":\"Another Event\",\"start\":\"10/22/2015\",\"end\":\"06/02/2016\",\"indicator\":\"redline\"},{\"id\":\"3\",\"description\":\"Something Else\",\"start\":\"9/09/2015\",\"end\":\"06/02/2016\",\"indicator\":\"blackrange\"},{\"id\":\"4\",\"description\":\"Medium Priority\",\"start\":\"9/01/2015\",\"end\":\"09/01/2015\",\"indicator\":\"redmilestone\"},{\"id\":\"5\",\"description\":\"Low Priority\",\"start\":\"11/22/2015\",\"end\":\"05/02/2016\",\"indicator\":\"blueline\"}]}}'
    )});
    </script>

    <!-- Finally here we have the DIV element that will contain the gantt chart. -->
    <div id="ganttchart" class="chart"></div>
    

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"
                        }
                }
           }