Mr Branding: Building a Chart Component with Angular 2 and FusionCharts

Tuesday, June 14, 2016

Building a Chart Component with Angular 2 and FusionCharts

As a web developer, if there is something that you can't miss, it is Angular 2. It is a complete rewrite of the popular JavaScript framework from Google and is constantly in news for all the right reasons. It offers some major improvements over the previous versions and that's why we're choosing it today to build some beautiful charts.

For the charts, we will use the JavaScript chart library provided by FusionCharts. It offers a good collection of charts and is compatible with all major browsers. Although FusionCharts offers a dedicated plugin for Angular, it is not yet compatible with Angular 2. So I am not going to use it and instead code directly using JavaScript and Angular 2. (Note: it is recommended you use the plugin if you are using Angular 1 in your app).

The chart we are going to plot will depict an interesting statistic—the revenue of five top tech companies (Amazon, Apple, Facebook, Google and Microsoft) and will have an option to switch between revenue data for 2014 and 2015. We will first go through the step-by-step process of creating charts in Angular 2. After building a basic chart, we will cover some advanced topics such as adding annotations and updating chart data.

As ever, you can download the code for this tutorial from our GitHub repo, or you can jump to a demo of the finished chart at the end of the article.

Angular 2 vs Angular 1.x

Angular 2 has some significant changes over its previous major version (Angular 1.x), for example its support for languages such as TypeScript and Dart, and the way it computes updates to the DOM. If you'd like to learn more about how Angular 1 concepts and techniques map to Angular 2, you can check out the official quick reference. If you are interested in migrating your app from Angular 1.x to Angular 2, you can read the official migration guide.

Although Angular 2 supports TypeScript and Dart, we will use native JavaScript to write the Angular 2 application in this tutorial because of its familiarity. Using TypeScript or Dart would also introduce an unnecessary build step.

Setup

There are number of ways to get up and running with an Angular 2 project. The easiest is probably to head over to the official site and follow their 5 Min Quickstart tutorial.

One slight caveat to this approach however, is that it relies on you having Node and npm installed on your machine. We do have a guide for this, but if you'd prefer to follow this tutorial without installing these, you can use the following template:

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8">
    <title>Angular 2 FusionCharts Demo</title>

    <!-- 1. Load custom CSS & fonts-->
    <link rel="stylesheet" href="styles.css">
    <link href='http://ift.tt/1RrSx5U' rel='stylesheet'>

    <!-- 2. Load Angular 2 specific libraries -->
    <script src="http://ift.tt/1ZOYKgC"></script>
    <script src="http://ift.tt/1Q245Rj"></script>
    <script src="http://ift.tt/1ZOZ2UC"></script>

    <!-- 3. Load FusionCharts library-->
    <script src="http://ift.tt/1Q24fYR"></script>

    <!-- 4. Load component -->
    <script src='main.js'></script>
  </head>
  <body>

    <!-- 5. Display the application -->
    <angular-chart>Loading...</angular-chart>
  </body>
</html>

Creating the Chart Component

Components are the building blocks of any Angular 2 application. They are reusable pieces of code consisting of a view, and some logic. If you're familiar with Angular 1, you can think of them as directives with a template and a controller.

Here's the basis of our chart component:

(function(chartApp){
  chartApp.AppComponent = ng.core.Component({
    selector: 'angular-chart',
    template: '<div>Chart will render here</div>'
  }).Class({
    constructor: function(){}
  });

  document.addEventListener('DOMContentLoaded', function() {
    ng.platform.browser.bootstrap(chartApp.AppComponent);
  });
})(window.chartApp || (window.chartApp = {}));

Let's take a second to see what's going on.

We start with an IIFE (immediately invoked function expression) which we use to namespace our app. We pass it window.chartApp as an argument, which is initialized to an empty object if it isn't defined. This is where our application is going to live—in a single property on the global object.

Inside the IIFE we create our component (AppComponent) by chaining the Component and Class methods from ng.core (a collection of Angular's core components). We're passing the Component method a configuration object containing the following propeties:

selector: a simple CSS selector which specifies a host HTML element. Angular will create and display an instance of the component whenever it encounters a HTML element matching this selector.
template: the template to be used when the component is rendered. Currently we're passing a string containing a placeholder <div> element, but ideally we should move this out into its own template.

The Class method is where we add behavior and event bindings for the template.

Having defined our basic component, we initialize it using Angular's browser bootstrap function.

You should be able to run the code in your browser at this point and see the message "Chart will render here".

Creating the Chart

Let's move on to creating the chart and displaying some data for 2014.

Continue reading %Building a Chart Component with Angular 2 and FusionCharts%

by Rohit Boggarapu via SitePoint

Mr Branding