how to draw a javascript gantt chart with respective of x axis only

Question

I am looking for a javascript chart like gant chart but it must not have y axis. data given with respective of x axis only. Here I have attached the sample design for chart. Searched in all charts available using javascript , but i can't find a solution.

Thanks in advance for help.

Answer 1

  google.charts.load('current', {'packages':['gantt']}); google.charts.setOnLoadCallback(drawChart); function drawChart() { var data = new google.visualization.DataTable(); data.addColumn('string', 'Task ID'); data.addColumn('string', 'Task Name'); data.addColumn('string', 'Resource'); data.addColumn('date', 'Start Date'); data.addColumn('date', 'End Date'); data.addColumn('number', 'Duration'); data.addColumn('number', 'Percent Complete'); data.addColumn('string', 'Dependencies'); data.addRows([ ['2014Spring', 'Spring 2014', 'spring', new Date(2014, 2, 22), new Date(2014, 5, 20), null, 100, null], ['2014Summer', 'Summer 2014', 'summer', new Date(2014, 5, 21), new Date(2014, 8, 20), null, 100, null], ['2014Autumn', 'Autumn 2014', 'autumn', new Date(2014, 8, 21), new Date(2014, 11, 20), null, 100, null], ['2014Winter', 'Winter 2014', 'winter', new Date(2014, 11, 21), new Date(2015, 2, 21), null, 100, null], ['2015Spring', 'Spring 2015', 'spring', new Date(2015, 2, 22), new Date(2015, 5, 20), null, 50, null], ['2015Summer', 'Summer 2015', 'summer', new Date(2015, 5, 21), new Date(2015, 8, 20), null, 0, null], ['2015Autumn', 'Autumn 2015', 'autumn', new Date(2015, 8, 21), new Date(2015, 11, 20), null, 0, null], ['2015Winter', 'Winter 2015', 'winter', new Date(2015, 11, 21), new Date(2016, 2, 21), null, 0, null], ]); var options = { height: 400, gantt: { trackHeight: 30 } }; var chart = new google.visualization.Gantt(document.getElementById('chart_div')); chart.draw(data, options); } 

 <script type="text/javascript" src="https://www.gstatic.com/charts/loader.js"></script> <div id="chart_div"></div> 

HTML

   <script type="text/javascript" src="https://www.gstatic.com/charts/loader.js"></script>
         <div id="chart_div"></div>

Javascript

  google.charts.load('current', {'packages':['gantt']});
google.charts.setOnLoadCallback(drawChart);

function drawChart() {

  var data = new google.visualization.DataTable();
  data.addColumn('string', 'Task ID');
  data.addColumn('string', 'Task Name');
  data.addColumn('string', 'Resource');
  data.addColumn('date', 'Start Date');
  data.addColumn('date', 'End Date');
  data.addColumn('number', 'Duration');
  data.addColumn('number', 'Percent Complete');
  data.addColumn('string', 'Dependencies');

  data.addRows([
    ['2014Spring', 'Spring 2014', 'spring',
     new Date(2014, 2, 22), new Date(2014, 5, 20), null, 100, null],
    ['2014Summer', 'Summer 2014', 'summer',
     new Date(2014, 5, 21), new Date(2014, 8, 20), null, 100, null],
    ['2014Autumn', 'Autumn 2014', 'autumn',
     new Date(2014, 8, 21), new Date(2014, 11, 20), null, 100, null],
    ['2014Winter', 'Winter 2014', 'winter',
     new Date(2014, 11, 21), new Date(2015, 2, 21), null, 100, null],
    ['2015Spring', 'Spring 2015', 'spring',
     new Date(2015, 2, 22), new Date(2015, 5, 20), null, 50, null],
    ['2015Summer', 'Summer 2015', 'summer',
     new Date(2015, 5, 21), new Date(2015, 8, 20), null, 0, null],
    ['2015Autumn', 'Autumn 2015', 'autumn',
     new Date(2015, 8, 21), new Date(2015, 11, 20), null, 0, null],
    ['2015Winter', 'Winter 2015', 'winter',
     new Date(2015, 11, 21), new Date(2016, 2, 21), null, 0, null],

  ]);

  var options = {
    height: 400,
    gantt: {
      trackHeight: 30
    }
  };

  var chart = new google.visualization.Gantt(document.getElementById('chart_div'));

  chart.draw(data, options);
}

Answer 2

FusionWidgets, a part of FusionCharts library, can be used to render a gantt chart. As per the core philosophy of FusionCharts it offers a wide variety of attributes to configure as per the requirements. Please refer to the docs to play around with your chart. Please visit gallery to view more of the samples.

For your above requirement of having no y-axis name, ganttWidthPercent can be set to 100 . Below is an implementation of so or this fiddle demo .

 FusionCharts.ready(function() { var timeShiftChart = new FusionCharts({ type: 'gantt', renderAt: 'chart-container', width: '650', height: '400', dataFormat: 'json', dataSource: { "chart": { "dateformat": "mm/dd/yyyy", "outputdateformat": "hh:mn", "caption": "Development Division - Work Schedule", "canvasBorderAlpha": "30", "ganttWidthPercent": "100", "useVerticalScrolling": "0", "theme": "fint" }, "categories": [{ "category": [{ "start": "7/15/2014 00:00:00", "end": "7/15/2014 23:59:59", "label": "Today" }, { "start": "7/16/2014 00:00:00", "end": "7/16/2014 23:59:59", "label": "Tomorrow" }] }, { "align": "right", "category": [{ "start": "7/15/2014 00:00:00", "end": "7/15/2014 05:59:59", "label": "6 am" }, { "start": "7/15/2014 06:00:00", "end": "7/15/2014 11:59:59", "label": "12 pm" }, { "start": "7/15/2014 12:00:00", "end": "7/15/2014 17:59:59", "label": "6 pm" }, { "start": "7/15/2014 18:00:00", "end": "7/15/2014 23:59:59", "label": "Midnight" }, { "start": "7/16/2014 00:00:00", "end": "7/16/2014 05:59:59", "label": "6 am" }, { "start": "7/16/2014 06:00:00", "end": "7/16/2014 11:59:59", "label": "12 pm" }, { "start": "7/16/2014 12:00:00", "end": "7/16/2014 17:59:59", "label": "6 pm" }, { "start": "7/16/2014 18:00:00", "end": "7/16/2014 23:59:59", "label": "Midnight" }] }], "processes": { "fontsize": "12", "isbold": "1", "align": "left", "headertext": "Employee", "headerfontsize": "14", "headervalign": "middle", "headeralign": "left", "process": [{ "label": "John S.", "id": "EMP121" }, { "label": "David G.", "id": "EMP122" }, { "label": "Mary P.", "id": "EMP123" }, { "label": "Andrew H.", "id": "EMP124" }, { "label": "Neil M.", "id": "EMP125" }] }, "tasks": { "showlabels": "1", "showstartdate": "1", "task": [{ "processid": "EMP121", "start": "7/15/2014 08:00:00", "end": "7/15/2014 12:30:00", "label": "Logo A" }, { "processid": "EMP121", "start": "7/15/2014 17:00:00", "end": "7/15/2014 19:30:00", "label": "Logo B" }, { "processid": "EMP121", "start": "7/16/2014 09:00:00", "end": "7/16/2014 19:30:00", "label": "Website template" }, { "processid": "EMP122", "start": "7/15/2014 10:00:00", "end": "7/15/2014 20:30:00", "label": "PHP Blueprint" }, { "processid": "EMP122", "start": "7/16/2014 10:00:00", "end": "7/16/2014 20:30:00", "label": "PHP Blueprint" }, { "processid": "EMP123", "start": "7/15/2014 08:00:00", "end": "7/15/2014 12:00:00", "label": "L1 Support" }, { "processid": "EMP123", "start": "7/16/2014 15:00:00", "end": "7/16/2014 21:30:00", "label": "L1 Support" }, { "processid": "EMP124", "start": "7/15/2014 08:00:00", "end": "7/15/2014 20:30:00", "label": "L2 support" }, { "processid": "EMP124", "start": "7/16/2014 08:00:00", "end": "7/16/2014 20:30:00", "label": "L2 support" }, { "processid": "EMP125", "start": "7/15/2014 10:00:00", "end": "7/15/2014 14:30:00", "label": "Network Maintenance" }, { "processid": "EMP125", "start": "7/16/2014 12:00:00", "end": "7/16/2014 14:30:00", "label": "System OS Updates" }] } } }).render(); }); 

 <script src="http://static.fusioncharts.com/code/latest/fusioncharts.js"></script> <script src="http://static.fusioncharts.com/code/latest/themes/fusioncharts.theme.fint.js"></script> <!-- Date and Time Based Gantt chart --> <div id="chart-container">FusionCharts will render here</div>