Ionic Angular

FusionCharts is a JavaScript charting library that allows you to create interactive charts, gauges, maps, and dashboards in JavaScript. Ionic is an open source framework used for developing mobile applications. It provides tools and services for building Mobile UI with a native look and feel. Ionic framework needs native wrapper to be able to run on mobile devices. We have built a simple and lightweight Angular component, which provides bindings for FusionCharts in Ionic Framework. The angular-fusioncharts component allows you to easily add rich and interactive charts to any Ionic Framework Project.

On this page, we'll see how to install FusionCharts and render a chart using the angular-fusioncharts component in Ionic Framework.

Prerequisite

You need to have Ionic installed before proceeding any further. If not, you can follow the steps below.

Ionic requires both Node.js and NPM to be installed in your machine. You can check it by running the following commands in the terminal:

node -v
npm -vCOPY

To get Node.js (if not installed), you can go to the official website and get it. Enter the following command to install ionic.

$ npm install -g ionicCOPY

Now that Ionic is installed, let's set up an Ionic project. Follow the steps mentioned below:

$ ionic start myApp tabs --type angular
$ cd myAppCOPY

Start the development server by the entering the following command:

$ ionic serveCOPY

Now, open http://localhost:8100 to see your Ionic app.

Installing and Including Dependencies

Install angular-fusioncharts and fusioncharts modules by the following command:

$ npm install fusioncharts angular-fusionchartsCOPY

After the installation, enter the following command to create an angular component to use fusioncharts. It will create a new folder named as chart inside MyApp directory.

$ ionic generate component chartCOPY

Create a new file called **chart.module.ts in the chart folder and add the consolidated code shown below to this file. Import all the required dependencies in @NgModule to get started.

// chart.module.ts
import { NgModule } from "@angular/core";
// Import angular-fusioncharts
import { FusionChartsModule } from "angular-fusioncharts";
// Import FusionCharts library
import * as FusionCharts from "fusioncharts";

// Load FusionCharts Individual Charts
import * as Charts from "fusioncharts/fusioncharts.charts";
import * as FusionTheme from "fusioncharts/themes/fusioncharts.theme.fusion";
import { ChartComponent } from "./chart.component";

FusionChartsModule.fcRoot(FusionCharts, Charts, FusionTheme);

@NgModule({
  declarations: [ChartComponent],
  imports: [
    FusionChartsModule // Include in imports
  ],
  exports: [ChartComponent]
})
export class ChartModule {}COPY

Open the tab1.module.ts file present inside the tab1 folder and add the following code to it. The tab module will now import **ChartModule**.

// tab1.module.ts
import { IonicModule } from "@ionic/angular";
import { RouterModule } from "@angular/router";
import { NgModule } from "@angular/core";
import { CommonModule } from "@angular/common";
import { FormsModule } from "@angular/forms";
import { Tab1Page } from "./tab1.page";
import { ChartModule } from "../chart/chart.module";

@NgModule({
  imports: [
    IonicModule,
    CommonModule,
    FormsModule,
    ChartModule,
    RouterModule.forChild([{ path: "", component: Tab1Page }])
  ],
  declarations: [Tab1Page]
})
export class Tab1PageModule {}COPY

Preparing the Data

Let's create a chart showing the "Countries With Most Oil Reserves". The data of the oil reserves present in various countries is shown in tabular form below.

Since we are plotting a single dataset, let us create a column 2D chart with countries as data labels along X-axis and No. of oil reserves as data values along Y-axis. Let us prepare the data for a single-series chart.

FusionCharts accepts the data in JSON format. So the above data in the tabular form will take the structure given below:

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

Configure Your Chart

Now that the data is ready, let's work on the styling, positioning and giving your chart a context. Now, we add the chart attributes in the chart.component.ts file.

const chartConfigs = {
  caption: "Countries With Most Oil Reserves [2017-18]", //caption of the chart
  subCaption: "In MMbbl = One Million barrels", //sub-caption of the chart
  xAxisName: "Country", //x-axis name of the chart
  yAxisName: "Reserves (MMbbl)", //y-axis name of the chart
  numberSuffix: "K",
  theme: "fusion" //applying a theme for the chart
};COPY

Define the height, width, type attributes of the chart using the fusioncharts component in chart.component.html file. Refer to the code given below.

<p>
  chart works!
</p>
<fusioncharts
  width="600"
  height="350"
  type="Column2D"
  dataFormat="JSON"
  [dataSource]="dataSource"
></fusioncharts>COPY

The type attribute in the chartConfigs object signifies the type of chart being rendered. Have a look at different chart types with their aliases here.

Render Your Chart

Now, get ready to render your first chart by following the steps below:

The chartData and the chartConfigs objects created above will now go into the chart.component.ts file. Its consolidated code is shown below:

// chart.component.ts
import { Component, OnInit } from "@angular/core";

@Component({
  selector: "chart-container",
  templateUrl: "chart.component.html",
  styleUrls: ["chart.component.scss"]
})
export class ChartComponent implements OnInit {
  dataSource: object;
  constructor() {
    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" }
    ];
    const chartConfigs = {
      caption: "Countries With Most Oil Reserves [2017-18]",
      subCaption: "In MMbbl = One Million barrels",
      xAxisName: "Country",
      yAxisName: "Reserves (MMbbl)",
      numberSuffix: "K",
      theme: "fusion"
    };
    this.dataSource = {
      chart: chartConfigs,
      data: chartData
    };
  }
  ngOnInit() {}
}COPY

Define the chart-container component in the tab1.page.html file present in the tab1 folder. Refer to the code below:

<ion-header>
  <ion-toolbar>
    <ion-title>
      Tab One
    </ion-title>
  </ion-toolbar>
</ion-header>
<ion-content>
  <chart-container></chart-container>
</ion-content>COPY

See Your Chart

With all the code in place and the development server running, open http://localhost:8100 and you'll be able to see the chart, as shown below.

If you are getting a JavaScript error on your page, check your browser console for the exact error and fix it accordingly. If you're unable to solve it, click here to get in touch with our support team.

That's it! Your first chart using angular-fusioncharts in Ionic Framework is ready