Simple View Demo

Demo Sample Code

 <div id="gantt_here"></div>

<script>
 $(function () {
 buildGantt();
 });
 function buildGantt() {
 var tasks = {
 data: [
    { id: '1', parent: '', title: 'Cool project #1', startDate: '1/1/2017', endDate: '12/31/2017', type: 'project' },
    { id: '2', parent: '1', title: 'Cool milestone #1', startDate: '3/1/2017', endDate: '6/30/2017', type: 'milestone', ptitle: 'Cool project #1' },
    { id: '3', parent: '1', title: 'Cool milestone #2', startDate: '1/1/2017', endDate: '2/1/2017', type: 'milestone', ptitle: 'Cool project #1' },
    { id: '4', parent: '', title: 'Awesome project #2', startDate: '6/1/2016', endDate: '12/31/2018', type: 'project', ptitle: 'Awesome project #2' },
    { id: '5', parent: '4', title: 'Awesome milestone #1', startDate: '6/1/2016', endDate: '8/31/2017', type: 'milestone', ptitle: 'Awesome project #2' },
    { id: '52', parent: '5', title: 'John Doe', startDate: '6/1/2016', endDate: '3/31/2017', type: 'assignment', rrole: 'Development', ptitle: 'Awesome project #2', mtitle: 'Awesome Milestone #1' },
    { id: '53', parent: '5', title: 'Jane Doe', startDate: '3/1/2017', endDate: '7/31/2017', type: 'assignment', rrole: 'Tester', ptitle: 'Awesome project #2', mtitle: 'Awesome Milestone #1' },
    { id: '6', parent: '4', title: 'Awesome milestone #2', startDate: '5/1/2017', endDate: '6/30/2017', type: 'milestone', ptitle: 'Awesome project #2' }
 ]
 };
 xtnsvgantt.config.startMonth = 1;
 xtnsvgantt.config.numberOfMonths = 4;
 xtnsvgantt.config.projectSectionWidth = 200;
 xtnsvgantt.config.startYear = 2017;
 xtnsvgantt.init($("#gantt_here"));
 xtnsvgantt.parse(tasks);
 };
 </script>