Over a million developers have joined DZone.
{{announcement.body}}
{{announcement.title}}

Create Stunning Charts With Angular 2

DZone's Guide to

Create Stunning Charts With Angular 2

When Angular's architecture was redesigned, it was made much more modular — making it an awesome library for data visualization.

· Big Data Zone ·
Free Resource

Hortonworks Sandbox for HDP and HDF is your chance to get started on learning, developing, testing and trying out new features. Each download comes preconfigured with interactive tutorials, sample data and developments from the Apache community.

AngularJS (version 1.x), when launched by Google a few years back, was a compelling JavaScript library. However, the library faced an unexpected developer attrition when Facebook launched the ReactJS library. To prevent it from becoming obsolete, the complete architecture was reworked. The framework was converted from a model-view-whatever architecture to a component-based architecture. To mark the redesign of the architecture, the framework was called Angular (for version 2 and above).

As part of its architecture redesign, Angular was made modular. This feature allows you to install individual modules, thereby also allowing you to skip unnecessary modules. However, Angular insists on using TypeScript as a way to ensure type safety in the app.

When developing an Angular application, you can divide your app into multiple components, with nested or child components. Each Angular component is broken into three major parts:

  1. Main file: Contains the business logic of the app

  2. Index file: Contains the user interface of the app

  3. App file: Contains the core app configurations

We will use one such component to create a chart using the FusionCharts JavaScript charting library. FusionCharts offers a ready-to-use Angular plugin, which allows developers to integrate the charting library with Angular. Eliminating the need to create the component from scratch.

Without further ado, let’s get down to the steps for creating the chart:

  1. Prepare the data

  2. Install FusionCharts-Angular2 plugin

  3. Create a chart component

  4. Render the chart

Step 1: Prepare the Data

FusionCharts currently accepts data in JSON and XML. As such, we need to convert data into a format accepted by the library. For this example, we will use JSON.

We’ll use the following data that shows expenses incurred by different functions:

Quarter

Marketing

Management

Operations

Q1

121000

190000

225000

Q2

135000

195000

260000

Q3

123500

187000

245000

Q4

145000

190000

250000


Since we are visualizing a part-to-whole data set, we will use a stacked column chart.

Step 2: Install FusionCharts-Angular2 Plugin

To get started, you need to install the FusionCharts-Angular2 Component using npm.

$ npm install angular2-fusioncharts --save

You then need to import the angular2-fusioncharts extension in the root @NgModule.

module.ts: 

import { NgModule } from '@angular/core';
import { BrowserModule } from '@angular/platform-browser';
// Import the library
import { FusionChartsModule } from 'angular2-fusioncharts';
import { AppComponent } from './app.component';

// Import angular2-fusioncharts
import { FusionChartsModule } from 'angular2-fusioncharts';

// Import FusionCharts library
import * as FusionCharts from 'fusioncharts';
// Import FusionCharts Charts module
import * as Charts from 'fusioncharts/fusioncharts.charts';

@NgModule({
  declarations: [
    AppComponent
  ],
  imports: [
    BrowserModule, 
    // Specify FusionChartsModule as an import 
    // and pass FusionCharts and Charts as a dependency
    // You can pass all other FusionCharts modules such as Charts, PowerCharts
    // Maps, Widgets e.t.c. after FusionCharts
    FusionChartsModule.forRoot(FusionCharts, Charts)
  ],
  bootstrap: [AppComponent]
})
export class AppModule { }

Step 3: Create a Chart Component

Now, we need to create the chart component.

app.ts:

//our root app component
import {Component, NgModule} from '@angular/core'
import {BrowserModule} from '@angular/platform-browser'

@Component({
  selector: 'my-app',
  template: `<fusioncharts
    width="100%" 
    height="450"
    type="stackedcolumn2d"
    dataFormat="json"
    [dataSource]=dataSource >
  </fusioncharts>
  `,
})
export class App {
  demoId: string;
  constructor() {
    this.demoId = "ex1";

    this.dataSource = {
      chart: {
        "caption": "Quarterly Expenditure",
        "xAxisname": "Quarter",
        "yAxisName": "Expenditure (In USD)",
        "numberPrefix": "$",
        "baseFont": "Roboto",
        "baseFontSize": "14",
        "labelFontSize": "15",
        "captionFontSize": "20",
        "subCaptionFontSize": "16",
        "paletteColors": "#2c7fb2,#6cc184,#fed466",
        "bgColor": "#ffffff",
        "legendShadow": "0",
        "valueFontColor": "#ffffff",
        "showXAxisLine": "1",
        "xAxisLineColor": "#999999",
        "divlineColor": "#999999",
        "divLineIsDashed": "1",
        "showAlternateHGridColor": "0",
        "subcaptionFontBold": "0",
        "subcaptionFontSize": "14",
        "showHoverEffect": "1"
      },
      "categories": [{
        "category": [{
          "label": "Q1"
        }, {
          "label": "Q2"
        }, {
          "label": "Q3"
        }, {
          "label": "Q4"
        }]
      }],
      "dataset": [{
        "seriesname": "Marketing",
        "data": [{
          "value": "121000"
        }, {
          "value": "135000"
        }, {
          "value": "123500"
        }, {
          "value": "145000"
        }]
      }, {
        "seriesname": "Management",
        "data": [{
          "value": "190000"
        }, {
          "value": "195000"
        }, {
          "value": "187000"
        }, {
          "value": "190000"
        }]
      }, {
        "seriesname": "Operations",
        "data": [{
          "value": "225000"
        }, {
          "value": "260000"
        }, {
          "value": "245000"
        }, {
          "value": "250000"
        }]
      }]
    };
  }
}

The component adds the <fusioncharts> directive in the Angular app. The detailed chart configurations along with the data in JSON format is added to the component.

Know more about this chart here.

Step 4: Render the Chart

index.html:

<html>
<head>
  <base href="." />
  <title>Angular2 playground - FusionCharts</title>
  <link rel="stylesheet" href="style.css" />
  <script src="https://unpkg.com/core-js@2.4.1/client/shim.min.js"></script>
  <script src="https://unpkg.com/zone.js/dist/zone.js"></script>
  <script src="https://unpkg.com/zone.js/dist/long-stack-trace-zone.js"></script>
  <script src="https://unpkg.com/reflect-metadata@0.1.3/Reflect.js"></script>
  <script src="https://unpkg.com/systemjs@0.19.31/dist/system.js"></script>
  <script src="config.js"></script>
  <link href="https://fonts.googleapis.com/css?family=Roboto" rel="stylesheet">
  <script>
    System.import('app')
      .catch(console.error.bind(console));
  </script>
</head>

<body>
  <my-app>
    <h1>Creating your Chart in Angular using <i>FusionCharts</i>!</h1>
  </my-app>
</body>
</html>

We now make a call to the my-app component that we created in Angular.

main.ts:

//main entry point
import {platformBrowserDynamic} from '@angular/platform-browser-dynamic';
import {AppModule} from './module';

platformBrowserDynamic().bootstrapModule(AppModule)

When the <my-app> component is referenced, the AppModule function would get triggered. This would then import the FusionChartsModule, thereby rendering the chart using the chart component that we created.

If you have been following along, your chart should look similar to the image shown below:

Image title

Alternatively, you can experiment with our codebase on Plunker.

Got questions? Leave a comment or feel free to say hi on Twitter!

Hortonworks Community Connection (HCC) is an online collaboration destination for developers, DevOps, customers and partners to get answers to questions, collaborate on technical articles and share code examples from GitHub.  Join the discussion.

Topics:
angular 2 ,data visualization ,javascript ,big data ,tutorial

Published at DZone with permission of

Opinions expressed by DZone contributors are their own.

{{ parent.title || parent.header.title}}

{{ parent.tldr }}

{{ parent.urlSource.name }}