Rendering Different Charts

In the Getting Started section, we discussed how to build a single series chart using FusionCharts Suite XT. In this section, we will show you how to create different charts and maps using FusionCharts and Angular 2+.

Note that some of the chart types and the maps use data structures that are different from the one you use in a single-series chart. We will highlight those in the sections below, as follows:

Multi-series Charts

A Multi-series chart is used to plot data for more than one series of data values. It is also used to analyze and compare data points grouped in sub-categories. For example, you can plot the revenue collected each month for the last two years using a multi-series chart. Multi-series charts can also help you plot the highs and lows of multiple datasets, so that you can easily compare them.

In a multi-series chart, we have two or more datasets plotted against the same X-axis (or Y-axis) value. Let us build a Multi-series Column 2D Chart.

FusionCharts will load here..

As you can see, a Multi-series Column 2D Chart has vertically aligned rectangular bars on one axis with discrete values shown on the other. The length of a column is proportionate to the value it represents.

To build the chart shown above, we will use the data presented in the following table:

Quarter	Previous Year	Current Year
Q1	12000	24400
Q2	10500	29800
Q3	23500	20800
Q4	16000	26000

In the above chart, we have plotted quarters with data values for the previous and the current years along the X-axis. To convert this to a data format that FusionCharts can use, you need the following two properties:

categories
dataset

The illustration below can give you an idea about how we are going to assign values to these properties.

{ "header": "Chart Anatomy", "subHeader": "To know how FusionCharts works, it is important to understand the various components and concepts of a chart", "content": { "header": "Below are different sections with interactive annotated images describing various components and concepts of charts", "contentGroup": [ { "itemHeader": "", "imgSrc": "ms-column-chart-anatomy.png", "annotations": [ { "annotationNumber": "1", "annotationName": "dataset", "annotationDesc": "An array constituting different data series. Dataset here represents the data values concerning different categories.", "annotationDescLinkPath": null, "syntax": "[\r\n {\r\n \"seriesname\": \"Previous Year\",\r\n \"data\": [\r\n { \"value\": \"12000\" },\r\n { \"value\": \"10500\" },....\r\n ]\r\n },...\r\n]", "leftPosition": "16.5%", "topPosition": "16.5%", "annotationLinks": [] }, { "annotationNumber": "2", "annotationName": "Categories", "annotationDesc": "Categories depict different classes of the data, structured for the visual representation. It is an array of labels representing different quarters as shown above", "annotationDescLinkPath": null, "syntax": "[\r\n {\r\n \"category\": [\r\n { \"label\": \"Q1\" },\r\n { \"label\": \"Q2\" },...\r\n ]\r\n }\r\n]", "leftPosition": "16%", "topPosition": "73%", "annotationLinks": [] }, { "annotationNumber": "3", "annotationName": "Data Series1", "annotationDesc": "The first series of the multi-series chart, representing revenue of the previous year across its quarters", "annotationDescLinkPath": null, "syntax": "{\r\n \"seriesname\": \"Previous Year\",\r\n \"data\": [\r\n { \"value\": \"12000\" },\r\n { \"value\": \"10500\" },...\r\n ]\r\n}", "leftPosition": "29.5%", "topPosition": "87.5%" }, { "annotationNumber": "4", "annotationName": "Data Series2", "annotationDesc": "The second series of the multi-series chart, representing revenue of the current year across its quarters", "syntax": "{\r\n \"seriesname\": \"Current Year\",\r\n \"data\": [\r\n { \"value\": \"24400\" },\r\n { \"value\": \"29800\" },...\r\n ]\r\n }", "annotationDescLinkPath": null, "leftPosition": "64.5%", "topPosition": "87.5%" } ] } ] } }

As shown in the sample above, the chart compares the quarterly sales of a company for over two years. The data in the JSON format for the above chart looks as follows:

// Define the categories representing the labels on the X-axis
const categories =  [
  {
    "category": [
      { "label": "Q1" },
      { "label": "Q2" },
      { "label": "Q3" },
      { "label": "Q4" }
    ]
  }
]
// Construct the dataset comprising multiple series
const dataset = [
  {
    "seriesname": "Previous Year",
    "data": [
      { "value": "12000" },
      { "value": "10500" },
      { "value": "23500" },
      { "value": "16000" }
    ]
  },
  {
    "seriesname": "Current Year",
    "data": [
      { "value": "24400" },
      { "value": "29800" },
      { "value": "20800" },
      { "value": "26800" }
    ]
  }
]

The number of objects passed in the series should be the same as the number of labels.

Now to build the chart. Copy the codes for the module.ts, component.ts, and app.component.html files from below and paste them in the respective files:

component.ts
module.ts
app.component.html


// STEP 1- To import the dependencies
import { Component } from "@angular/core";
// STEP 2- Define the categories representing the labels on the X-axis
const categories =  [
  {
    "category": [
      { "label": "Q1" },
      { "label": "Q2" },
      { "label": "Q3" },
      { "label": "Q4" }
    ]
  }
]
// STEP 3- Construct the dataset comprising multiple series
const dataset = [
  {
    "seriesname": "Previous Year",
    "data": [
      { "value": "12000" },
      { "value": "10500" },
      { "value": "23500" },
      { "value": "16000" }
    ]
  },
  {
    "seriesname": "Current Year",
    "data": [
      { "value": "24400" },
      { "value": "29800" },
      { "value": "20800" },
      { "value": "26800" }
    ]
  }
]

@Component({
selector: "app-root",
templateUrl: "./app.component.html"

})

export class AppComponent {
dataSource: Object;
constructor() {
this.dataSource = {
"chart": {
"theme": "fusion",
"caption": "Comparison of Quarterly Revenue",
"xAxisname": "Quarter",
"yAxisName": "Revenues (In USD)",
"numberPrefix": "\$",
"plotFillAlpha": "80",
"divLineIsDashed": "1",
"divLineDashLen": "1",
"divLineGapLen": "1"
},
"categories": categories,
"dataset": dataset,

    }; // end of this.dataSource

} // end of constructor
} // end of class AppComponent


import { BrowserModule } from '@angular/platform-browser';
import { NgModule } from '@angular/core';

import { AppComponent } from './app.component';
import { FusionChartsModule } from 'angular-fusioncharts';

// Import FusionCharts library and chart modules
import _ as FusionCharts from 'fusioncharts';
import _ as charts from "fusioncharts/fusioncharts.charts";

import * as FusionTheme from 'fusioncharts/themes/fusioncharts.theme.fusion';

// Pass the fusioncharts library and chart modules
FusionChartsModule.fcRoot(FusionCharts, charts, FusionTheme);

@NgModule({
declarations: [AppComponent],
imports: [BrowserModule,FusionChartsModule],
providers: [],
bootstrap: [AppComponent]
})
export class AppModule {}


<h1>
  {{title}}
</h1>
<fusioncharts
  width="700"
  height="400"
  type="mscolumn2d"
  [dataSource]="dataSource"
>
</fusioncharts>

You can also create various charts belonging to the multi-series family in a similar way. We have over 15+ multi-series charts. You can find more about their types, components, configurations etc. here.

Combination Charts

Similar to multi-series charts, combination charts also allow you to plot multiple datasets on the same chart. However, while in multi-series charts you need to use the same plot type for all datasets, in a combination chart you can use a different plot type for each dataset. For instance, you can show a column, a line, and an area plot on the same chart canvas.

Let us build a 2D Single Y-axis combination chart.

FusionCharts will load here..

As you can see in the 2D Single Y-axis combination chart above, a line, a column, and an area type plot share the same set of X and Y-axis. The line plot displays the projected monthly revenue of Harry’s SuperMart, while the column plot displays the actual revenue earned, and the area plot shows the monthly profit. To build the chart, we will use the data provided in the following table:

Month	Actual Revenue	Projected Revenue	Profit
January	16000	15000	4000
February	20000	16000	5000
March	18000	17000	3000
April	19000	18000	4000
May	15000	19000	1000
June	21000	19000	7000
July	16000	19000	1000
August	20000	19000	4000
September	17000	20000	1000
October	25000	21000	8000
November	19000	22000	2000
Decemebr	23000	23000	7000

In the above chart, we have plotted monthly values for projected revenue, actual revenue, and profits made by Harry’s Supermart with monthly data values along the X-axis. To convert the data provided in the above table to a data format that FusionCharts can use, you need the following two properties:

categories
dataset

The diagram below can give you an idea about how we are going to assign values to these properties.

As shown in the sample above, the chart compares the monthly sales and profits of the Supermart. The data in the JSON format for the above chart looks as follows:

// Define the categories representing the labels on the X-axis
const categories =  [
  {
    "category": [
        {"label": "Jan"},
        {"label": "Feb"},
        {"label": "Mar"},
        {"label": "Apr"},
        {"label": "May"},
        {"label": "Jun"},
        {"label": "Jul"},
        {"label": "Aug"},
        {"label": "Sep"},
        {"label": "Oct"},
        {"label": "Nov"},
        {"label": "Dec"}
    ]
  }
]
// Construct the dataset comprising multiple series
const dataset = [
  {
    "seriesname": "Actual Revenue",
    "renderAs": "column",
    "data": [
        {"value": "16000"},
        {"value": "20000"},
        {"value": "18000"},
        {"value": "19000"},
        {"value": "15000"},
        {"value": "21000"},
        {"value": "16000"},
        {"value": "20000"},
        {"value": "17000"},
        {"value": "25000"},
        {"value": "19000"},
        {"value": "23000"}
    ]
  },
  {
    "seriesname": "Projected Revenue",
    "renderAs": "line",
    "data": [
        {"value": "15000"},
        {"value": "16000"},
        {"value": "17000"},
        {"value": "18000"},
        {"value": "19000"},
        {"value": "19000"},
        {"value": "19000"},
        {"value": "19000"},
        {"value": "20000"},
        {"value": "21000"},
        {"value": "22000"},
        {"value": "23000"}
    ]
  },
  {
    "seriesName": "Profit",
    "renderAs": "area",
    "data": [
        {"value": "4000"},
        {"value": "5000"},
        {"value": "3000"},
        {"value": "4000"},
        {"value": "1000"},
        {"value": "7000"},
        {"value": "1000"},
        {"value": "4000"},
        {"value": "1000"},
        {"value": "8000"},
        {"value": "2000"},
        {"value": "7000"}
    ]
}
]

The number of objects passed in the series should be the same as the number of labels.

Now to build the chart. Copy the codes for the module.ts, component.ts, and app.component.html files from below and paste them in the respective files:

component.ts
module.ts
app.component.html


// STEP 1- To import the dependencies
import { Component } from "@angular/core";

// STEP 2- Define the categories representing the labels on the X-axis
const categories = [{
"category": [{
"label": "Jan"
},
{
"label": "Feb"
},
{
"label": "Mar"
},
{
"label": "Apr"
},
{
"label": "May"
},
{
"label": "Jun"
},
{
"label": "Jul"
},
{
"label": "Aug"
},
{
"label": "Sep"
},
{
"label": "Oct"
},
{
"label": "Nov"
},
{
"label": "Dec"
}
]
}
]
// STEP 3- Construct the dataset comprising combination series
const dataset = [{
"seriesName": "Actual Revenue",
"showValues": "1",
"data": [{
"value": "16000"
},
{
"value": "20000"
},
{
"value": "18000"
},
{
"value": "19000"
},
{
"value": "15000"
},
{
"value": "21000"
},
{
"value": "16000"
},
{
"value": "20000"
},
{
"value": "17000"
},
{
"value": "25000"
},
{
"value": "19000"
},
{
"value": "23000"
}
]
},
{
"seriesName": "Projected Revenue",
"renderAs": "line",
"data": [{
"value": "15000"
},
{
"value": "16000"
},
{
"value": "17000"
},
{
"value": "18000"
},
{
"value": "19000"
},
{
"value": "19000"
},
{
"value": "19000"
},
{
"value": "19000"
},
{
"value": "20000"
},
{
"value": "21000"
},
{
"value": "22000"
},
{
"value": "23000"
}
]
},
{
"seriesName": "Profit",
"renderAs": "area",
"data": [{
"value": "4000"
},
{
"value": "5000"
},
{
"value": "3000"
},
{
"value": "4000"
},
{
"value": "1000"
},
{
"value": "7000"
},
{
"value": "1000"
},
{
"value": "4000"
},
{
"value": "1000"
},
{
"value": "8000"
},
{
"value": "2000"
},
{
"value": "7000"
}
]
}
]
@Component({
selector: "app-root",
templateUrl: "./app.component.html"

})

export class AppComponent {
dataSource: Object;
constructor() {
this.dataSource = {
"chart": {
"caption": "Harry's SuperMart",
"subCaption": "Sales analysis of last year",
"xAxisname": "Month",
"yAxisName": "Amount (In USD)",
"numberPrefix": "\$",
"divlineColor": "#999999",
"divLineIsDashed": "1",
"divLineDashLen": "1",
"divLineGapLen": "1",
"toolTipColor": "#ffffff",
"toolTipBorderThickness": "0",
"toolTipBgColor": "#000000",
"toolTipBgAlpha": "80",
"toolTipBorderRadius": "2",
"toolTipPadding": "5",
"theme": "fusion"
},
"categories": categories,
"dataset": dataset

    }; // end of this.dataSource

} // end of constructor
} // end of class AppComponent


import { BrowserModule } from '@angular/platform-browser';
import { NgModule } from '@angular/core';

import { AppComponent } from './app.component';
import { FusionChartsModule } from 'angular-fusioncharts';

// Import FusionCharts library and chart modules
import _ as FusionCharts from 'fusioncharts';
import _ as charts from "fusioncharts/fusioncharts.charts";

import * as FusionTheme from 'fusioncharts/themes/fusioncharts.theme.fusion';

// Pass the fusioncharts library and chart modules
FusionChartsModule.fcRoot(FusionCharts, charts, FusionTheme);

@NgModule({
declarations: [AppComponent],
imports: [BrowserModule,FusionChartsModule],
providers: [],
bootstrap: [AppComponent]
})
export class AppModule {}


<h1>
  {{title}}
</h1>
<fusioncharts
  width="700"
  height="400"
  type="mscombi2d"
  [dataSource]="dataSource"
>
</fusioncharts>

You can also create various charts with various combinations in a similar way. We have over 10+ combination charts. You can find more about their types, components, configurations etc. from here.

Real-time Charts

Real-time charts are also referred to as data streaming charts, because they can automatically update themselves at regular intervals, by fetching new data from the server and discarding the previous values. You do not need to keep refreshing the page to see the updated versions of these charts.

FusionCharts XT supports various types of Real-time charts - Line, Area, Column, Stacked Area, Stacked Column, and Line (Dual Y axis). In the section below, we will see how to build a real-time area 2D chart.

FusionCharts will load here..

As you can see in the real-time 2D area chart above, the data plot is presenting the values present at a given instance. As soon as new values are available in the source data, the chart will update itself with the fresh values, gradually discarding the data plots displayed above.

In the above chart, we have plotted values of a stock (of Harry’s Supermart) on a business day, at intervals of 5 seconds between any two consecutive values. To convert the data provided in the above table to a data format that FusionCharts can use, you need the following two properties:

categories
dataset

The diagram below can give you an idea about how we are going to assign values to these properties.

In the sample above, the chart shows the values of the Harry’s Supermart stock throughout a single business day, at intervals of 5 seconds. The data in the JSON format for the above chart looks as follows:

// Define the category representing the labels on the X-axis
const categories =  [{
    "category": [
      { "label": "Day Start" },
    ]
}]
// Construct the dataset
const dataset = [{
    "data": [
      { "value": "35.27" },
    ]
}]

Now that we’ve seen the structuring of the data object, let us deal with feeding the real-time data into this format. There are multiple ways in which one can feed real-time data to FusionCharts.

The real-time data from the server can be transported through APIs, web sockets depending on the requirement
The data can be fetched at regular intervals from third-party endpoints as per the requirement
Data can be fed from google sheets in real-time.

To build the sample chart, we will feed the data at regular intervals from a random generator (math.random function), for the sake of simplicity.

function addLeadingZero(num) {
  return num <= 9 ? "0" + num : num;
}

function updateData() {
  // Get reference to the chart using its ID(stockRealTimeChart)
  var chartRef = FusionCharts("stockRealTimeChart"),
    // We need to create a querystring format incremental update, containing
    // label in hh:mm:ss format
    // and a value (random).
    currDate = new Date(),
    label =
      addLeadingZero(currDate.getHours()) +
      ":" +
      addLeadingZero(currDate.getMinutes()) +
      ":" +
      addLeadingZero(currDate.getSeconds()),
    // Get random number between 35.25 & 35.75 - rounded to 2 decimal places
    randomValue = Math.floor(Math.random() * 50) / 100 + 35.25,
    // Build Data String in format &label=...&value=...
    strData = "&label=" + label + "&value=" + randomValue;
  // Feed it to the chart. chartRef is the instance of the chart.
  chartRef.feedData(strData);
}

Now to build the chart. Copy the codes for the module.ts, component.ts, and app.component.html files from below and paste them in the respective files:

component.ts
module.ts
app.component.html


import { Component } from "@angular/core";

const categories = [{
"category": [{
"label": "Start"
}]
}];
// Construct the dataset comprising multiple series
const dataset = [{
"data": [{
"value": "35.27"
}]
}];

@Component({
selector: "app-root",
templateUrl: "./app.component.html"
})
export class AppComponent {
chartBarObj: any;
dataSource: any = {
chart: {
caption: "Live visitors on web",
subCaption: "Skatter Tech",
refreshinterval: "3",
numdisplaysets: "10",
theme: "fusion",
drawAnchors: "0",
plotToolText: "$label: $dataValue Feeds",
showRealTimeValue: "0",
labelDisplay: "rotate"
},
"categories": categories,
"dataset": dataset,

};
events: any = {
initialized: function(e) {
function addLeadingZero(num) {
return num <= 9 ? "0" + num : num;
}

      function updateData() {
        var currDate = new Date(),
          label =
            addLeadingZero(currDate.getHours()) +
            ":" +
            addLeadingZero(currDate.getMinutes()) +
            ":" +
            addLeadingZero(currDate.getSeconds()),
          // Get random number between 35.25 & 35.75 - rounded to 2 decimal places
          randomValue = Math.floor(Math.random() * 50) / 100 + 35.25,
          // Build Data String in format &label=...&value=...
          strData = "&label=" + label + "&value=" + randomValue;
        // Feed it to chart.
        e.sender.feedData(strData);
      }

      var myVar = setInterval(function() {
        updateData();
      }, 500);
    } // end of this.dataSource

} // end of constructor
} // end of class AppComponent


import { BrowserModule } from '@angular/platform-browser';
import { NgModule } from '@angular/core';

import { AppComponent } from './app.component';
import { FusionChartsModule } from 'angular-fusioncharts';

// Import FusionCharts library and chart modules
import _ as FusionCharts from 'fusioncharts';
import _ as RealTimeArea from "fusioncharts/fusioncharts.widgets";
import * as FusionTheme from 'fusioncharts/themes/fusioncharts.theme.fusion';

// Pass the fusioncharts library and chart modules
FusionChartsModule.fcRoot(FusionCharts, RealTimeArea, FusionTheme);

@NgModule({
declarations: [AppComponent],
imports: [BrowserModule,FusionChartsModule],
providers: [],
bootstrap: [AppComponent]
})
export class AppModule {}


<h1d>
    {{title}}
</h1d>
<fusioncharts width="700" height="450" type="realtimearea" dataFormat="JSON" [dataSource]="dataSource" [events]="events"d>
</fusionchartsd>

You can also create various types of real-time charts in a similar way. We have 6 charts for which you can inject the data in real-time. You can find more about their types, configurations here.

Gauges

Gauges are powerful tools that can showcase information using a radial or linear scale to display data. FusionCharts XT provides you with seven different gauges - Angular Gauge, Bulb Gauge, Cylinder Gauge, LED Gauge, Linear Gauge, Thermometer Gauge and Vertical LED Gauge.

An angular gauge is used to show a specific value over a radial scale. The gauge is rendered with a radial scale that displays the data range. This scale can be color-coded to indicate divisions within the range. A dial is used to point to the data value. The gauge can also be rendered with multiple dials. It is often used to simulate a speedometer and on dashboards.

To start with, we'll build a simple angular gauge showcasing Nordstrom's Customer Satisfaction Score as shown below.

FusionCharts will load here..

So, any score less than 50 is bad and is shown in red. Any score between 50 and 75 is average and is shown in yellow. Any score above 75 means good and is shown in green.

To build the gauge shown above, we will use the data presented in the table below:

Range	Color	Hex Code
0-50	Red	#F2726F
50-75	Yellow	#FFC533
75-100	Green	#62B58F

FusionCharts accepts data in JSON format. To convert this to a data format that FusionCharts can use, you need the following two properties:

colorRange
dials

The diagram below can give you an idea about how we are going to assign values to these properties.

The following code is the JSON representation of the tabular column with the required attributes to render the above gauge.The data in the JSON format for the above gauge looks as follows:

  // Define the colorVariations of the angular gauge
  const colorRange = {
    "color": [
      {
        "minValue": "0",
        "maxValue": "50",
        "code": "#F2726F"
      },
      {
        "minValue": "50",
        "maxValue": "75",
        "code": "#FFC533"
      },
      {
        "minValue": "75",
        "maxValue": "100",
        "code": "#62B58F"
      }
    ]
  };
  //Set up the dial value
  const dials = {
    "dial": [
      {
        "value": "81"
      }
    ]
  }

In the above JSON:

Create the colorRange object to set the color associated with the specific range of values.
Specify minValue and maxValue within the color array under the colorRange object.
Set the code attribute to specify the hex color of respective ranges.
Create the dials object to represent the customer satisfaction score.
Create the dial object under the dials object to set the value of customer satisfaction score.

Now to build the chart. Copy the codes for the module.ts, component.ts, and app.component.html files from below and paste them in the respective files:

component.ts
module.ts
app.component.html


// STEP 1- To import the dependencies
import { Component } from "@angular/core";

//STEP 2 - Defining the dataset for the angular gauge along with the color configuration
const colorRange = {
"color": [{
"minValue": "0",
"maxValue": "50",
"code": "#e44a00"
}, {
"minValue": "50",
"maxValue": "75",
"code": "#f8bd19"
}, {
"minValue": "75",
"maxValue": "100",
"code": "#6baa01"
}]
};

const dials = {
"dial": [{
"value": "67"
}]
};

@Component({
selector: "app-root",
templateUrl: "./app.component.html"

})

export class AppComponent {
dataSource: Object;
constructor() {
this.dataSource = {
"chart": {
"caption": "Customer Satisfaction Score",
"subcaption": "Last week",
"lowerLimit": "0",
"upperLimit": "100",
"theme": "fusion"
},
"colorRange": colorRange,
"dials": dials

    }; // end of this.dataSource

} // end of constructor
} // end of class AppComponent


import { BrowserModule } from '@angular/platform-browser';
import { NgModule } from '@angular/core';

import { AppComponent } from './app.component';
import { FusionChartsModule } from 'angular-fusioncharts';

// Import FusionCharts library and chart modules
import _ as FusionCharts from 'fusioncharts';
import _ as Widgets from 'fusioncharts/fusioncharts.widgets';

import * as FusionTheme from 'fusioncharts/themes/fusioncharts.theme.fusion';

// Pass the fusioncharts library and chart modules
FusionChartsModule.fcRoot(FusionCharts, Widgets, FusionTheme);

@NgModule({
declarations: [AppComponent],
imports: [BrowserModule,FusionChartsModule],
providers: [],
bootstrap: [AppComponent]
})
export class AppModule {}


<h1>
    {{title}}
</h1>
<fusioncharts width="700" height="400" type="angulargauge" [dataSource]="dataSource">
</fusioncharts>

You can also create various charts belonging to the gauges family in a similar way. We have 7 different gauges. Check out the different types of gauges, their configurations here.

Maps

FusionMaps XT offers interactive maps that allow you to plot geographical data, such as revenue by regions, population by state, survey and election results. You can also add markers to pinpoint specific locations and routes. FusionMaps XT has over 1000 maps including all continents, major countries and all the US states.

You can download the map definition files separately from here if you want to save them locally. In the section below, we will see how to build a world map.

FusionCharts will load here..

As you can see in the map above, the data plot is indicating the average annual population growth across the 7 continents.

State	Entity Name	Value
North America	NA	82
South America	SA	2.04
Asia	AS	1.78
Europe	EU	40
Africa	AF	2.58
Australia	AU	1.30

To convert the data provided in the above table to a data format that FusionCharts can use, you need the following properties:

colorRange
data
id
value

The diagram below can give you an idea about how we are going to assign values to these properties.

{ "header": "Chart Anatomy", "subHeader": "To know how FusionCharts works, it is important to understand the various components and concepts of a chart", "content": { "header": "Below are different sections with interactive annotated images describing various components and concepts of charts", "contentGroup": [ { "itemHeader": "", "imgSrc": "world-map-anatomy1.png", "annotations": [ { "annotationNumber": "1", "annotationName": "colorRange", "annotationDesc": "Outlines the color variation of the different gegraphical entities based on their values. An array consisting of objects with range of values along with the color code.", "annotationDescLinkPath": null, "syntax": "{\r\n \"minvalue\": \"0\",\r\n \"code\": \"#FFE0B2\",\r\n \"gradient\": \"1\",\r\n \"color\": [{\r\n \"minvalue\": \"0.5\",\r\n \"maxvalue\": \"1.0\",\r\n \"color\": \"#FFD74D\"\r\n },...\r\n]}", "leftPosition": "14.5%", "topPosition": "79.5%", "annotationLinks": [] }, { "annotationNumber": "2", "annotationName": "data", "annotationDesc": "An array of objects where an individual object represents a geogrsphical area and the value associated with it.", "syntax": "[{\r\n \"id\": \"NA\",\r\n \"value\": \".82\",\r\n \"showLabel\": \"1\"\r\n}, .....\r\n]", "annotationDescLinkPath": null, "leftPosition": "37%", "topPosition": "37%", "annotationLinks": [] }, { "annotationNumber": "3", "annotationName": "id", "annotationDesc": "id is the unique identifier for eacch location. For example, if you want to denote Africa, the value for the corresponding id must be AF and not AFR.", "annotationDescLinkPath": null, "leftPosition": "18.5%", "topPosition": "27.5%", "annotationLinks": [ { "linkDesc": "We have a detailed Map Specification Sheets for all the maps that can be rendered using FusionCharts, where you can find the correct id of the maps you want to create.", "linkPath": "/maps/spec-sheets/world" }, { "linkDesc": "You can find different types of maps available with FusionCharts ", "linkPath": "/map-guide/list-of-maps" } ] }, { "annotationNumber": "4", "annotationName": "value", "annotationDesc": "value brings the numerical significance to the geographical entity concerning the use-case mapping", "annotationDescLinkPath": null, "leftPosition": "52.5%", "topPosition": "47.5%" } ] } ] } }

The following code is the JSON representation of the tabular column with the required attributes to render the above map.The data in the JSON format for the above map looks as follows:

// Define the colorVariations of the angular gauge
const colorRange = {
    "minvalue": "0",
    "code": "#FFE0B2",
    "gradient": "1",
    "color": [{
        "minvalue": "0.5",
        "maxvalue": "1.0",
        "color": "#FFD74D"
    }, {
        "minvalue": "1.0",
        "maxvalue": "2.0",
        "color": "#FB8C00"
    }, {
        "minvalue": "2.0",
        "maxvalue": "3.0",
        "color": "#E65100"
    }]
};
//Set up the Map's data
const data = [{
    "id": "NA",
    "value": ".82",
    "showLabel": "1"
}, {
    "id": "SA",
    "value": "2.04",
    "showLabel": "1"
}, {
    "id": "AS",
    "value": "1.78",
    "showLabel": "1"
}, {
    "id": "EU",
    "value": ".40",
    "showLabel": "1"
}, {
    "id": "AF",
    "value": "2.58",
    "showLabel": "1"
}, {
    "id": "AU",
    "value": "1.30",
    "showLabel": "1"
}];

We have a detailed Map Specification Sheets for all the maps that can be rendered using FusionCharts, where you can find the correct id of the maps you want to create. Now that the data is ready, include the map definition files and get ready to render your chart. The consolidated code is given below:

component.ts
module.ts
app.component.html


// STEP 1- To import the dependencies
import { Component } from "@angular/core";

//STEP 2 - Define the dataset and the colorRange of the map
const dataset = [{
"id": "NA",
"value": ".82",
"showLabel": "1"
}, {
"id": "SA",
"value": "2.04",
"showLabel": "1"
}, {
"id": "AS",
"value": "1.78",
"showLabel": "1"
}, {
"id": "EU",
"value": ".40",
"showLabel": "1"
}, {
"id": "AF",
"value": "2.58",
"showLabel": "1"
}, {
"id": "AU",
"value": "1.30",
"showLabel": "1"
}];

const colorrange = {
"minvalue": "0",
"code": "#FFE0B2",
"gradient": "1",
"color":
[{
"minvalue": "0.5",
"maxvalue": "1.0",
"color": "#FFD74D"
}, {
"minvalue": "1.0",
"maxvalue": "2.0",
"color": "#FB8C00"
}, {
"minvalue": "2.0",
"maxvalue": "3.0",
"color": "#E65100"
}]
};

@Component({
selector: "app-root",
templateUrl: "./app.component.html"

})

export class AppComponent {
dataSource: Object;
constructor() {
this.dataSource = {
"chart": {
"caption": "Average Annual Population Growth",
"subcaption": " 1955-2015",
"numbersuffix": "%",
"includevalueinlabels": "1",
"labelsepchar": ": ",
"entityFillHoverColor": "#FFF9C4",
"theme": "fusion"
},
// Aesthetics; ranges synced with the slider
"colorrange": colorrange,
// Source data as JSON --> id represents countries of the world.
"data": dataset

    }; // end of this.dataSource

} // end of constructor
} // end of class AppComponent


import { BrowserModule } from '@angular/platform-browser';
import { NgModule } from '@angular/core';

import { AppComponent } from './app.component';
import { FusionChartsModule } from 'angular-fusioncharts';

// Import FusionCharts library and chart modules
import _ as FusionCharts from 'fusioncharts';
import _ as FusionMaps from "fusionmaps/fusioncharts.maps";

import * as FusionTheme from 'fusioncharts/themes/fusioncharts.theme.fusion';

// Pass the fusioncharts library and chart modules
FusionChartsModule.fcRoot(FusionCharts, FusionMaps, FusionTheme);

@NgModule({
declarations: [AppComponent],
imports: [BrowserModule,FusionChartsModule],
providers: [],
bootstrap: [AppComponent]
})
export class AppModule {}


d<h1>
    {{title}}
d</h1>
d<fusioncharts width="700" height="400" type="world" [dataSource]="dataSource">
d</fusioncharts>

That’s it. Your first map is ready.

Render other Maps

To reduce the size of the package FusionCharts comes with only two maps, i.e., the World map and the USA map. However, FusionCharts provide 1600+ maps for you to explore. Download the map files separately if you want to save them locally.

Let's create a map of California to show the "Web visits for a particular month" as shown below:

CHART
JSON

FusionCharts will load here..

{
    "chart": {
        "animation": "0",
        "showbevel": "0",
        "usehovercolor": "1",
        "showlegend": "1",
        "legendposition": "BOTTOM",
        "legendborderalpha": "0",
        "legendbordercolor": "ffffff",
        "legendallowdrag": "0",
        "caption": "Website Visits for the month of March 2018",
        "connectorcolor": "000000",
        "fillalpha": "80",
        "hovercolor": "CCCCCC",
        "theme": "fusion"
    },
    "colorrange": {
        "minvalue": "0",
        "startlabel": "Low",
        "endlabel": "High",
        "code": "e44a00",
        "gradient": "1",
        "color": [
            {
                "maxvalue": "2500",
                "code": "f8bd19"
            },
            {
                "maxvalue": "5000",
                "code": "6baa01"
            }
        ]
    },
    "data": [
        {
            "id": "001",
            "value": 2834
        },
        {
            "id": "003",
            "value": 3182
        },
        {
            "id": "005",
            "value": 3280
        },
        {
            "id": "007",
            "value": 911
        },
        {
            "id": "009",
            "value": 292
        },
        {
            "id": "011",
            "value": 530
        },
        {
            "id": "013",
            "value": 2515
        },
        {
            "id": "015",
            "value": 728
        },
        {
            "id": "017",
            "value": 1974
        },
        {
            "id": "019",
            "value": 848
        },
        {
            "id": "021",
            "value": 3278
        },
        {
            "id": "023",
            "value": 4463
        },
        {
            "id": "025",
            "value": 1198
        },
        {
            "id": "027",
            "value": 378
        },
        {
            "id": "029",
            "value": 2610
        },
        {
            "id": "031",
            "value": 1200
        },
        {
            "id": "033",
            "value": 3820
        },
        {
            "id": "035",
            "value": 940
        },
        {
            "id": "037",
            "value": 3416
        },
        {
            "id": "039",
            "value": 4004
        },
        {
            "id": "041",
            "value": 1604
        },
        {
            "id": "043",
            "value": 4011
        },
        {
            "id": "045",
            "value": 3203
        },
        {
            "id": "047",
            "value": 3775
        },
        {
            "id": "049",
            "value": 2721
        },
        {
            "id": "051",
            "value": 3417
        },
        {
            "id": "053",
            "value": 1530
        },
        {
            "id": "055",
            "value": 412
        },
        {
            "id": "057",
            "value": 3434
        },
        {
            "id": "059",
            "value": 1670
        },
        {
            "id": "061",
            "value": 1274
        },
        {
            "id": "063",
            "value": 4339
        },
        {
            "id": "065",
            "value": 2073
        },
        {
            "id": "067",
            "value": 1018
        },
        {
            "id": "069",
            "value": 3967
        },
        {
            "id": "071",
            "value": 3401
        },
        {
            "id": "073",
            "value": 3307
        },
        {
            "id": "075",
            "value": 1938
        },
        {
            "id": "077",
            "value": 489
        },
        {
            "id": "079",
            "value": 3207
        },
        {
            "id": "081",
            "value": 2295
        },
        {
            "id": "083",
            "value": 2747
        },
        {
            "id": "085",
            "value": 1114
        },
        {
            "id": "087",
            "value": 3400
        },
        {
            "id": "089",
            "value": 784
        },
        {
            "id": "091",
            "value": 1673
        },
        {
            "id": "093",
            "value": 4274
        },
        {
            "id": "095",
            "value": 4509
        },
        {
            "id": "097",
            "value": 3862
        },
        {
            "id": "099",
            "value": 1356
        },
        {
            "id": "101",
            "value": 4126
        },
        {
            "id": "103",
            "value": 1314
        },
        {
            "id": "105",
            "value": 1807
        },
        {
            "id": "107",
            "value": 4026
        },
        {
            "id": "109",
            "value": 3456
        },
        {
            "id": "111",
            "value": 1393
        },
        {
            "id": "113",
            "value": 1500
        },
        {
            "id": "115",
            "value": 2218
        }
    ]
}

The consolidated code for rendering the map is shown below:

component.ts
module.ts
app.component.html


import { Component } from "@angular/core";

const mapData = [{"id":"001","value":2834},{"id":"003","value":3182},{"id":"005","value":3280},{"id":"007","value":911},{"id":"009","value":292},{"id":"011","value":530},{"id":"013","value":2515},{"id":"015","value":728},{"id":"017","value":1974},{"id":"019","value":848},{"id":"021","value":3278},{"id":"023","value":4463},{"id":"025","value":1198},{"id":"027","value":378},{"id":"029","value":2610},{"id":"031","value":1200},{"id":"033","value":3820},{"id":"035","value":940},{"id":"037","value":3416},{"id":"039","value":4004},{"id":"041","value":1604},{"id":"043","value":4011},{"id":"045","value":3203},{"id":"047","value":3775},{"id":"049","value":2721},{"id":"051","value":3417},{"id":"053","value":1530},{"id":"055","value":412},{"id":"057","value":3434},{"id":"059","value":1670},{"id":"061","value":1274},{"id":"063","value":4339},{"id":"065","value":2073},{"id":"067","value":1018},{"id":"069","value":3967},{"id":"071","value":3401},{"id":"073","value":3307},{"id":"075","value":1938},{"id":"077","value":489},{"id":"079","value":3207},{"id":"081","value":2295},{"id":"083","value":2747},{"id":"085","value":1114},{"id":"087","value":3400},{"id":"089","value":784},{"id":"091","value":1673},{"id":"093","value":4274},{"id":"095","value":4509},{"id":"097","value":3862},{"id":"099","value":1356},{"id":"101","value":4126},{"id":"103","value":1314},{"id":"105","value":1807},{"id":"107","value":4026},{"id":"109","value":3456},{"id":"111","value":1393},{"id":"113","value":1500},{"id":"115","value":2218}];

const colorrange = {
"minvalue": "0",
"startlabel": "Low",
"endlabel": "High",
"code": "e44a00",
"gradient": "1",
"color": [{"maxvalue": "2500", "code": "f8bd19"}, {"maxvalue": "5000", "code": "6baa01"}]
};

@Component({
selector: "app-root",
templateUrl: "./app.component.html"

})

export class AppComponent {
dataSource: Object;
constructor() {
this.dataSource = {
"chart": {
"animation": "0",
"showbevel": "0",
"usehovercolor": "1",
"showlegend": "1",
"legendposition": "BOTTOM",
"legendborderalpha": "0",
"legendbordercolor": "ffffff",
"legendallowdrag": "0",
"legendshadow": "0",
"caption": "Website Visits for the month of March 2018",
"connectorcolor": "000000",
"fillalpha": "80",
"hovercolor": "CCCCCC",
"theme": "fusion"
},
"colorrange": colorrange,
"data": mapData

    } // end of this.dataSource

} // end of constructor
} // end of class AppComponent


import { BrowserModule } from '@angular/platform-browser';
import { NgModule } from '@angular/core';

import { AppComponent } from './app.component';
import { FusionChartsModule } from 'angular-fusioncharts';

// Import FusionCharts library and chart modules
import _ as FusionCharts from 'fusioncharts';
import _ as FusionMaps from "fusionmaps/fusioncharts.maps";

import _ as California from "fusionmaps/maps/fusioncharts.california";
import _ as FusionTheme from 'fusioncharts/themes/fusioncharts.theme.fusion';

// Pass the fusioncharts library and chart modules
FusionChartsModule.fcRoot(FusionCharts, FusionMaps, California, FusionTheme);

@NgModule({
declarations: [AppComponent],
imports: [BrowserModule,FusionChartsModule],
providers: [],
bootstrap: [AppComponent]
})
export class AppModule {}


d<h1>
    {{title}}
d</h1>
d<fusioncharts width="700" height="400" type="california" [dataSource]="dataSource">
d</fusioncharts>

That's it! The California map is ready.

FusionCharts offers you more than 2000 different maps suitable for various purposes. You can find more about the different types of maps here.

Heat Map

A heat map chart utilizes different colors to represent data values within a table. It comes in handy the most, when you have to plot large and complex data sets. FusionCharts suite XT supports two types of heat map charts - a numeric heat map to plot numeric values, and a category-based heat map to plot non-numeric data.

TreeMaps are another similar chart types with heirarchial data. Treemaps are ideal for displaying large amounts of hierarchically structured (tree-structured) data. The space in the visualization is split up into rectangles that are sized and ordered by a quantitative variable.The levels in the hierarchy of the treemap are visualized as rectangles containing other rectangles. FInd more about the treemaps here.

In the section below, we will see how to build a heat map chart.

FusionCharts will load here..

As you can see in the heat map above, the data plot is indicating the ratings of four different smartphones based on five common components, with the help of different colors.

State	Processor	Screen Size	Price	Battery Backup	Camera
Samsung Galaxy H5	8.7	8.5	9.3	9.7	8
HTC One (M8)	9.2	8.3	7.3	8.8	8.7
Apple iPhone 5S	9.1	8.6	7.2	8.4	9.5
Nokia Lumia 1520	8.8	9.1	9.7	9.2	8.1

To convert the data provided in the above table to a data format that FusionCharts can use, you need the following properties:

rows
columns
dataset
colorRange

The diagram below can give you an idea about how we are going to assign values to these properties.

{ "header": "Chart Anatomy", "subHeader": "To know how FusionCharts works, it is important to understand the various components and concepts of a chart", "content": { "header": "Below are different sections with interactive annotated images describing various components and concepts of charts", "contentGroup": [ { "itemHeader": "", "imgSrc": "heat-map-chart-anatomy.png", "annotations": [ { "annotationNumber": "1", "annotationName": "dataset", "annotationDesc": "An array of objects representing each cell of the heat map. The number of objects should be equal to the number of valid cells in the teat map table.", "annotationDescLinkPath": null, "syntax": "[{\r\n \"data\": [\r\n {\r\n \"rowid\": \"SGS5\",\r\n \"columnid\": \"processor\",\r\n \"value\": \"8.7\",\r\n \"tllabel\": \"Quad Core 2.5 GHz\",\r\n \"trlabel\": \"OS : Android 4.4 Kitkat\"\r\n },.....\r\n}]", "leftPosition": "30.5%", "topPosition": "30.5%", "annotationLinks": [] }, { "annotationNumber": "2", "annotationName": "colorRange", "annotationDesc": "Outlines the color variation of the different cells of the table based on their values. An array consisting of objects with range of values along with the color code. It is an array of labels representing different quarters as shown above", "annotationDescLinkPath": null, "syntax": "{\r\n \"gradient\": \"0\",\r\n \"minvalue\": \"0\",\r\n \"code\": \"E24B1A\",\r\n \"startlabel\": \"Poor\",\r\n \"endlabel\": \"Good\",\r\n \"color\": [\r\n {\r\n \"code\": \"E24B1A\",\r\n \"minvalue\": \"1\",\r\n \"maxvalue\": \"5\",\r\n \"label\": \"Bad\"\r\n },....\r\n ]\r\n}", "leftPosition": "37.5%", "topPosition": "69.5%", "annotationLinks": [] }, { "annotationNumber": "3", "annotationName": "rows", "annotationDesc": "An array of rows of the matrix. Each row consists of an id and a label.", "annotationDescLinkPath": null, "syntax": "{\r\n \"row\": [\r\n {\r\n \"id\": \"SGS5\",\r\n \"label\": \"Samsung Galaxy S5\"\r\n },....\r\n ]\r\n}", "leftPosition": "9.5%", "topPosition": "47.5%" }, { "annotationNumber": "4", "annotationName": "columns", "annotationDesc": "An array of columns of the matrix. Each object consists of an id and a label.", "annotationDescLinkPath": null, "syntax": "{\r\n \"column\": [\r\n {\r\n \"id\": \"processor\",\r\n \"label\": \"Processor\"\r\n },....\r\n ]\r\n}", "leftPosition": "66.5%", "topPosition": "57.5%" } ] } ] } }

In the sample above, the chart shows the heat map for comparing different smartphones on the basis of a number of common components. The data in the JSON format for the above chart looks as follows:

const rows = {
    "row": [
        {
            "id": "SGS5",
            "label": "Samsung Galaxy S5"
        },
        {
            "id": "HTC1M8",
            "label": "HTC One (M8)"
        },
        {
            "id": "IPHONES5",
            "label": "Apple iPhone 5S"
        },
        {
            "id": "LUMIA",
            "label": "Nokia Lumia 1520"
        }
    ]
};
const columns = {
    "column": [
        {
            "id": "processor",
            "label": "Processor"
        },
        {
            "id": "screen",
            "label": "Screen Size"
        },
        {
            "id": "price",
            "label": "Price"
        },
        {
            "id": "backup",
            "label": "Battery Backup"
        },
        {
            "id": "cam",
            "label": "Camera"
        }
    ]
};
const dataset =[{
    "data": [
        {
            "rowid": "SGS5",
            "columnid": "processor",
            "value": "8.7",
            "tllabel": "Quad Core 2.5 GHz",
            "trlabel": "OS : Android 4.4 Kitkat"
        },
        {
            "rowid": "SGS5",
            "columnid": "screen",
            "value": "8.5",
            "tllabel": "5.1 inch",
            "trlabel": "AMOLED screen"
        },
        {
            "rowid": "SGS5",
            "columnid": "price",
            "value": "9.3",
            "tllabel": "$600"
        },
        {
            "rowid": "SGS5",
            "columnid": "backup",
            "value": "9.7",
            "tllabel": "29 Hrs",
            "trlabel": "Battery : 2800 MAH"
        },
        {
            "rowid": "SGS5",
            "columnid": "cam",
            "value": "8",
            "tllabel": "16 MP",
            "trlabel": "Front Camera : 2.1 MP"
        },
        {
            "rowid": "HTC1M8",
            "columnid": "processor",
            "value": "9.2",
            "tllabel": "Quad Core 2.3 GHz",
            "trlabel": "OS : Android 4.4 Kitkat"
        },
        {
            "rowid": "HTC1M8",
            "columnid": "screen",
            "value": "8.3",
            "tllabel": "5 inch",
            "trlabel": "LCD screen"
        },
        {
            "rowid": "HTC1M8",
            "columnid": "price",
            "value": "7.3",
            "tllabel": "$600"
        },
        {
            "rowid": "HTC1M8",
            "columnid": "backup",
            "value": "8.8",
            "tllabel": "20 Hrs",
            "trlabel": "Battery : 2600 MAH"
        },
        {
            "rowid": "HTC1M8",
            "columnid": "cam",
            "value": "8.7",
            "tllabel": "4 MP",
            "trlabel": "Front Camera : 5 MP"
        },
        {
            "rowid": "IPHONES5",
            "columnid": "processor",
            "value": "9.1",
            "tllabel": "Dual Core",
            "trlabel": "OS : iOS 7"
        },
        {
            "rowid": "IPHONES5",
            "columnid": "screen",
            "value": "8.6",
            "tllabel": "4 inch",
            "trlabel": "Retina LCD screen"
        },
        {
            "rowid": "IPHONES5",
            "columnid": "price",
            "value": "7.2",
            "tllabel": "$649"
        },
        {
            "rowid": "IPHONES5",
            "columnid": "backup",
            "value": "8.4",
            "tllabel": "10 Hrs",
            "trlabel": "Battery : 1560 MAH"
        },
        {
            "rowid": "IPHONES5",
            "columnid": "cam",
            "value": "9.5",
            "tllabel": "8 MP",
            "trlabel": "Front Camera : 1.2 MP"
        },
        {
            "rowid": "LUMIA",
            "columnid": "processor",
            "value": "8.8",
            "tllabel": "Quad Core 2.2 GHz",
            "trlabel": "OS: Windows Phone 8"
        },
        {
            "rowid": "LUMIA",
            "columnid": "screen",
            "value": "9.1",
            "tllabel": "6 inch",
            "trlabel": "LCD screen"
        },
        {
            "rowid": "LUMIA",
            "columnid": "price",
            "value": "9.7",
            "tllabel": "$470"
        },
        {
            "rowid": "LUMIA",
            "columnid": "backup",
            "value": "9.2",
            "tllabel": "27 Hrs",
            "trlabel": "Battery : 3400 MAH"
        },
        {
            "rowid": "LUMIA",
            "columnid": "cam",
            "value": "8.1",
            "tllabel": "20MP",
            "trlabel": "Front Camera : 1.2 MP"
        }
    ]
}];
const colorRange = {
    "gradient": "0",
    "minvalue": "0",
    "code": "E24B1A",
    "startlabel": "Poor",
    "endlabel": "Good",
    "color": [
        {
            "code": "E24B1A",
            "minvalue": "1",
            "maxvalue": "5",
            "label": "Bad"
        },
        {
            "code": "F6BC33",
            "minvalue": "5",
            "maxvalue": "8.5",
            "label": "Average"
        },
        {
            "code": "6DA81E",
            "minvalue": "8.5",
            "maxvalue": "10",
            "label": "Good"
        }
    ]
};

Now to build the chart. Copy the codes for the module.ts, component.ts, and app.component.html files from below and paste them in the respective files:

component.ts
module.ts
app.component.html


// STEP 1- To import the dependencies
import { Component } from "@angular/core";

//STEP 2 - Define the chart data constituting dataset and colorrange objects
const dataset = [{
"data": [{
"rowid": "Samsung Galaxy S5",
"columnid": "Processor",
"value": "8.7",
"tllabel": "Quad Core 2.5 GHz",
"trlabel": "OS : Android 4.4 Kitkat"
},
{
"rowid": "Samsung Galaxy S5",
"columnid": "Screen Size",
"value": "8.5",
"tllabel": "5.1 inch",
"trlabel": "AMOLED screen"
},
{
"rowid": "Samsung Galaxy S5",
"columnid": "Price",
"value": "9.3",
"tllabel": "$600"
},
{
"rowid": "Samsung Galaxy S5",
"columnid": "Battery Backup",
"value": "9.7",
"tllabel": "29 Hrs",
"trlabel": "Battery : 2800 MAH"
},
{
"rowid": "Samsung Galaxy S5",
"columnid": "Camera",
"value": "8",
"tllabel": "16 MP",
"trlabel": "Front Camera : 2.1 MP"
},
{
"rowid": "HTC One (M8)",
"columnid": "Processor",
"value": "9.2",
"tllabel": "Quad Core 2.3 GHz",
"trlabel": "OS : Android 4.4 Kitkat"
},
{
"rowid": "HTC One (M8)",
"columnid": "Screen Size",
"value": "8.3",
"tllabel": "5 inch",
"trlabel": "LCD screen"
},
{
"rowid": "HTC One (M8)",
"columnid": "Price",
"value": "7.3",
"tllabel": "$600"
},
{
"rowid": "HTC One (M8)",
"columnid": "Battery Backup",
"value": "8.8",
"tllabel": "20 Hrs",
"trlabel": "Battery : 2600 MAH"
},
{
"rowid": "HTC One (M8)",
"columnid": "Camera",
"value": "8.7",
"tllabel": "4 MP",
"trlabel": "Front Camera : 5 MP"
},
{
"rowid": "Apple iPhone 5S",
"columnid": "Processor",
"value": "9.1",
"tllabel": "Dual Core",
"trlabel": "OS : iOS 7"
},
{
"rowid": "Apple iPhone 5S",
"columnid": "Screen Size",
"value": "8.6",
"tllabel": "4 inch",
"trlabel": "Retina LCD screen"
},
{
"rowid": "Apple iPhone 5S",
"columnid": "Price",
"value": "7.2",
"tllabel": "$649"
},
{
"rowid": "Apple iPhone 5S",
"columnid": "Battery Backup",
"value": "8.4",
"tllabel": "10 Hrs",
"trlabel": "Battery : 1560 MAH"
},
{
"rowid": "Apple iPhone 5S",
"columnid": "Camera",
"value": "9.5",
"tllabel": "8 MP",
"trlabel": "Front Camera : 1.2 MP"
},
{
"rowid": "Nokia Lumia 1520",
"columnid": "Processor",
"value": "8.8",
"tllabel": "Quad Core 2.2 GHz",
"trlabel": "OS: Windows Phone 8"
},
{
"rowid": "Nokia Lumia 1520",
"columnid": "Screen Size",
"value": "9.1",
"tllabel": "6 inch",
"trlabel": "LCD screen"
},
{
"rowid": "Nokia Lumia 1520",
"columnid": "Price",
"value": "9.7",
"tllabel": "$470"
},
{
"rowid": "Nokia Lumia 1520",
"columnid": "Battery Backup",
"value": "9.2",
"tllabel": "27 Hrs",
"trlabel": "Battery : 3400 MAH"
},
{
"rowid": "Nokia Lumia 1520",
"columnid": "Camera",
"value": "8.1",
"tllabel": "20MP",
"trlabel": "Front Camera : 1.2 MP"
}
]
}];

const colorrange = {
"gradient": "0",
"minvalue": "0",
"code": "E24B1A",
"startlabel": "Poor",
"endlabel": "Good",
"color": [{
"code": "E24B1A",
"minvalue": "1",
"maxvalue": "5",
"label": "Bad"
},
{
"code": "F6BC33",
"minvalue": "5",
"maxvalue": "8.5",
"label": "Average"
},
{
"code": "6DA81E",
"minvalue": "8.5",
"maxvalue": "10",
"label": "Good"
}
]
};

@Component({
selector: "app-root",
templateUrl: "./app.component.html"

})

export class AppComponent {
dataSource: Object;
constructor() {
this.dataSource = {
"chart": {
"caption": "Top Smartphone Ratings",
"subcaption": "By Features",
"xAxisName": "Features",
"yAxisName": "Model",
"showPlotBorder": "1",
"xAxisLabelsOnTop": "1",
"plottooltext": "$rowLabel :
{br}Rating : $dataValue{br}$columnLabel : $tlLabel{br}\$trLabel",
//Cosmetics
"showValues": "1",
"showBorder": "0",
"bgColor": "#ffffff",
"showShadow": "0",
"usePlotGradientColor": "0",
"toolTipColor": "#ffffff",
"toolTipBorderThickness": "0",
"toolTipBgColor": "#000000",
"toolTipBgAlpha": "80",
"toolTipBorderRadius": "2",
"toolTipPadding": "5",
"theme": "fusion"
},
"dataset": dataset,
"colorrange": colorrange

    }// end of this.dataSource

} // end of constructor
} // end of class AppComponent


import { BrowserModule } from '@angular/platform-browser';
import { NgModule } from '@angular/core';

import { AppComponent } from './app.component';
import { FusionChartsModule } from 'angular-fusioncharts';

// Import FusionCharts library and chart modules
import  as FusionCharts from 'fusioncharts';
import  as charts from 'fusioncharts/fusioncharts.charts';
import  as PowerCharts from "fusioncharts/fusioncharts.powercharts";
import  as FusionTheme from 'fusioncharts/themes/fusioncharts.theme.fusion';

// Pass the fusioncharts library and chart modules
FusionChartsModule.fcRoot(FusionCharts, charts, FusionTheme, PowerCharts);

@NgModule({
  declarations: [AppComponent],
  imports: [BrowserModule,FusionChartsModule],
  providers: [],
  bootstrap: [AppComponent]
})
export class AppModule {}


<h1>
  {{title}}
</h1>
<fusioncharts
  width="700"
  height="400"
  type="heatmap"
  [dataSource]="dataSource"
>
</fusioncharts>

There are more variants of Heatmap charts available with FusionCharts. Know more about Heat maps and its configurations here. You can also create various charts belonging to the PowerCharts family in a similar way.

Gantt Chart

A Gantt chart is a date/time-based chart, which you can use to plot tasks along with their start and end dates/times. You can also use the chart to define milestones for a project, indicating different stages with their deadlines. That way, you can constantly keep an eye on project status, and plan alternate strategies in case you encounter an unprecedented delay.

In the section below, we will see how to build a Gantt chart.

FusionCharts will load here..

As you can see in the Gantt chart above, the data plot is indicating the planned and the actual achievements, as well as the delays, with the help of different colors. In the above chart, we have plotted the Project Plan for the opening of a new store. To convert the data provided above to a data format that FusionCharts can use, you need the following properties:

categories
processes
datatable
tasks
connectors

The diagram below can give you an idea about how we are going to assign values to these properties.

{ "header": "Chart Anatomy", "subHeader": "To know how FusionCharts works, it is important to understand the various components and concepts of a chart", "content": { "header": "Below are different sections with interactive annotated images describing various components and concepts of charts", "contentGroup": [ { "itemHeader": "", "imgSrc": "gantt-chart-anatomy.png", "annotations": [ { "annotationNumber": "1", "annotationName": "categories", "annotationDesc": "An array of objects made up of individual categories (mostly time - day, week, month).", "annotationDescLinkPath": null, "syntax": "[{\r\n \"bgcolor\": \"#999999\",\r\n \"align\": \"middle\",\r\n \"fontcolor\": \"#ffffff\",\r\n \"fontsize\": \"12\",\r\n \"category\": [{\r\n \"start\": \"1\/4\/2014\",\r\n \"end\": \"30\/4\/2014\",\r\n \"label\": \"April\"\r\n }, ...]\r\n}]", "leftPosition": "45.5%", "topPosition": "16.5%", "annotationLinks": [] }, { "annotationNumber": "2", "annotationName": "processes", "annotationDesc": "An array representing different tasks the Gantt chart is accounting for. Each process has a label and an id.", "annotationDescLinkPath": null, "syntax": "{\r\n \"headertext\": \"Task\",\r\n \"bgcolor\": \"#6baa01\",\r\n \"process\": [{\r\n \"label\": \"Clear site\",\r\n \"id\": \"1\"\r\n }, ....]\r\n}", "leftPosition": "16%", "topPosition": "22%", "annotationLinks": [] }, { "annotationNumber": "3", "annotationName": "datatable", "annotationDesc": "datatable is a table with multiple columns where we can capture any necessary information about the tasks", "annotationDescLinkPath": null, "syntax": "{\r\n \"showprocessname\": \"1\",\r\n \"datacolumn\": [{\r\n \"headertext\": \"Actual{br}Start{br}Date\",\r\n \"text\": [{\r\n \"label\": \"9\/4\/2014\"\r\n }, ...]\r\n },...]\r\n}", "leftPosition": "25.5%", "topPosition": "17.5%" }, { "annotationNumber": "4", "annotationName": "tasks", "annotationDesc": "The timeline of different tasks across the processes and the mentioned categories. Each task consists of a processId, id , start date and end date.", "annotationDescLinkPath": null, "syntax": "{\r\n \"task\": [{\r\n \"label\": \"Planned\",\r\n \"processid\": \"1\",\r\n \"start\": \"9\/4\/2014\",\r\n \"end\": \"12\/4\/2014\",\r\n \"id\": \"1-1\",\r\n }, {\r\n \"label\": \"Actual\",\r\n \"processid\": \"1\",\r\n \"start\": \"9\/4\/2014\",\r\n \"end\": \"12\/4\/2014\",\r\n \"id\": \"1\",\r\n }, ...]\r\n}", "leftPosition": "55.5%", "topPosition": "27.5%" }, { "annotationNumber": "5", "annotationName": "connectors", "annotationDesc": "Represents the linkages between different tasks. Each connector has fromtaskid, totaskid and its styling parameters.", "annotationDescLinkPath": null, "syntax": "[{\r\n \"connector\": [{\r\n \"fromtaskid\": \"1\",\r\n \"totaskid\": \"2\",\r\n \"fromtaskconnectstart_\": \"1\"\r\n }, ....]\r\n}]", "leftPosition": "72.5%", "topPosition": "40.5%" } ] } ] } }

In the sample above, the chart shows the project structure for opening a new store. The data in the JSON format for the above chart looks as follows:

//Define the categories (month-labels) of the Gantt chart
const categories = [{
    "bgcolor": "#999999",
    "category": [{
    "start": "1/4/2014",
    "end": "30/6/2014",
    "label": "Months",
    "align": "middle",
    "fontcolor": "#ffffff",
    "fontsize": "12"
    }]
}, {
    "bgcolor": "#999999",
    "align": "middle",
    "fontcolor": "#ffffff",
    "fontsize": "12",
    "category": [{
    "start": "1/4/2014",
    "end": "30/4/2014",
    "label": "April"
    }, {
    "start": "1/5/2014",
    "end": "31/5/2014",
    "label": "May"
    }, {
    "start": "1/6/2014",
    "end": "30/6/2014",
    "label": "June"
    }]
}, {
    "bgcolor": "#ffffff",
    "fontcolor": "#333333",
    "fontsize": "11",
    "align": "center",
    "category": [{
    "start": "1/4/2014",
    "end": "5/4/2014",
    "label": "Week 1"
    }, {
    "start": "6/4/2014",
    "end": "12/4/2014",
    "label": "Week 2"
    }, {
    "start": "13/4/2014",
    "end": "19/4/2014",
    "label": "Week 3"
    }, {
    "start": "20/4/2014",
    "end": "26/4/2014",
    "label": "Week 4"
    }, {
    "start": "27/4/2014",
    "end": "3/5/2014",
    "label": "Week 5"
    }, {
    "start": "4/5/2014",
    "end": "10/5/2014",
    "label": "Week 6"
    }, {
    "start": "11/5/2014",
    "end": "17/5/2014",
    "label": "Week 7"
    }, {
    "start": "18/5/2014",
    "end": "24/5/2014",
    "label": "Week 8"
    }, {
    "start": "25/5/2014",
    "end": "31/5/2014",
    "label": "Week 9"
    }, {
    "start": "1/6/2014",
    "end": "7/6/2014",
    "label": "Week 10"
    }, {
    "start": "8/6/2014",
    "end": "14/6/2014",
    "label": "Week 11"
    }, {
    "start": "15/6/2014",
    "end": "21/6/2014",
    "label": "Week 12"
    }, {
    "start": "22/6/2014",
    "end": "28/6/2014",
    "label": "Week 13"
    }]
}];
// Define the processes which are a part of the planning
const processes = {
    "headertext": "Task",
    "fontcolor": "#000000",
    "fontsize": "11",
    "isanimated": "1",
    "bgcolor": "#6baa01",
    "headervalign": "bottom",
    "headeralign": "left",
    "headerbgcolor": "#999999",
    "headerfontcolor": "#ffffff",
    "headerfontsize": "12",
    "align": "left",
    "isbold": "1",
    "bgalpha": "25",
    "process": [{
        "label": "Clear site",
        "id": "1"
        }, {
        "label": "Excavate Foundation",
        "id": "2",
        "hoverBandColor": "#e44a00",
        "hoverBandAlpha": "40"
        }, {
        "label": "Concrete Foundation",
        "id": "3",
        "hoverBandColor": "#e44a00",
        "hoverBandAlpha": "40"
        }, {
        "label": "Footing to DPC",
        "id": "4",
        "hoverBandColor": "#e44a00",
        "hoverBandAlpha": "40"
        }, {
        "label": "Drainage Services",
        "id": "5",
        "hoverBandColor": "#e44a00",
        "hoverBandAlpha": "40"
        }, {
        "label": "Backfill",
        "id": "6",
        "hoverBandColor": "#e44a00",
        "hoverBandAlpha": "40"
        }, {
        "label": "Ground Floor",
        "id": "7"
        }, {
        "label": "Walls on First Floor",
        "id": "8"
        }, {
        "label": "First Floor Carcass",
        "id": "9",
        "hoverBandColor": "#e44a00",
        "hoverBandAlpha": "40"
        }, {
        "label": "First Floor Deck",
        "id": "10",
        "hoverBandColor": "#e44a00",
        "hoverBandAlpha": "40"
        }, {
        "label": "Roof Structure",
        "id": "11"
        }, {
        "label": "Roof Covering",
        "id": "12"
        }, {
        "label": "Rainwater Gear",
        "id": "13"
        }, {
        "label": "Windows",
        "id": "14"
        }, {
        "label": "External Doors",
        "id": "15"
        }, {
        "label": "Connect Electricity",
        "id": "16"
        }, {
        "label": "Connect Water Supply",
        "id": "17",
        "hoverBandColor": "#e44a00",
        "hoverBandAlpha": "40"
        }, {
        "label": "Install Air Conditioning",
        "id": "18",
        "hoverBandColor": "#e44a00",
        "hoverBandAlpha": "40"
        }, {
        "label": "Interior Decoration",
        "id": "19",
        "hoverBandColor": "#e44a00",
        "hoverBandAlpha": "40"
        }, {
        "label": "Fencing And signs",
        "id": "20"
        }, {
        "label": "Exterior Decoration",
        "id": "21",
        "hoverBandColor": "#e44a00",
        "hoverBandAlpha": "40"
        }, {
        "label": "Setup racks",
        "id": "22"
    }]
};
//Define the start and end dates of each process
const datatable = {
    "showprocessname": "1",
    "namealign": "left",
    "fontcolor": "#000000",
    "fontsize": "10",
    "valign": "right",
    "align": "center",
    "headervalign": "bottom",
    "headeralign": "center",
    "headerbgcolor": "#999999",
    "headerfontcolor": "#ffffff",
    "headerfontsize": "12",
    "datacolumn": [{
        "bgcolor": "#eeeeee",
        "headertext": "Actual{br}Start{br}Date",
        "text": [{
            "label": "9/4/2014"
        }, {
            "label": "13/4/2014"
        }, {
            "label": "26/4/2014",
            "bgcolor": "#e44a00",
            "bgAlpha": "40",

        }, {
            "label": "4/5/2014",
            "bgcolor": "#e44a00",
            "bgAlpha": "40"
        }, {
            "label": "6/5/2014"
        }, {
            "label": "5/5/2014",
            "bgcolor": "#e44a00",
            "bgAlpha": "40"
        }, {
            "label": "11/5/2014"
        }, {
            "label": "16/5/2014"
        }, {
            "label": "16/5/2014"
        }, {
            "label": "21/5/2014",
            "bgcolor": "#e44a00",
            "bgAlpha": "40"
        }, {
            "label": "25/5/2014"
        }, {
            "label": "28/5/2014"
        }, {
            "label": "4/6/2014"
        }, {
            "label": "4/6/2014"
        }, {
            "label": "4/6/2014"
        }, {
            "label": "2/6/2014"
        }, {
            "label": "5/6/2014"
        }, {
            "label": "18/6/2014",
            "bgcolor": "#e44a00",
            "bgAlpha": "40"
        }, {
            "label": "16/6/2014",
            "bgcolor": "#e44a00",
            "bgAlpha": "40"
        }, {
            "label": "23/6/2014"
        }, {
            "label": "18/6/2014"
        }, {
            "label": "25/6/2014"
        }]
        }, {
        "bgcolor": "#eeeeee",
        "headertext": "Actual{br}End{br}Date",
        "text": [{
            "label": "12/4/2014"
        }, {
            "label": "25/4/2014",
            "bgcolor": "#e44a00",
            "bgAlpha": "40"
        }, {
            "label": "4/5/2014",
            "bgcolor": "#e44a00",
            "bgAlpha": "40"
        }, {
            "label": "10/5/2014"
        }, {
            "label": "10/5/2014"
        }, {
            "label": "11/5/2014",
            "bgcolor": "#e44a00",
            "bgAlpha": "40"
        }, {
            "label": "14/5/2014"
        }, {
            "label": "19/5/2014"
        }, {
            "label": "21/5/2014",
            "bgcolor": "#e44a00",
            "bgAlpha": "40"
        }, {
            "label": "24/5/2014",
            "bgcolor": "#e44a00",
            "bgAlpha": "40"
        }, {
            "label": "27/5/2014"
        }, {
            "label": "1/6/2014"
        }, {
            "label": "6/6/2014"
        }, {
            "label": "4/6/2014"
        }, {
            "label": "4/6/2014"
        }, {
            "label": "7/6/2014"
        }, {
            "label": "17/6/2014",
            "bgcolor": "#e44a00",
            "bgAlpha": "40"
        }, {
            "label": "20/6/2014",
            "bgcolor": "#e44a00",
            "bgAlpha": "40"
        }, {
            "label": "23/6/2014"
        }, {
            "label": "23/6/2014"
        }, {
            "label": "23/6/2014",
            "bgcolor": "#e44a00",
            "bgAlpha": "40"
        }, {
            "label": "28/6/2014"
        }]
    }]
};
//Define the actual labelled tasks - Planned and Actual
const tasks = {
    "task": [{
    "label": "Planned",
    "processid": "1",
    "start": "9/4/2014",
    "end": "12/4/2014",
    "id": "1-1",
    "color": "#008ee4",
    "height": "32%",
    "toppadding": "12%"
    }, {
    "label": "Actual",
    "processid": "1",
    "start": "9/4/2014",
    "end": "12/4/2014",
    "id": "1",
    "color": "#6baa01",
    "toppadding": "56%",
    "height": "32%"
    }, {
    "label": "Planned",
    "processid": "2",
    "start": "13/4/2014",
    "end": "23/4/2014",
    "id": "2-1",
    "color": "#008ee4",
    "height": "32%",
    "toppadding": "12%"
    }, {
    "label": "Actual",
    "processid": "2",
    "start": "13/4/2014",
    "end": "25/4/2014",
    "id": "2",
    "color": "#6baa01",
    "toppadding": "56%",
    "height": "32%"
    }, {
    "label": "Delay",
    "processid": "2",
    "start": "23/4/2014",
    "end": "25/4/2014",
    "id": "2-2",
    "color": "#e44a00",
    "toppadding": "56%",
    "height": "32%",
    "tooltext": "Delayed by 2 days."
    }, {
    "label": "Planned",
    "processid": "3",
    "start": "23/4/2014",
    "end": "30/4/2014",
    "id": "3-1",
    "color": "#008ee4",
    "height": "32%",
    "toppadding": "12%"
    }, {
    "label": "Actual",
    "processid": "3",
    "start": "26/4/2014",
    "end": "4/5/2014",
    "id": "3",
    "color": "#6baa01",
    "toppadding": "56%",
    "height": "32%"
    }, {
    "label": "Delay",
    "processid": "3",
    "start": "3/5/2014",
    "end": "4/5/2014",
    "id": "3-2",
    "color": "#e44a00",
    "toppadding": "56%",
    "height": "32%",
    "tooltext": "Delayed by 1 days."
    }, {
    "label": "Planned",
    "processid": "4",
    "start": "3/5/2014",
    "end": "10/5/2014",
    "id": "4-1",
    "color": "#008ee4",
    "height": "32%",
    "toppadding": "12%"
    }, {
    "label": "Actual",
    "processid": "4",
    "start": "4/5/2014",
    "end": "10/5/2014",
    "id": "4",
    "color": "#6baa01",
    "toppadding": "56%",
    "height": "32%"
    }, {
    "label": "Planned",
    "processid": "5",
    "start": "6/5/2014",
    "end": "11/5/2014",
    "id": "5-1",
    "color": "#008ee4",
    "height": "32%",
    "toppadding": "12%"
    }, {
    "label": "Actual",
    "processid": "5",
    "start": "6/5/2014",
    "end": "10/5/2014",
    "id": "5",
    "color": "#6baa01",
    "toppadding": "56%",
    "height": "32%"
    }, {
    "label": "Planned",
    "processid": "6",
    "start": "4/5/2014",
    "end": "7/5/2014",
    "id": "6-1",
    "color": "#008ee4",
    "height": "32%",
    "toppadding": "12%"
    }, {
    "label": "Actual",
    "processid": "6",
    "start": "5/5/2014",
    "end": "11/5/2014",
    "id": "6",
    "color": "#6baa01",
    "toppadding": "56%",
    "height": "32%"
    }, {
    "label": "Delay",
    "processid": "6",
    "start": "7/5/2014",
    "end": "11/5/2014",
    "id": "6-2",
    "color": "#e44a00",
    "toppadding": "56%",
    "height": "32%",
    "tooltext": "Delayed by 4 days."
    }, {
    "label": "Planned",
    "processid": "7",
    "start": "11/5/2014",
    "end": "14/5/2014",
    "id": "7-1",
    "color": "#008ee4",
    "height": "32%",
    "toppadding": "12%"
    }, {
    "label": "Actual",
    "processid": "7",
    "start": "11/5/2014",
    "end": "14/5/2014",
    "id": "7",
    "color": "#6baa01",
    "toppadding": "56%",
    "height": "32%"
    }, {
    "label": "Planned",
    "processid": "8",
    "start": "16/5/2014",
    "end": "19/5/2014",
    "id": "8-1",
    "color": "#008ee4",
    "height": "32%",
    "toppadding": "12%"
    }, {
    "label": "Actual",
    "processid": "8",
    "start": "16/5/2014",
    "end": "19/5/2014",
    "id": "8",
    "color": "#6baa01",
    "toppadding": "56%",
    "height": "32%"
    }, {
    "label": "Planned",
    "processid": "9",
    "start": "16/5/2014",
    "end": "18/5/2014",
    "id": "9-1",
    "color": "#008ee4",
    "height": "32%",
    "toppadding": "12%"
    }, {
    "label": "Actual",
    "processid": "9",
    "start": "16/5/2014",
    "end": "21/5/2014",
    "id": "9",
    "color": "#6baa01",
    "toppadding": "56%",
    "height": "32%"
    }, {
    "label": "Delay",
    "processid": "9",
    "start": "18/5/2014",
    "end": "21/5/2014",
    "id": "9-2",
    "color": "#e44a00",
    "toppadding": "56%",
    "height": "32%",
    "tooltext": "Delayed by 3 days."
    }, {
    "label": "Planned",
    "processid": "10",
    "start": "20/5/2014",
    "end": "23/5/2014",
    "id": "10-1",
    "color": "#008ee4",
    "height": "32%",
    "toppadding": "12%"
    }, {
    "label": "Actual",
    "processid": "10",
    "start": "21/5/2014",
    "end": "24/5/2014",
    "id": "10",
    "color": "#6baa01",
    "toppadding": "56%",
    "height": "32%"
    }, {
    "label": "Delay",
    "processid": "10",
    "start": "23/5/2014",
    "end": "24/5/2014",
    "id": "10-2",
    "color": "#e44a00",
    "toppadding": "56%",
    "height": "32%",
    "tooltext": "Delayed by 1 days."
    }, {
    "label": "Planned",
    "processid": "11",
    "start": "25/5/2014",
    "end": "27/5/2014",
    "id": "11-1",
    "color": "#008ee4",
    "height": "32%",
    "toppadding": "12%"
    }, {
    "label": "Actual",
    "processid": "11",
    "start": "25/5/2014",
    "end": "27/5/2014",
    "id": "11",
    "color": "#6baa01",
    "toppadding": "56%",
    "height": "32%"
    }, {
    "label": "Planned",
    "processid": "12",
    "start": "28/5/2014",
    "end": "1/6/2014",
    "id": "12-1",
    "color": "#008ee4",
    "height": "32%",
    "toppadding": "12%"
    }, {
    "label": "Actual",
    "processid": "12",
    "start": "28/5/2014",
    "end": "1/6/2014",
    "id": "12",
    "color": "#6baa01",
    "toppadding": "56%",
    "height": "32%"
    }, {
    "label": "Planned",
    "processid": "13",
    "start": "4/6/2014",
    "end": "6/6/2014",
    "id": "13-1",
    "color": "#008ee4",
    "height": "32%",
    "toppadding": "12%"
    }, {
    "label": "Actual",
    "processid": "13",
    "start": "4/6/2014",
    "end": "6/6/2014",
    "id": "13",
    "color": "#6baa01",
    "toppadding": "56%",
    "height": "32%"
    }, {
    "label": "Planned",
    "processid": "14",
    "start": "4/6/2014",
    "end": "4/6/2014",
    "id": "14-1",
    "color": "#008ee4",
    "height": "32%",
    "toppadding": "12%"
    }, {
    "label": "Actual",
    "processid": "14",
    "start": "4/6/2014",
    "end": "4/6/2014",
    "id": "14",
    "color": "#6baa01",
    "toppadding": "56%",
    "height": "32%"
    }, {
    "label": "Planned",
    "processid": "15",
    "start": "4/6/2014",
    "end": "4/6/2014",
    "id": "15-1",
    "color": "#008ee4",
    "height": "32%",
    "toppadding": "12%"
    }, {
    "label": "Actual",
    "processid": "15",
    "start": "4/6/2014",
    "end": "4/6/2014",
    "id": "15",
    "color": "#6baa01",
    "toppadding": "56%",
    "height": "32%"
    }, {
    "label": "Planned",
    "processid": "16",
    "start": "2/6/2014",
    "end": "7/6/2014",
    "id": "16-1",
    "color": "#008ee4",
    "height": "32%",
    "toppadding": "12%"
    }, {
    "label": "Actual",
    "processid": "16",
    "start": "2/6/2014",
    "end": "7/6/2014",
    "id": "16",
    "color": "#6baa01",
    "toppadding": "56%",
    "height": "32%"
    }, {
    "label": "Planned",
    "processid": "17",
    "start": "5/6/2014",
    "end": "10/6/2014",
    "id": "17-1",
    "color": "#008ee4",
    "height": "32%",
    "toppadding": "12%"
    }, {
    "label": "Actual",
    "processid": "17",
    "start": "5/6/2014",
    "end": "17/6/2014",
    "id": "17",
    "color": "#6baa01",
    "toppadding": "56%",
    "height": "32%"
    }, {
    "label": "Delay",
    "processid": "17",
    "start": "10/6/2014",
    "end": "17/6/2014",
    "id": "17-2",
    "color": "#e44a00",
    "toppadding": "56%",
    "height": "32%",
    "tooltext": "Delayed by 7 days."
    }, {
    "label": "Planned",
    "processid": "18",
    "start": "10/6/2014",
    "end": "12/6/2014",
    "id": "18-1",
    "color": "#008ee4",
    "height": "32%",
    "toppadding": "12%"
    }, {
    "label": "Delay",
    "processid": "18",
    "start": "18/6/2014",
    "end": "20/6/2014",
    "id": "18",
    "color": "#e44a00",
    "toppadding": "56%",
    "height": "32%",
    "tooltext": "Delayed by 8 days."
    }, {
    "label": "Planned",
    "processid": "19",
    "start": "15/6/2014",
    "end": "23/6/2014",
    "id": "19-1",
    "color": "#008ee4",
    "height": "32%",
    "toppadding": "12%"
    }, {
    "label": "Actual",
    "processid": "19",
    "start": "16/6/2014",
    "end": "23/6/2014",
    "id": "19",
    "color": "#6baa01",
    "toppadding": "56%",
    "height": "32%"
    }, {
    "label": "Planned",
    "processid": "20",
    "start": "23/6/2014",
    "end": "23/6/2014",
    "id": "20-1",
    "color": "#008ee4",
    "height": "32%",
    "toppadding": "12%"
    }, {
    "label": "Actual",
    "processid": "20",
    "start": "23/6/2014",
    "end": "23/6/2014",
    "id": "20",
    "color": "#6baa01",
    "toppadding": "56%",
    "height": "32%"
    }, {
    "label": "Planned",
    "processid": "21",
    "start": "18/6/2014",
    "end": "21/6/2014",
    "id": "21-1",
    "color": "#008ee4",
    "height": "32%",
    "toppadding": "12%"
    }, {
    "label": "Actual",
    "processid": "21",
    "start": "18/6/2014",
    "end": "23/6/2014",
    "id": "21",
    "color": "#6baa01",
    "toppadding": "56%",
    "height": "32%"
    }, {
    "label": "Delay",
    "processid": "21",
    "start": "21/6/2014",
    "end": "23/6/2014",
    "id": "21-2",
    "color": "#e44a00",
    "toppadding": "56%",
    "height": "32%",
    "tooltext": "Delayed by 2 days."
    }, {
    "label": "Planned",
    "processid": "22",
    "start": "24/6/2014",
    "end": "28/6/2014",
    "id": "22-1",
    "color": "#008ee4",
    "height": "32%",
    "toppadding": "12%"
    }, {
    "label": "Actual",
    "processid": "22",
    "start": "25/6/2014",
    "end": "28/6/2014",
    "id": "22",
    "color": "#6baa01",
    "toppadding": "56%",
    "height": "32%"
    }]
};
//Define the connections between different tasks
const connectors = [{
    "connector": [{
    "fromtaskid": "1",
    "totaskid": "2",
    "color": "#008ee4",
    "thickness": "2",
    "fromtaskconnectstart_": "1"
    }, {
    "fromtaskid": "2-2",
    "totaskid": "3",
    "color": "#008ee4",
    "thickness": "2"
    }, {
    "fromtaskid": "3-2",
    "totaskid": "4",
    "color": "#008ee4",
    "thickness": "2"
    }, {
    "fromtaskid": "3-2",
    "totaskid": "6",
    "color": "#008ee4",
    "thickness": "2"
    }, {
    "fromtaskid": "7",
    "totaskid": "8",
    "color": "#008ee4",
    "thickness": "2"
    }, {
    "fromtaskid": "7",
    "totaskid": "9",
    "color": "#008ee4",
    "thickness": "2"
    }, {
    "fromtaskid": "12",
    "totaskid": "16",
    "color": "#008ee4",
    "thickness": "2"
    }, {
    "fromtaskid": "12",
    "totaskid": "17",
    "color": "#008ee4",
    "thickness": "2"
    }, {
    "fromtaskid": "17-2",
    "totaskid": "18",
    "color": "#008ee4",
    "thickness": "2"
    }, {
    "fromtaskid": "19",
    "totaskid": "22",
    "color": "#008ee4",
    "thickness": "2"
    }]
}];

Now to build the chart. Copy the codes for the module.ts, component.ts, and app.component.html files from below and paste them in the respective files:

component.ts
module.ts
app.component.html


// STEP 1- To import the dependencies
import { Component } from "@angular/core";

//STEP 2 - Define the various data objects for the Gantt Chart
const categories = [{
"bgcolor": "#999999",
"category": [{
"start": "1/4/2014",
"end": "30/6/2014",
"label": "Months",
"align": "middle",
"fontcolor": "#ffffff",
"fontsize": "12"
}]
}, {
"bgcolor": "#999999",
"align": "middle",
"fontcolor": "#ffffff",
"fontsize": "12",
"category": [{
"start": "1/4/2014",
"end": "30/4/2014",
"label": "April"
}, {
"start": "1/5/2014",
"end": "31/5/2014",
"label": "May"
}, {
"start": "1/6/2014",
"end": "30/6/2014",
"label": "June"
}]
}, {
"bgcolor": "#ffffff",
"fontcolor": "#333333",
"fontsize": "11",
"align": "center",
"category": [{
"start": "1/4/2014",
"end": "5/4/2014",
"label": "Week 1"
}, {
"start": "6/4/2014",
"end": "12/4/2014",
"label": "Week 2"
}, {
"start": "13/4/2014",
"end": "19/4/2014",
"label": "Week 3"
}, {
"start": "20/4/2014",
"end": "26/4/2014",
"label": "Week 4"
}, {
"start": "27/4/2014",
"end": "3/5/2014",
"label": "Week 5"
}, {
"start": "4/5/2014",
"end": "10/5/2014",
"label": "Week 6"
}, {
"start": "11/5/2014",
"end": "17/5/2014",
"label": "Week 7"
}, {
"start": "18/5/2014",
"end": "24/5/2014",
"label": "Week 8"
}, {
"start": "25/5/2014",
"end": "31/5/2014",
"label": "Week 9"
}, {
"start": "1/6/2014",
"end": "7/6/2014",
"label": "Week 10"
}, {
"start": "8/6/2014",
"end": "14/6/2014",
"label": "Week 11"
}, {
"start": "15/6/2014",
"end": "21/6/2014",
"label": "Week 12"
}, {
"start": "22/6/2014",
"end": "28/6/2014",
"label": "Week 13"
}]
}];
//List out the different processes of the Gantt chart
const processes = {
"headertext": "Task",
"fontcolor": "#000000",
"fontsize": "11",
"isanimated": "1",
"bgcolor": "#6baa01",
"headervalign": "bottom",
"headeralign": "left",
"headerbgcolor": "#999999",
"headerfontcolor": "#ffffff",
"headerfontsize": "12",
"align": "left",
"isbold": "1",
"bgalpha": "25",
"process": [{
"label": "Clear site",
"id": "1"
}, {
"label": "Excavate Foundation",
"id": "2",
"hoverBandColor": "#e44a00",
"hoverBandAlpha": "40"
}, {
"label": "Concrete Foundation",
"id": "3",
"hoverBandColor": "#e44a00",
"hoverBandAlpha": "40"
}, {
"label": "Footing to DPC",
"id": "4",
"hoverBandColor": "#e44a00",
"hoverBandAlpha": "40"
}, {
"label": "Drainage Services",
"id": "5",
"hoverBandColor": "#e44a00",
"hoverBandAlpha": "40"
}, {
"label": "Backfill",
"id": "6",
"hoverBandColor": "#e44a00",
"hoverBandAlpha": "40"
}, {
"label": "Ground Floor",
"id": "7"
}, {
"label": "Walls on First Floor",
"id": "8"
}, {
"label": "First Floor Carcass",
"id": "9",
"hoverBandColor": "#e44a00",
"hoverBandAlpha": "40"
}, {
"label": "First Floor Deck",
"id": "10",
"hoverBandColor": "#e44a00",
"hoverBandAlpha": "40"
}, {
"label": "Roof Structure",
"id": "11"
}, {
"label": "Roof Covering",
"id": "12"
}, {
"label": "Rainwater Gear",
"id": "13"
}, {
"label": "Windows",
"id": "14"
}, {
"label": "External Doors",
"id": "15"
}, {
"label": "Connect Electricity",
"id": "16"
}, {
"label": "Connect Water Supply",
"id": "17",
"hoverBandColor": "#e44a00",
"hoverBandAlpha": "40"
}, {
"label": "Install Air Conditioning",
"id": "18",
"hoverBandColor": "#e44a00",
"hoverBandAlpha": "40"
}, {
"label": "Interior Decoration",
"id": "19",
"hoverBandColor": "#e44a00",
"hoverBandAlpha": "40"
}, {
"label": "Fencing And signs",
"id": "20"
}, {
"label": "Exterior Decoration",
"id": "21",
"hoverBandColor": "#e44a00",
"hoverBandAlpha": "40"
}, {
"label": "Setup racks",
"id": "22"
}]
};

const datatable = {
"showprocessname": "1",
"namealign": "left",
"fontcolor": "#000000",
"fontsize": "10",
"valign": "right",
"align": "center",
"headervalign": "bottom",
"headeralign": "center",
"headerbgcolor": "#999999",
"headerfontcolor": "#ffffff",
"headerfontsize": "12",
"datacolumn": [{
"bgcolor": "#eeeeee",
"headertext": "Actual{br}Start{br}Date",
"text": [{
"label": "9/4/2014"
}, {
"label": "13/4/2014"
}, {
"label": "26/4/2014",
"bgcolor": "#e44a00",
"bgAlpha": "40",

    }, {
      "label": "4/5/2014",
      "bgcolor": "#e44a00",
      "bgAlpha": "40"
    }, {
      "label": "6/5/2014"
    }, {
      "label": "5/5/2014",
      "bgcolor": "#e44a00",
      "bgAlpha": "40"
    }, {
      "label": "11/5/2014"
    }, {
      "label": "16/5/2014"
    }, {
      "label": "16/5/2014"
    }, {
      "label": "21/5/2014",
      "bgcolor": "#e44a00",
      "bgAlpha": "40"
    }, {
      "label": "25/5/2014"
    }, {
      "label": "28/5/2014"
    }, {
      "label": "4/6/2014"
    }, {
      "label": "4/6/2014"
    }, {
      "label": "4/6/2014"
    }, {
      "label": "2/6/2014"
    }, {
      "label": "5/6/2014"
    }, {
      "label": "18/6/2014",
      "bgcolor": "#e44a00",
      "bgAlpha": "40"
    }, {
      "label": "16/6/2014",
      "bgcolor": "#e44a00",
      "bgAlpha": "40"
    }, {
      "label": "23/6/2014"
    }, {
      "label": "18/6/2014"
    }, {
      "label": "25/6/2014"
    }]

}, {
"bgcolor": "#eeeeee",
"headertext": "Actual{br}End{br}Date",
"text": [{
"label": "12/4/2014"
}, {
"label": "25/4/2014",
"bgcolor": "#e44a00",
"bgAlpha": "40"
}, {
"label": "4/5/2014",
"bgcolor": "#e44a00",
"bgAlpha": "40"
}, {
"label": "10/5/2014"
}, {
"label": "10/5/2014"
}, {
"label": "11/5/2014",
"bgcolor": "#e44a00",
"bgAlpha": "40"
}, {
"label": "14/5/2014"
}, {
"label": "19/5/2014"
}, {
"label": "21/5/2014",
"bgcolor": "#e44a00",
"bgAlpha": "40"
}, {
"label": "24/5/2014",
"bgcolor": "#e44a00",
"bgAlpha": "40"
}, {
"label": "27/5/2014"
}, {
"label": "1/6/2014"
}, {
"label": "6/6/2014"
}, {
"label": "4/6/2014"
}, {
"label": "4/6/2014"
}, {
"label": "7/6/2014"
}, {
"label": "17/6/2014",
"bgcolor": "#e44a00",
"bgAlpha": "40"
}, {
"label": "20/6/2014",
"bgcolor": "#e44a00",
"bgAlpha": "40"
}, {
"label": "23/6/2014"
}, {
"label": "23/6/2014"
}, {
"label": "23/6/2014",
"bgcolor": "#e44a00",
"bgAlpha": "40"
}, {
"label": "28/6/2014"
}]
}]
};
//Define different tasks of the process in a JSON object
const tasks = {
"task": [{
"label": "Planned",
"processid": "1",
"start": "9/4/2014",
"end": "12/4/2014",
"id": "1-1",
"color": "#008ee4",
"height": "32%",
"toppadding": "12%"
}, {
"label": "Actual",
"processid": "1",
"start": "9/4/2014",
"end": "12/4/2014",
"id": "1",
"color": "#6baa01",
"toppadding": "56%",
"height": "32%"
}, {
"label": "Planned",
"processid": "2",
"start": "13/4/2014",
"end": "23/4/2014",
"id": "2-1",
"color": "#008ee4",
"height": "32%",
"toppadding": "12%"
}, {
"label": "Actual",
"processid": "2",
"start": "13/4/2014",
"end": "25/4/2014",
"id": "2",
"color": "#6baa01",
"toppadding": "56%",
"height": "32%"
}, {
"label": "Delay",
"processid": "2",
"start": "23/4/2014",
"end": "25/4/2014",
"id": "2-2",
"color": "#e44a00",
"toppadding": "56%",
"height": "32%",
"tooltext": "Delayed by 2 days."
}, {
"label": "Planned",
"processid": "3",
"start": "23/4/2014",
"end": "30/4/2014",
"id": "3-1",
"color": "#008ee4",
"height": "32%",
"toppadding": "12%"
}, {
"label": "Actual",
"processid": "3",
"start": "26/4/2014",
"end": "4/5/2014",
"id": "3",
"color": "#6baa01",
"toppadding": "56%",
"height": "32%"
}, {
"label": "Delay",
"processid": "3",
"start": "3/5/2014",
"end": "4/5/2014",
"id": "3-2",
"color": "#e44a00",
"toppadding": "56%",
"height": "32%",
"tooltext": "Delayed by 1 days."
}, {
"label": "Planned",
"processid": "4",
"start": "3/5/2014",
"end": "10/5/2014",
"id": "4-1",
"color": "#008ee4",
"height": "32%",
"toppadding": "12%"
}, {
"label": "Actual",
"processid": "4",
"start": "4/5/2014",
"end": "10/5/2014",
"id": "4",
"color": "#6baa01",
"toppadding": "56%",
"height": "32%"
}, {
"label": "Planned",
"processid": "5",
"start": "6/5/2014",
"end": "11/5/2014",
"id": "5-1",
"color": "#008ee4",
"height": "32%",
"toppadding": "12%"
}, {
"label": "Actual",
"processid": "5",
"start": "6/5/2014",
"end": "10/5/2014",
"id": "5",
"color": "#6baa01",
"toppadding": "56%",
"height": "32%"
}, {
"label": "Planned",
"processid": "6",
"start": "4/5/2014",
"end": "7/5/2014",
"id": "6-1",
"color": "#008ee4",
"height": "32%",
"toppadding": "12%"
}, {
"label": "Actual",
"processid": "6",
"start": "5/5/2014",
"end": "11/5/2014",
"id": "6",
"color": "#6baa01",
"toppadding": "56%",
"height": "32%"
}, {
"label": "Delay",
"processid": "6",
"start": "7/5/2014",
"end": "11/5/2014",
"id": "6-2",
"color": "#e44a00",
"toppadding": "56%",
"height": "32%",
"tooltext": "Delayed by 4 days."
}, {
"label": "Planned",
"processid": "7",
"start": "11/5/2014",
"end": "14/5/2014",
"id": "7-1",
"color": "#008ee4",
"height": "32%",
"toppadding": "12%"
}, {
"label": "Actual",
"processid": "7",
"start": "11/5/2014",
"end": "14/5/2014",
"id": "7",
"color": "#6baa01",
"toppadding": "56%",
"height": "32%"
}, {
"label": "Planned",
"processid": "8",
"start": "16/5/2014",
"end": "19/5/2014",
"id": "8-1",
"color": "#008ee4",
"height": "32%",
"toppadding": "12%"
}, {
"label": "Actual",
"processid": "8",
"start": "16/5/2014",
"end": "19/5/2014",
"id": "8",
"color": "#6baa01",
"toppadding": "56%",
"height": "32%"
}, {
"label": "Planned",
"processid": "9",
"start": "16/5/2014",
"end": "18/5/2014",
"id": "9-1",
"color": "#008ee4",
"height": "32%",
"toppadding": "12%"
}, {
"label": "Actual",
"processid": "9",
"start": "16/5/2014",
"end": "21/5/2014",
"id": "9",
"color": "#6baa01",
"toppadding": "56%",
"height": "32%"
}, {
"label": "Delay",
"processid": "9",
"start": "18/5/2014",
"end": "21/5/2014",
"id": "9-2",
"color": "#e44a00",
"toppadding": "56%",
"height": "32%",
"tooltext": "Delayed by 3 days."
}, {
"label": "Planned",
"processid": "10",
"start": "20/5/2014",
"end": "23/5/2014",
"id": "10-1",
"color": "#008ee4",
"height": "32%",
"toppadding": "12%"
}, {
"label": "Actual",
"processid": "10",
"start": "21/5/2014",
"end": "24/5/2014",
"id": "10",
"color": "#6baa01",
"toppadding": "56%",
"height": "32%"
}, {
"label": "Delay",
"processid": "10",
"start": "23/5/2014",
"end": "24/5/2014",
"id": "10-2",
"color": "#e44a00",
"toppadding": "56%",
"height": "32%",
"tooltext": "Delayed by 1 days."
}, {
"label": "Planned",
"processid": "11",
"start": "25/5/2014",
"end": "27/5/2014",
"id": "11-1",
"color": "#008ee4",
"height": "32%",
"toppadding": "12%"
}, {
"label": "Actual",
"processid": "11",
"start": "25/5/2014",
"end": "27/5/2014",
"id": "11",
"color": "#6baa01",
"toppadding": "56%",
"height": "32%"
}, {
"label": "Planned",
"processid": "12",
"start": "28/5/2014",
"end": "1/6/2014",
"id": "12-1",
"color": "#008ee4",
"height": "32%",
"toppadding": "12%"
}, {
"label": "Actual",
"processid": "12",
"start": "28/5/2014",
"end": "1/6/2014",
"id": "12",
"color": "#6baa01",
"toppadding": "56%",
"height": "32%"
}, {
"label": "Planned",
"processid": "13",
"start": "4/6/2014",
"end": "6/6/2014",
"id": "13-1",
"color": "#008ee4",
"height": "32%",
"toppadding": "12%"
}, {
"label": "Actual",
"processid": "13",
"start": "4/6/2014",
"end": "6/6/2014",
"id": "13",
"color": "#6baa01",
"toppadding": "56%",
"height": "32%"
}, {
"label": "Planned",
"processid": "14",
"start": "4/6/2014",
"end": "4/6/2014",
"id": "14-1",
"color": "#008ee4",
"height": "32%",
"toppadding": "12%"
}, {
"label": "Actual",
"processid": "14",
"start": "4/6/2014",
"end": "4/6/2014",
"id": "14",
"color": "#6baa01",
"toppadding": "56%",
"height": "32%"
}, {
"label": "Planned",
"processid": "15",
"start": "4/6/2014",
"end": "4/6/2014",
"id": "15-1",
"color": "#008ee4",
"height": "32%",
"toppadding": "12%"
}, {
"label": "Actual",
"processid": "15",
"start": "4/6/2014",
"end": "4/6/2014",
"id": "15",
"color": "#6baa01",
"toppadding": "56%",
"height": "32%"
}, {
"label": "Planned",
"processid": "16",
"start": "2/6/2014",
"end": "7/6/2014",
"id": "16-1",
"color": "#008ee4",
"height": "32%",
"toppadding": "12%"
}, {
"label": "Actual",
"processid": "16",
"start": "2/6/2014",
"end": "7/6/2014",
"id": "16",
"color": "#6baa01",
"toppadding": "56%",
"height": "32%"
}, {
"label": "Planned",
"processid": "17",
"start": "5/6/2014",
"end": "10/6/2014",
"id": "17-1",
"color": "#008ee4",
"height": "32%",
"toppadding": "12%"
}, {
"label": "Actual",
"processid": "17",
"start": "5/6/2014",
"end": "17/6/2014",
"id": "17",
"color": "#6baa01",
"toppadding": "56%",
"height": "32%"
}, {
"label": "Delay",
"processid": "17",
"start": "10/6/2014",
"end": "17/6/2014",
"id": "17-2",
"color": "#e44a00",
"toppadding": "56%",
"height": "32%",
"tooltext": "Delayed by 7 days."
}, {
"label": "Planned",
"processid": "18",
"start": "10/6/2014",
"end": "12/6/2014",
"id": "18-1",
"color": "#008ee4",
"height": "32%",
"toppadding": "12%"
}, {
"label": "Delay",
"processid": "18",
"start": "18/6/2014",
"end": "20/6/2014",
"id": "18",
"color": "#e44a00",
"toppadding": "56%",
"height": "32%",
"tooltext": "Delayed by 8 days."
}, {
"label": "Planned",
"processid": "19",
"start": "15/6/2014",
"end": "23/6/2014",
"id": "19-1",
"color": "#008ee4",
"height": "32%",
"toppadding": "12%"
}, {
"label": "Actual",
"processid": "19",
"start": "16/6/2014",
"end": "23/6/2014",
"id": "19",
"color": "#6baa01",
"toppadding": "56%",
"height": "32%"
}, {
"label": "Planned",
"processid": "20",
"start": "23/6/2014",
"end": "23/6/2014",
"id": "20-1",
"color": "#008ee4",
"height": "32%",
"toppadding": "12%"
}, {
"label": "Actual",
"processid": "20",
"start": "23/6/2014",
"end": "23/6/2014",
"id": "20",
"color": "#6baa01",
"toppadding": "56%",
"height": "32%"
}, {
"label": "Planned",
"processid": "21",
"start": "18/6/2014",
"end": "21/6/2014",
"id": "21-1",
"color": "#008ee4",
"height": "32%",
"toppadding": "12%"
}, {
"label": "Actual",
"processid": "21",
"start": "18/6/2014",
"end": "23/6/2014",
"id": "21",
"color": "#6baa01",
"toppadding": "56%",
"height": "32%"
}, {
"label": "Delay",
"processid": "21",
"start": "21/6/2014",
"end": "23/6/2014",
"id": "21-2",
"color": "#e44a00",
"toppadding": "56%",
"height": "32%",
"tooltext": "Delayed by 2 days."
}, {
"label": "Planned",
"processid": "22",
"start": "24/6/2014",
"end": "28/6/2014",
"id": "22-1",
"color": "#008ee4",
"height": "32%",
"toppadding": "12%"
}, {
"label": "Actual",
"processid": "22",
"start": "25/6/2014",
"end": "28/6/2014",
"id": "22",
"color": "#6baa01",
"toppadding": "56%",
"height": "32%"
}]
};
//Structurize the connectors between different tasks of the Gantt chart
const connectors = [{
"connector": [{
"fromtaskid": "1",
"totaskid": "2",
"color": "#008ee4",
"thickness": "2",
"fromtaskconnectstart_": "1"
}, {
"fromtaskid": "2-2",
"totaskid": "3",
"color": "#008ee4",
"thickness": "2"
}, {
"fromtaskid": "3-2",
"totaskid": "4",
"color": "#008ee4",
"thickness": "2"
}, {
"fromtaskid": "3-2",
"totaskid": "6",
"color": "#008ee4",
"thickness": "2"
}, {
"fromtaskid": "7",
"totaskid": "8",
"color": "#008ee4",
"thickness": "2"
}, {
"fromtaskid": "7",
"totaskid": "9",
"color": "#008ee4",
"thickness": "2"
}, {
"fromtaskid": "12",
"totaskid": "16",
"color": "#008ee4",
"thickness": "2"
}, {
"fromtaskid": "12",
"totaskid": "17",
"color": "#008ee4",
"thickness": "2"
}, {
"fromtaskid": "17-2",
"totaskid": "18",
"color": "#008ee4",
"thickness": "2"
}, {
"fromtaskid": "19",
"totaskid": "22",
"color": "#008ee4",
"thickness": "2"
}]
}];

@Component({
selector: "app-root",
templateUrl: "./app.component.html"

})

export class AppComponent {
dataSource: Object;
constructor() {
this.dataSource = {
"chart": {
"theme": "fusion",
"caption": "New Store Opening - Project Plan",
"subcaption": "Planned vs Actual",
"dateformat": "dd/mm/yyyy",
"outputdateformat": "ddds mns yy",
"ganttwidthpercent": "60",
"ganttPaneDuration": "40",
"ganttPaneDurationUnit": "d",
"plottooltext": "$processName{br}$label starting date $start{br}$label ending date \$end",
"legendBorderAlpha": "0",
"legendShadow": "0",
"usePlotGradientColor": "0",
"showCanvasBorder": "0",
"flatScrollBars": "1",
"gridbordercolor": "#333333",
"gridborderalpha": "20",
"slackFillColor": "#e44a00",
"taskBarFillMix": "light+0"
},
"categories": categories,
"processes": processes,
"datatable": datatable,
"tasks": tasks,
"connectors": connectors,
"milestones": {
"milestone": [{
"date": "2/6/2014",
"taskid": "12",
"color": "#f8bd19",
"shape": "star",
"tooltext": "Completion of Phase 1"
}
]
},
"legend": {
"item": [{
"label": "Planned",
"color": "#008ee4"
}, {
"label": "Actual",
"color": "#6baa01"
}, {
"label": "Slack (Delay)",
"color": "#e44a00"
}]
}

    }; // end of this.dataSource

} // end of constructor
} // end of class AppComponent


import { BrowserModule } from '@angular/platform-browser';
import { NgModule } from '@angular/core';

import { AppComponent } from './app.component';
import { FusionChartsModule } from 'angular-fusioncharts';

// Import FusionCharts library and chart modules
import  as FusionCharts from 'fusioncharts';
import  as charts from 'fusioncharts/fusioncharts.charts';
import  as Gantt from "fusioncharts/fusioncharts.gantt";
import  as FusionTheme from 'fusioncharts/themes/fusioncharts.theme.fusion';

// Pass the fusioncharts library and chart modules
FusionChartsModule.fcRoot(FusionCharts, charts, FusionTheme, Gantt);

@NgModule({
  declarations: [AppComponent],
  imports: [BrowserModule,FusionChartsModule],
  providers: [],
  bootstrap: [AppComponent]
})
export class AppModule {}


<h1>
  {{title}}
</h1>
<fusioncharts
  width="700"
  height="400"
  type="gantt"
  [dataSource]="dataSource"
>
</fusioncharts>

Know more about Gantt Chart and its configurations here. You can also create various charts belonging to the PowerCharts family in a similar way. Check out the different types of PowerCharts here.

Products

Developer

Important Links

Rendering Different Charts

Multi-series Charts

Combination Charts

Real-time Charts

Gauges

Maps

Render other Maps

Heat Map

Gantt Chart