FusionCharts - Simple Gantt Chart showing Trend Line

Created using FusionCharts Suite XT - www.fusioncharts.com

HTML

<script src="http://static.fusioncharts.com/code/latest/fusioncharts.js"></script>
<script src="http://static.fusioncharts.com/code/latest/fusioncharts.widgets.js"></script>
<!-- Showcase of trend line in Gantt chart -->
<div id="chart-container">FusionCharts will render here</div>

CSS

#chart-container {
  max-width: 479px;
}

JavaScript

FusionCharts.ready(function () {
    var cnstrctnPlan = new FusionCharts({
        type: 'gantt',
        renderAt: 'chart-container',
        width: '100%',
        height: '300',
        dataFormat: 'json',
        dataSource: {
    "chart": {
        "theme":"fint",
        "bgColor":"#18273b",
        "bgAlpha":"100",
        "canvasBgColor":"#18273b",
        "canvasBgAlpha":"100", 
        "dateformat": "dd/mm/yyyy",
        "outputdateformat": "hh:mn",
        "ganttlinecolor": "283b56",
        "ganttlinealpha": "20",
        "gridbordercolor": "transparent",
        "canvasbordercolor": "30e29f",
        "showshadow": "0",
        "showborder": "0",
        "chartLeftMargin":"0",
        "chartTopMargin":"140",
        "chartRightMargin":"0",
        "chartBottomMargin":"25",
        "taskbarroundradius": "6"

    },
    "categories": [
        {
            "bgcolor": "transparent",
            "showHoverBand": "0",            
            "category": [
                {
                    "start": "08:00:00",
                    "end": "24:00:00",
                    "name": "",
                    "fontcolor": "FFFFFF"
                }
            ]
        },
        {            
            "bgColor":"transparent",
            "bgalpha": "0",
            "category": [
                {
                    "start": "08:00:00",
                    "end": "10:00:00",
                    "name": "08",
                    "showHoverBand": "0"
                },
                {
                    "start": "10:00:00",
                    "end": "12:00:00",
                    "name": "10",
                    "showHoverBand": "0"
                },
                {
                    "start": "12:00:00",
                    "end": "14:00:00",
                    "name": "12",
                    "showHoverBand": "0"
                },
                {
                    "start": "14:00:00",
                    "end": "16:00:00",
                 ...