i looking javascript chart gant chart must not have y axis. data given respective of x axis only. here have attached sample design chart. searched in charts available using javascript , can't find solution.
thanks in advance help. 
fusionwidgets, part of fusioncharts library, can used render gantt chart. per core philosophy of fusioncharts offers wide variety of attributes configure per requirements. please refer docs play around chart. please visit gallery view more of samples.
for above requirement of having no y-axis name, ganttwidthpercent can set 100. below implementation of or 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 , time based gantt chart --> <div id="chart-container">fusioncharts render here</div>
Comments
Post a Comment