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 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
"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
Cookies are important to the proper functioning of a site. To improve your experience, we use cookies to remember log-in details and provide secure log-in, collect statistics to optimize site functionality, and deliver content tailored to your interests. Click Agree and Proceed to accept cookies and go directly to the site or click on View Cookie Settings to see detailed descriptions of the types of cookies and choose whether to accept certain cookies while on the site.
About Author
Gaurav Arora
Gaurav is an experienced UI developer with experience and capabilities to build compelling UI's for Web and Mobile Applications.