Table of Contents
What Are the Benefits of Angular?
How Can I Create A Graph in Angular Using FusionCharts?
angular-fusioncharts
component, adding interactive and rich charts to any Angular project is simple.
Step 1 – What are Some Prerequisites Needed to Create A Chart?
Before starting your projects, you need to have an Angular project set up. Angular requires you to install two components:Node.js
NPM
Step 2 – How Do I Set Up My Project?
Next, you will have to install theangular-fusioncharts
and fusioncharts
modules by the following command:
npm install fusioncharts angular-fusioncharts --save
Next, replace the code in the src/app/app.module.ts file with the code shown below to create your first chart. First, import all the dependencies required in @NgModule:
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 {}
Step 3 – How Do I Configure My Chart And Render My Chart?
Before configuring your chart, you need to define your data. FusionCharts accepts the data in JSON format so that the data would take a form like:const chartData = [
{
label: “Some Label”,
value: "Value"
}
];
Once you’ve defined your data, you can start configuring your chart:
// Chart Configuration
const dataSource = {
chart: {
caption: "Countries With Most Oil Reserves [2017-18]", //Set the chart caption
subCaption: "In MMbbl = One Million barrels", //Set the chart subcaption
xAxisName: "Country", //Set the x-axis name
yAxisName: "Reserves (MMbbl)", //Set the y-axis name
numberSuffix: "K",
theme: "fusion" //Set the theme for your chart
},
// Chart Data - from step 2
data: chartData
};
To render your chart, you have to specify the chart data within the AppComponent class in the src/app/app.component.ts file in your root project folder:
import { Component } from "@angular/core";
@Component({
selector: "app-root",
templateUrl: "./app.component.html"
})
export class AppComponent {
dataSource: Object;
constructor() {
//STEP 2 - Chart Data
const chartData = [
{
label: "Venezuela",
value: "290"
},
{
label: "Saudi",
value: "260"
},
{
label: "Canada",
value: "180"
},
{
label: "Iran",
value: "140"
},
{
label: "Russia",
value: "115"
},
{
label: "UAE",
value: "100"
},
{
label: "US",
value: "30"
},
{
label: "China",
value: "30"
}
];
// STEP 3 - Chart Configuration
const dataSource = {
chart: {
//Set the chart caption
caption: "Countries With Most Oil Reserves [2017-18]",
//Set the chart subcaption
subCaption: "In MMbbl = One Million barrels",
//Set the x-axis name
xAxisName: "Country",
//Set the y-axis name
yAxisName: "Reserves (MMbbl)",
numberSuffix: "K",
//Set the theme for your chart
theme: "fusion"
},
// Chart Data - from step 2
data: chartData
};
this.dataSource = dataSource;
}
}
Next, you can use the FusionCharts component to create the chart container in app.component.html and set the width, height, and type attributes as shown.
<h1>
{{title}}
</h1>
<fusioncharts
width="700"
height="400"
type="Column2d"
[dataSource]="dataSource"
>
</fusioncharts>ll
Now, you can view your chart:
Is There an Easier Way to Create Angular Graphs?
- First, install the Node.js, NPM/Yarn globally in your machine
- Then, install AngularCLI globally on your machine
- Finally, install the FusionGrid and Angular components in your project
angular-fusiongrid
” and “FusionGrid
.” Shown below is an example:
import { Component } from "@angular/core";
const data = chartData; // From the Previous Example
chart: {
caption: "Countries With Most Oil Reserves [2017-18]",
subcaption: "In MMbbl = One Million barrels",
xaxisname: "Country",
yaxisname: "Reserves (MMbbl)",
numbersuffix: "K",
theme: "fusion"
},
data:
@Component({
selector: "app-root",
template: "./app.component.html" /* see HTML tab */
})
export class AppComponent {
width = 600;
height = 400;
type = "column2d";
dataFormat = "json";
dataSource = data;
}
You should now be able to see your chart: