I am trying the trial version of Fusion Charts. I downloaded FusionCharts XT(v3.2.2) SR5 and FusionWidgets XT (v3.2) Service Release 2 trial versions, copied the scripts and flash files into my application, included FusionCharts/jquery.min.js, FusionCharts/FusionCharts.js, FusionCharts/FusionCharts.HC.js, FusionCharts/FusionCharts.HC.Widgets.js in my aspx, I tried the below chart (Column3D) with sample JSON provided and it worked fine. i was able to see the chart.
var myChart = new FusionCharts("Column3D", "myChartId", "400", "300");
myChart.setJSONData(
{ "chart":
{ "caption": "Weekly Sales Summary", "xAxisName": "Week", "yAxisName": "Sales", "numberPrefix": "$" },
"data":
[{ "label": "Week 1", "value": "14400" },
{ "label": "Week 2", "value": "19600" },
{ "label": "Week 3", "value": "24000" },
{ "label": "Week 4", "value": "15700"}]
});
myChart.render("chartContainer");
But when i want to try gantt chart with sample JSON provided, I get Chart type not supported. Please see the code and complete JSON i tried below.
var myChart = new FusionCharts("Gantt", "myChartId", "800", "700");
myChart.setJSONData(
{ "chart": { "manageresize": "1", "dateformat": "dd/mm/yyyy", "outputdateformat": "ddds mns yy", "ganttwidthpercent": "65", "canvasbordercolor": "999999", "canvasborderthickness": "0", "gridbordercolor": "4567aa", "gridborderalpha": "20", "ganttpaneduration": "3", "ganttpanedurationunit": "m" }, "categories": [{ "bgcolor": "009999", "category": [{ "start": "1/3/2008", "end": "31/8/2008", "label": "Residential Construction", "fontcolor": "ffffff", "fontsize": "16"}] }, { "bgcolor": "4567aa", "fontcolor": "ff0000", "category": [{ "start": "1/3/2008", "end": "31/8/2008", "label": "Months", "alpha": "", "font": "Verdana", "fontcolor": "ffffff", "fontsize": "16"}] }, { "bgcolor": "ffffff", "fontcolor": "1288dd", "fontsize": "10", "isbold": "1", "align": "center", "category": [{ "start": "1/3/2008", "end": "31/3/2008", "label": "March" }, { "start": "1/4/2008", "end": "30/4/2008", "label": "April" }, { "start": "1/5/2008", "end": "31/5/2008", "label": "May" }, { "start": "1/6/2008", "end": "30/6/2008", "label": "June" }, { "start": "1/7/2008", "end": "31/7/2008", "label": "July" }, { "start": "1/8/2008", "end": "31/8/2008", "label": "August"}]}], "processes": { "headertext": "Task", "fontcolor": "000000", "fontsize": "11", "isanimated": "1", "bgcolor": "4567aa", "headervalign": "bottom", "headeralign": "left", "headerbgcolor": "4567aa", "headerfontcolor": "ffffff", "headerfontsize": "16", "align": "left", "isbold": "1", "bgalpha": "25", "process": [{ "label": "Writing", "id": "1" }, { "label": "Signing", "id": "2" }, { "label": "Financing", "id": "3" }, { "label": "Permission", "id": "4" }, { "label": "Plumbing", "id": "5" }, { "label": "Terrace", "id": "6" }, { "label": "Inspection", "id": "7" }, { "label": "Wood Work", "id": "8" }, { "label": "Interiors", "id": "9" }, { "label": "Shifting", "id": "10"}] }, "datatable": { "showprocessname": "1", "namealign": "left", "fontcolor": "000000", "fontsize": "10", "valign": "right", "align": "center", "headervalign": "bottom", "headeralign": "left", "headerbgcolor": "4567aa", "headerfontcolor": "ffffff", "headerfontsize": "16", "datacolumn": [{ "bgcolor": "eeeeee", "headertext": "Start", "text": [{ "label": "7/3/2008" }, { "label": "6/4/2008" }, { "label": "1/5/2008" }, { "label": "13/5/2008" }, { "label": "2/5/2008" }, { "label": "1/6/2008" }, { "label": "15/6/2008" }, { "label": "22/6/2008" }, { "label": "18/6/2008" }, { "label": "15/7/2008"}] }, { "bgcolor": "eeeeee", "headertext": "Finish", "text": [{ "label": "22/4/2008" }, { "label": "12/5/2008" }, { "label": "2/6/2008" }, { "label": "19/6/2008" }, { "label": "19/6/2008" }, { "label": "19/7/2008" }, { "label": "11/8/2008" }, { "label": "5/8/2008" }, { "label": "22/7/2008" }, { "label": "11/8/2008"}] }, { "bgcolor": "eeeeee", "headertext": "Hrs", "text": [{ "label": "150" }, { "label": "340" }, { "label": "60" }, { "label": "20" }, { "label": "30" }, { "label": "45" }, { "label": "40" }, { "label": "102" }, { "label": "60" }, { "label": "30" }, { "label": "90" }, { "label": "30"}] }, { "align": "right", "bgcolor": "4567aa", "bgalpha": "25", "headertext": "Cost", "isbold": "1", "text": [{ "label": "$4100" }, { "label": "$8290" }, { "label": "$12340" }, { "label": "$2330" }, { "label": "$4550" }, { "label": "$15720" }, { "label": "$1780" }, { "label": "$32330" }, { "label": "$9890" }, { "label": "$1110" }, { "label": "$1260" }, { "label": "$4260"}]}] }, "tasks": { "task": [{ "label": "Planned", "processid": "1", "start": "7/3/2008", "end": "18/4/2008", "id": "1-1", "color": "4567aa", "height": "32%", "toppadding": "12%" }, { "label": "Actual", "processid": "1", "start": "9/3/2008", "end": "22/4/2008", "id": "1", "color": "EEEEEE", "alpha": "100", "toppadding": "56%", "height": "32%" }, { "label": "Planned", "processid": "8", "start": "22/6/2008", "end": "29/7/2008", "id": "2-1", "color": "4567aa", "alpha": "100", "height": "32%", "toppadding": "12%" }, { "label": "Actual", "processid": "8", "start": "22/6/2008", "end": "5/8/2008", "id": "2", "color": "EEEEEE", "alpha": "100", "height": "32%", "toppadding": "56%", "percentcomplete": "78" }, { "label": "Planned", "processid": "2", "start": "6/4/2008", "end": "2/5/2008", "id": "3-1", "color": "4567aa", "height": "32%", "toppadding": "12%" }, { "label": "Actual", "processid": "2", "start": "6/4/2008", "end": "12/5/2008", "id": "3", "color": "EEEEEE", "alpha": "100", "isanimated": "1", "height": "32%", "toppadding": "56%" }, { "label": "Planned", "processid": "9", "start": "18/6/2008", "end": "21/7/2008", "id": "4-1", "color": "4567aa", "height": "32%", "toppadding": "12%" }, { "label": "Actual", "processid": "9", "start": "18/6/2008", "end": "22/7\t/2008", "id": "4", "color": "EEEEEE", "alpha": "100", "isanimated": "1", "height": "32%", "toppadding": "56%" }, { "label": "Planned", "processid": "3", "start": "1/5/2008", "end": "2/6/2008", "id": "5-1", "color": "4567aa", "height": "32%", "toppadding": "12%" }, { "label": "Actual", "processid": "3", "start": "1/5/2008", "end": "2/6/2008", "id": "5", "color": "EEEEEE", "height": "32%", "toppadding": "56%" }, { "label": "Planned", "processid": "4", "start": "11/5/2008", "end": "12/6/2008", "id": "6-1", "color": "4567aa", "height": "32%", "toppadding": "12%" }, { "label": "Actual", "processid": "4", "start": "13/5/2008", "end": "19/6/2008", "id": "6", "color": "EEEEEE", "height": "32%", "toppadding": "56%" }, { "label": "Planned", "processid": "5", "start": "1/5/2008", "end": "12/6/2008", "id": "7-1", "color": "4567aa", "height": "32%", "toppadding": "12%" }, { "label": "Actual", "processid": "5", "start": "2/5/2008", "end": "19/6/2008", "id": "7", "color": "EEEEEE", "height": "32%", "toppadding": "56%" }, { "label": "Planned", "processid": "6", "start": "1/6/2008", "end": "12/7/2008", "id": "8-1", "color": "4567aa", "height": "32%", "toppadding": "12%" }, { "label": "Actual", "processid": "6", "start": "1/6/2008", "end": "19/7/2008", "id": "8", "color": "EEEEEE", "height": "32%", "toppadding": "56%", "percentcomplete": "91" }, { "label": "Planned", "processid": "7", "start": "11/6/2008", "end": "7/8/2008", "id": "9-1", "color": "4567aa", "height": "32%", "toppadding": "12%" }, { "label": "Actual", "processid": "7", "start": "15/6/2008", "end": "11/8/2008", "id": "9", "color": "EEEEEE", "height": "32%", "toppadding": "56%" }, { "label": "Planned", "processid": "10", "start": "11/7/2008", "end": "7/8/2008", "id": "10-1", "color": "4567aa", "height": "32%", "toppadding": "12%" }, { "label": "Actual", "processid": "10", "start": "15/7/2008", "end": "11/8/2008", "id": "10", "color": "EEEEEE", "height": "32%", "toppadding": "56%"}] }, "connectors": [{ "connector": [{ "fromtaskid": "3", "totaskid": "5", "color": "4567aa", "thickness": "2", "fromtaskconnectstart": "1" }, { "fromtaskid": "8", "totaskid": "2", "color": "4567aa", "thickness": "2", "fromtaskconnectstart": "1"}]}], "milestones": { "milestone": [{ "date": "7/8/2008", "taskid": "10-1", "color": "2E4472", "shape": "star", "tooltext": "Original moving date" }, { "date": "21/8/2008", "taskid": "10", "color": "999999", "shape": "star", "tooltext": "New estimated moving date"}] }, "legend": { "item": { "label": "Slack (Delay)", "color": "FF5E5E"} }, "styles": { "definition": [{ "type": "Font", "name": "legendFont", "size": "12"}], "application": [{ "toobject": "LEGEND", "styles": "legendFont"}]} });
myChart.render("chartContainer");
I dont think there is any problem with the JSON asi took it straight from the sample. But why am i getting Chart type not supported? Is there anything additional we have to do to make fusionwidgets work? Any help would be appreciated.
The latest version of FusionWidgets XT 3.3.1 supports Gantt chart in JavaScript flavor.
Refer for more info at: http://forum.fusioncharts.com/topic/13689-javascript-variant-of-gantt-chart/