<div id="chart-container"></div>
<div id="chart-container1"></div>
FusionCharts.ready(function() {
  var myChart = new FusionCharts({
    type: "gantt",
    renderAt: "chart-container",
    width: "800",
    height: "300",
    dataFormat: "json",
    dataSource: {
      chart: {
        dateformat: "mm/dd/yyyy",
        theme: "fusion",
        useverticalscrolling: "0"
      },
      datatable: {
        headervalign: "bottom",
        datacolumn: [
          {
            headertext: "Owner",
            headervalign: "bottom",
            headeralign: "left",
            align: "left",
            text: [
              {
                label: "Product Team"
              },
              {
                label: "Marketing Team"
              },
              {
                label: "Product Team"
              },
              {
                label: "Dev Team"
              },
              {
                label: "Design Team"
              },
              {
                label: "Dev Team"
              },
              {
                label: "QA Team"
              },
              {
                label: "Product Team"
              },
              {
                label: "Marketing Team"
              }
            ]
          }
        ]
      },
      tasks: {
        task: [
          {
            start: "1/1/2018",
            end: "1/13/2018",
            color: "#5D62B5"
          },
          {
            start: "1/4/2018",
            end: "1/21/2018",
            color: "#29C3BE"
          },
          {
            start: "1/22/2018",
            end: "2/4/2018",
            color: "#5D62B5"
          },
          {
            start: "2/5/2018",
            end: "2/11/2018",
            color: "#F2726F"
          },
          {
            start: "2/12/2018",
            end: "2/18/2018",
            color: "#FFC533"
          },
          {
            start: "2/19/2018",
            end: "3/11/2018",
            color: "#F2726F"
          },
          {
            start: "3/12/2018",
            end: "3/18/2018",
            color: "#62B58F"
          },
          {
            start: "3/16/2018",
            end: "3/23/2018",
            color: "#5D62B5"
          },
          {
            start: "3/24/2018",
            end: "3/29/2018",
            color: "#29C3BE"
          }
        ]
      },
      processes: {
        align: "left",
        headertext: "Tasks",
        headervalign: "bottom",
        headeralign: "left",
        process: [
          {
            label: "PRD & User-Stories"
          },
          {
            label: "Persona & Journey"
          },
          {
            label: "Architecture"
          },
          {
            label: "Prototyping"
          },
          {
            label: "Design"
          },
          {
            label: "Development"
          },
          {
            label: "Testing & QA"
          },
          {
            label: "UAT Test"
          },
          {
            label: "Handover & Documentation"
          }
        ]
      },
      categories: [
        {
          category: [
            {
              start: "1/1/2018",
              end: "4/1/2018",
              label: "Project Pipeline for Q1-2018"
            }
          ]
        },
        {
          category: [
            {
              start: "1/1/2018",
              end: "1/31/2018",
              label: "Jan"
            },
            {
              start: "2/1/2018",
              end: "2/28/2018",
              label: "Feb"
            },
            {
              start: "3/1/2018",
              end: "4/1/2018",
              label: "Mar"
            }
          ]
        },
        {
          category: [
            {
              start: "1/1/2018",
              end: "1/7/2018",
              label: "Week 1"
            },
            {
              start: "1/8/2018",
              end: "1/14/2018",
              label: "Week 2"
            },
            {
              start: "1/15/2018",
              end: "1/21/2018",
              label: "Week 3"
            },
            {
              start: "1/22/2018",
              end: "1/28/2018",
              label: "Week 4"
            },
            {
              start: "1/29/2018",
              end: "2/4/2018",
              label: "Week 5"
            },
            {
              start: "2/5/2018",
              end: "2/11/2018",
              label: "Week 6"
            },
            {
              start: "2/12/2018",
              end: "2/18/2018",
              label: "Week 7"
            },
            {
              start: "2/19/2018",
              end: "2/25/2018",
              label: "Week 8"
            },
            {
              start: "2/26/2018",
              end: "3/4/2018",
              label: "Week 9"
            },
            {
              start: "3/5/2018",
              end: "3/11/2018",
              label: "Week 10"
            },
            {
              start: "3/12/2018",
              end: "3/18/2018",
              label: "Week 11"
            },
            {
              start: "3/19/2018",
              end: "3/25/2018",
              label: "Week 12"
            },
            {
              start: "3/26/2018",
              end: "4/1/2018",
              label: "Week 13"
            }
          ]
        }
      ]
    }
  }).render();
  
  var myChart1 = new FusionCharts({
    type: "scrollline2d",
    renderAt: "chart-container1",
    width: "800",
    height: "300",
    dataFormat: "json",
    dataSource: {
    chart: {
        caption: "Analysing Subsidies by Youth Population",
        subcaption: "By province",
        yaxisname: "Population Count",
        syaxisname: "Subsidies % of Income",
        labeldisplay: "rotate",
        snumbersuffix: "%",
        scrollheight: "10",
        numvisibleplot: "10",
        drawcrossline: "1",
        theme: "candy"
    },
    categories: [
        {
            category: [
                {
                    label: "Matzikama"
                },
                {
                    label: "Cederberg"
                },
                {
                    label: "Bergrivier"
                },
                {
                    label: "Saldanha Bay"
                },
                {
                    label: "Swartland"
                },
                {
                    label: "Witzenberg"
                },
                {
                    label: "Drakenstein"
                },
                {
                    label: "Stellenbosch"
                },
                {
                    label: "Breede Valley"
                },
                {
                    label: "Langeberg"
                },
                {
                    label: "Swellendam"
                },
                {
                    label: "Theewaterskloof"
                },
                {
                    label: "Overstrand"
                },
                {
                    label: "Cape Agulhas"
                },
                {
                    label: "Kannaland"
                },
                {
                    label: "Hessequa"
                },
                {
                    label: "Mossel Bay"
                },
                {
                    label: "George"
                },
                {
                    label: "Oudtshoorn"
                },
                {
                    label: "Bitou"
                },
                {
                    label: "Knysna"
                },
                {
                    label: "Laingsburg"
                },
                {
                    label: "Prince Albert"
                },
                {
                    label: "Beaufort West"
                }
            ]
        }
    ],
    dataset: [
        {
            seriesname: "Total Population",
            plottooltext: "Population: $dataValue",
            data: [
                {
                    value: "71045"
                },
                {
                    value: "52949"
                },
                {
                    value: "67474"
                },
                {
                    value: "111173"
                },
                {
                    value: "133762"
                },
                {
                    value: "130548"
                },
                {
                    value: "280195"
                },
                {
                    value: "173419"
                },
                {
                    value: "176578"
                },
                {
                    value: "105483"
                },
                {
                    value: "40211"
                },
                {
                    value: "117109"
                },
                {
                    value: "93466"
                },
                {
                    value: "36000"
                },
                {
                    value: "24168"
                },
                {
                    value: "54237"
                },
                {
                    value: "94135"
                },
                {
                    value: "208237"
                },
                {
                    value: "97509"
                },
                {
                    value: "59157"
                },
                {
                    value: "73835"
                },
                {
                    value: "8895"
                },
                {
                    value: "14272"
                },
                {
                    value: "51080"
                }
            ]
        },
        {
            seriesname: "Youth",
            renderas: "area",
            showanchors: "0",
            plottooltext: "Youth: $dataValue",
            data: [
                {
                    value: "24598"
                },
                {
                    value: "18302"
                },
                {
                    value: "22162"
                },
                {
                    value: "40696"
                },
                {
                    value: "47420"
                },
                {
                    value: "49981"
                },
                {
                    value: "97230"
                },
                {
                    value: "73162"
                },
                {
                    value: "60668"
                },
                {
                    value: "34594"
                },
                {
                    value: "12567"
                },
                {
                    value: "39907"
                },
                {
                    value: "30681"
                },
                {
                    value: "11323"
                },
                {
                    value: "7801"
                },
                {
                    value: "15785"
                },
                {
                    value: "31478"
                },
                {
                    value: "72762"
                },
                {
                    value: "32301"
                },
                {
                    value: "21401"
                },
                {
                    value: "27863"
                },
                {
                    value: "3254"
                },
                {
                    value: "5562"
                },
                {
                    value: "19047"
                }
            ]
        },
        {
            seriesname: "Subsidies received %",
            parentyaxis: "S",
            renderas: "line",
            plottooltext: "$dataValue subsidies received",
            showvalues: "0",
            data: [
                {
                    value: "28.0"
                },
                {
                    value: "35.2"
                },
                {
                    value: "23.9"
                },
                {
                    value: "11.8"
                },
                {
                    value: "18.0"
                },
                {
                    value: "26.9"
                },
                {
                    value: "11.1"
                },
                {
                    value: "11.2"
                },
                {
                    value: "24.0"
                },
                {
                    value: "18.9"
                },
                {
                    value: "35.6"
                },
                {
                    value: "37.9"
                },
                {
                    value: "12.9"
                },
                {
                    value: "27.6"
                },
                {
                    value: "40.5"
                },
                {
                    value: "19.9"
                },
                {
                    value: "15.6"
                },
                {
                    value: "28.2"
                },
                {
                    value: "23.3"
                },
                {
                    value: "26.2"
                },
                {
                    value: "16.9"
                },
                {
                    value: "41.9"
                },
                {
                    value: "62.1"
                },
                {
                    value: "31.2"
                }
            ]
        }
    ]
}
  }).render();
});
Run Pen

External CSS

This Pen doesn't use any external CSS resources.

External JavaScript

  1. https://cdn.fusioncharts.com/fusioncharts/latest/fusioncharts.js
  2. https://cdn.fusioncharts.com/fusioncharts/latest/themes/fusioncharts.theme.fusion.js
  3. https://cdn.fusioncharts.com/fusioncharts/latest/fusioncharts.charts.js
  4. https://cdn.fusioncharts.com/fusioncharts/latest/fusioncharts.widgets.js