How to use AngularJS directives with HighchartsJS

1120

Here is the Example of AngularJS directive with HighchartsJS, The main advantage of using AngularJS directive with Highcharts.js is reusability. One can reuse its already created directive as many times as we someone want. For Example, in the below codepen.io example, you just need to copy paste following code snippet as many times as you need and you can get totally new Chart.

In above code snippet  chart-data="sampleData"  we are injecting scope variable ‘sampleData’, which is further got injected into ‘chart’ directive. Here, you can insert your data. Data can be from any source like $http request or JSON file or static variable like above in this example. Additionally, “title” and “description” are which are got injected into ‘chart ‘ directive.

If you are new to AngularJS Directives and Highcharts.js or you want any kind of development information to go through the detailed description below the codepen example.

See the Pen zrddOx by Hemant soni (@hemant80555) on CodePen.

Detailed Description

Lets step by step discuss the process of whole development. But, before we start the discussion let me tell you, I have 4 dependencies in setting section 1 css file for bootstrap css and 4 javascript file for jQuery, Bootstrap, Angular and Highcharts respectively.

Adding external css via CDN
Adding external css via CDN
Adding external javascript libraries via CDN
Adding external javascript libraries via CDN

You can also add them via script tag in HTML section.

Step1

First of all, we have to create the module for the application. Because AngularJS application starts from module name.  var App = angular.module('myapp', []); Now in variable App we have our module. Let us initiate this module by adding this into HTML section.

The Angular application is started from this  ng-app  directive. This is a predefined directive and it will auto-bootstrap an AngularJS application. This directive designates the root element of the application.

Step2

Now we need a controller which contains business logic behind the application to decorate the scope with functions and values. For which angular provides another directive  ng-controller. In the previously created module let’s add ‘myctrl’ named controller and also adding it to the HTML section under the module div.

Step3

Inside ‘myctrl’  adding a variable in scope with some chart data.  $scope.sampleData  Remember this data is specific to pie chart only with ‘name’ and ‘y’ (%tage on chart). We will further be going to insert this value in our chart directive.

Step4

Now in the same module variable ‘App‘ we have to add some default settings for our pie chart as Angular Value recipe to inject the value to the directive. More information about this setting is available at Highcharts documentation.

Step5

Now let’s create the chart directive and add it to ‘myapp’ module. Additionally, inject our previously created chart default data value recipe.

Whatever we are going to write inside in above directive, we have to return in order to attach in back to application’s scope. So, at the root level, we should write return statement.

Inside this return keyword we have to set basic features of a directive by setting those variable   restrict:template:, scope:, replace: and  link: function(scope, element, attrs)  .

Set  restrict: attribute:

This attribute can have 4 type of values E, A, C, M. This value will decide the way of invocation directive. In out highcharts example we are going to use ‘E’ (element) invocation.

E = element

A = attribute

C = class

M = comment

Here,  custom-directive is the name of the directive.

Set  template: attribute:

There are 2 ways by which we can define a template in our directive Static and Dynamic. The static template accepts a string as value can be defined using ‘template’ on the other hand Dynamic template accepts physical path of the ‘.html’ file and can be defined using ‘templateUrl’. 

In our code, we are going to use ‘template‘ keyword with string value.

Set  scope: attribute:

By default AngularJS directives have access to parent scope, but Angular allows developers to create an isolated scope with some custom bindings to the parent scope. These binding are determined by the definition of the scope  property in the directive definition object. AngularJS directive supports 3 type of Binding.

  1. Text Binding (Prefix: @)
  2. One-way Binding (Prefix: &)
  3. Two-way Binding (Prefix: =)

For Example, in our  HTML code, we are defining chart directive with 3 scope properties.

And in the  scope object, we are defining the binding type for the same.

Here,  chartData will be bind with two-way data binding.   sampleData model variable will bind with  chartData scope variable of the directive. Moreover,  title and  description are binds with only Text Binding.

Set  replace: attribute:

When you have replace: true  you get the following piece of DOM:

Whereas with replace: false  you get this:

In our example, we are going to use  replace: true.

Set  link: function(scope, element, attrs): attribute:

In order to perform Dom Manipulation, we have to use the link  option to register DOM listeners as well as update the DOM. It is executed after the template has been cloned and is where directive logic will be put.

link takes a function with the following signature, function link(scope, element, attrs, controller, transcludeFn) { ... } , where:

  • scope  is an Angular scope object.
  • element is the jqLite-wrapped element that this directive matches.
  • attrs  is a hash object with key-value pairs of normalized attribute names and their corresponding attribute values.
  • controller  is the directive’s required controller instance(s) or its own controller (if any). The exact value depends on the directive’s require property.
  • transcludeFn  is a transclude linking function pre-bound to the correct transclusion scope.

In our case we are going to use scope, element and attrs variables and perform DOM manipulation as follows

This is all about AngularJS Directive with Highcharts.js.If you find the information in this post useful, be sure to share it with your fellow bloggers and friends via Facebook, Twitter, Google Plus or any of your social media forums. Moreover, if you any question/suggestion please comment below.