Using Gantt chart in your Angular App

Posted By : Gaurav Arora | 31-Oct-2018

Hi Guys, In this blog, we will come to know how to use the Fusion Chart’s Gantt chart in our Angular app. It can be simply installed with the documentation provided on their official site. Here I’m discussing this topic because I had faced some critical issues in my Production environment, as I was not getting any error in my development environment. In this blog, I’m going to share the same experience with you guys.

Let’s start by installing the Fusion Charts, for this, we need two npm packages i.e. angular-fusion charts and fusion charts.

        npm install angular-fusioncharts --save
        npm install fusioncharts --save            
    

Now we have to import FusionChartsModule in our app module and other files required for the specific charts. As I’m using a Gantt chart that’s why I’ve imported Gantt chart here. If you are using some then you have to import that specific chart.

        import { FusionChartsModule } from 'angular-fusioncharts';
        import * as FusionCharts from 'fusioncharts';
        import * as Charts from 'fusioncharts/fusioncharts.widgets';
        import * as Gantt from 'fusioncharts/fusioncharts.gantt';
        import * as FusionTheme from 'fusioncharts/themes/fusioncharts.theme.fusion';    
        FusionChartsModule.fcRoot(FusionCharts, Charts, FusionTheme);
        Imports: [FusionChartsModule ]                  
    

Now we have to define the chart in our HTML

    
    
    

Now we have to define dataSource in our component file.

        dataSource: object;
        this.dataSource: {
            chart: {
              theme: 'fusion',
              dateformat: 'mm/dd/yyyy hh:mm:ss',
              outputDateFormat: 'hh12:mn ampm',
            },
            categories: [{
              category: [
                { start: '00:00', end: '00:59', label: '1' },
                { start: '01:00', end: '01:59', label: '2' },
                { start: '02:00', end: '02:59', label: '3' },
                { start: '03:00', end: '03:59', label: '4' },
                { start: '04:00', end: '04:59', label: '5' }
              ],
            }],
            processes: {
              fontsize: '14',
              align: 'left',
              headertext: 'Employee',
              headerfontsize: '14',
              headervalign: 'middle',
              headeralign: 'left',
              process: [
                {
                  id: '2494',
                  label: 'New 123 employee'
                }
              ]
            },
            tasks: {
              color: '62C3EA',
              showlabels: '1',
                     task: [
                {
                  color: '0048FF',
                  end: '1:30',
                  label: 'Poser',
                  processid: '2494',
                  start: '00:30'
                }
              ]
            }
       }                        
    

This will render the data in the chart.

You might have noticed that you are getting fusioncharts is not defined error in the console, for that we have to include fusion chart.js and chart specific js in our angularcli.json or vendor.ts file whichever you are using.

        "scripts": [
            "../node_modules/fusioncharts/fusioncharts.js",
            "../node_modules/fusioncharts/fusioncharts.charts.js",
            "../node_modules/fusioncharts/fusioncharts.widgets.js",
            "../node_modules/fusioncharts/fusioncharts.gantt.js",
        ] 
    

Now you are ready to go with your Gantt chart, but make sure you also run it on your production environment, as I face the main error there.

        Uncaught Error: #90211 ExtensionName Error >> A FusionCharts extension must have a getName API or a name property
    

For this, we have to do some changes in passing the fusion chart and libraries like this

        import { FusionChartsModule } from 'angular-fusioncharts';
        import * as FusionCharts from 'fusioncharts';
        import * as Gantt from 'fusioncharts/fusioncharts.gantt';
        import * as FusionTheme from 'fusioncharts/themes/fusioncharts.theme.fusion';
        Gantt(FusionCharts);
        FusionTheme(FusionCharts);
        FusionChartsModule.fcRoot(FusionCharts);
    

Once you have done the changes in passing the libraries, then it will resolve the above error, but make sure that data is loaded completely before you initialize the chart so that it does not throw any error. As there are some chances that server calls took some time. In that case, the chart will not get its data and error will be thrown.

For a complete reference of Fusion Charts https://www.fusioncharts.com/

Thanks

About Author

Author Image
Gaurav Arora

Gaurav is an experienced UI developer with experience and capabilities to build compelling UI's for Web and Mobile Applications.

Request for Proposal

Name is required

Comment is required

Sending message..