Fusion Charts - Gannt chart and 2D Scroll chart not working on same page

SPyder · January 17, 2020

I was trying to validate the fusion charts product before i can go to my management for purchasing the product.

I was trying to render two graphs on same page one gannt chart and other scroll chart. But only the one loaded first is rendering while other isn't. Attatched are html code .

Can some one let me know whats wrong here ?

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
</head>
<body>


<div id="chart-container">This is Gannt</div>
<div id="container">This is 2d Mixed chart expected</div>



<script src="js/fusioncharts.js"></script>
<script src="js/fusioncharts.widgets.js"></script>
<script src="js/scroll2d.js"></script>
<script src="js/ganntchart.js"></script>

</body>

</html>

ganntchart.js

const 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"
        }
      ]
    }
  ]
};

FusionCharts.ready(function() {
  var myChart = new FusionCharts({
    type: "gantt",
    renderAt: "chart-container",
    width: "100%",
    height: "100%",
    dataFormat: "json",
    dataSource
  }).render();
});

scroll2d.js

const 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"
                }
            ]
        }
    ]
};

FusionCharts.ready(function () {
    var myChart = new FusionCharts({
        type: "scrollcombidy2d",
        renderAt: "container",
        width: "100%",
        height: "100%",
        dataFormat: "json",
        dataSource
    }).render();
});

Akash Biswas · January 20, 2020

Hi,

Yes, you can render multiple charts in a single page.

Please note : Each chart renders on a web component like a div. So for multiple charts you need to have multiple div, one for each chart.

Also you need to include the required JS files of FusionCharts to render the chart.

fusioncharts.js (Required for all charts and maps)
fusioncharts.charts.js (Requqired for scroll charts from FusionChartsXT package)
fusioncharts.widgets.js (Required for gantt chart from FusionWidgetsXT package)

Refer to the sample :

Thanks,

Akash.

Sign In

Fusion Charts - Gannt chart and 2D Scroll chart not working on same page

Recommended Posts

SPyder

Share this post

Link to post

Share on other sites

Akash Biswas

Share this post

Link to post

Share on other sites

Create an account or sign in to comment

Create an account

Sign in

Browse

Activity