I wanted to create a gantt chart using fusion charts. The chart doesn't get rendered a element is created, with Chart type not supported as text. Using the fusion chart debugger I get an Error that p.init is not a function in fusioncharts.js This is the code for the gantt chart.
<html xmlns="http://www.w3.org/1999/html"> <head> <title>Weekly Project Status Reports</title> <script type="text/javascript" src="fusioncharts/fusioncharts.js"></script> <script type="text/javascript" src="fusioncharts/fusioncharts.gantt.js"></script> <script type="text/javascript" src="fusioncharts/fusioncharts.widgets.js"></script> <script type="text/javascript" src="fusioncharts/themes/fusioncharts.theme.fint.js"></script> <script type="text/javascript" src="http://code.jquery.com/jquery-2.1.0.min.js"></script> <script type="text/javascript"> FusionCharts['debugger'].outputTo(function (id, sender, eventName, eventArgs) { console.log(id + ': '+eventName + ' from ' + sender+','+eventArgs); }); FusionCharts['debugger'].outputFormat('verbose'); FusionCharts['debugger'].enable(true); </script> <script type="text/javascript"> FusionCharts.ready(function(){ var weeklyStatusChart = new FusionCharts({ "type": "gantt", "renderAt": "chartContainer", "width": "1000", "height": "500", "dataFormat": "json", "dataSource": { "chart": { "dateformat": "mm/dd/yyyy", "caption": "Project Gantt", "subcaption": "From 1st Feb 2007 - 31st Aug 2007" }, "categories": [ { "category": [ { "start": "02/01/2007", "end": "03/01/2007", "label": "Feb" }, { "start": "03/01/2007", "end": "04/01/2007", "label": "Mar" } ] } ], "processes": { "fontsize": "12", "isbold": "1", "align": "right", "process": [ { "label": "Identify Customers" }, { "label": "Survey 50 Customers" } ] }, "tasks": { "task": [ { "start": "02/04/2007", "end": "02/10/2007" }, { "start": "02/08/2007", "end": "02/19/2007" } ] } } }) weeklyStatusChart.render(); }); </script> </head> <body> <div id="chartContainer">--- Weekly Project Status</div> </body> </html>
