Best Libraries to Work with Charts in AngularJS

More and more business applications are implemented as web applications in AngularJS, a structural framework provided by Google, i.e. to be location and device independent. A typical requirement for business applications is graphically displaying values, e.g. financial or statistical data in different types of charts.

Bar chart, pie charts and other charts which are known from spreadsheet analysis are often used. The usability of the charts is very important. The charts must provide a good overview of the data and interaction within the chart (like zoom or drill down).

Graphical display of numeric values (e.g. financial or statistical data)

Graphical display of numeric values (e.g. financial or statistical data)

 

Chart libraries for JavaScript

D3.js

A commonly used library to generate JavaScript based charts is d3.js (Data driven documents). d3.js provides JavaScript functions to modify the HTML element tree and add attributes, styles and elements. To generate a bar chart like in the next figure, twelve rectangles are generated in an SVG tag. d3.js is used to modify the SVG tag and add simple geometric shapes which look like a bar chart. The following code snippet is used:

Simple bar chart generated with d3js

Simple bar chart generated with d3js

var chartdata = [40, 60, 80, 100, 70, 120, 100, 60, 70, 150, 120, 140];
var height = 200,
    width = 720,
    barWidth = 40,
    barOffset = 20;

var yScale = d3.scale.linear()
    .domain([0,d3.max(chartdata)])
    .range([0,height])

d3.select('#bar-chart').append('svg')
    .attr('width',width)
    .attr('height',height)
    .style('background','#dff0d8')
    .selectAll('rect').data(chartdata)
    .enter().append('rect')
    .style({'fill':
        '#3c763d', 'stroke':
        '#d6e9c6', 'stroke-width':'5'})
     .attr('width',barWidth)
     .attr('height',function(data){
          return yScale(data);})
      .attr('x',function(data,i) {
          return i * (barWidth + barOffset);})
      .attr('y',function(data){
          return height - yScale(data);});

 

NVD3

NVD3 is a specific library to generate charts in JavaScript. It extends d3.js and provides fully implemented charts with features like x- and y-axes, tooltips and further interactions. A lot of chart types are available in the library such as line charts, bullet charts, pie charts, bar charts etc. The charts are customizable. The following code generates this line chart by using data from a separate JSON file:

Line Chart Generated with NVD3

Line Chart Generated with NVD3

 

d3.json('cumulativeLineData.json', function(data) {
  nv.addGraph(function() {
    var chart = nv.models.cumulativeLineChart()
            .x(function(d) { return d[0] })
            //adjusting, 100% is 1.00, not 100 as it is in the data
            .y(function(d) { return d[1]/100 }) 
            .color(d3.scale.category10().range())
            .useInteractiveGuideline(true);

     chart.xAxis
        .tickValues([1078030800000,1122782400000,1167541200000,1251691200000])
        .tickFormat(function(d) {
            return d3.time.format('%x')(new Date(d))
          });

    chart.yAxis
        .tickFormat(d3.format(',.1%'));

    d3.select('#chart svg')
        .datum(data)
        .call(chart);

    nv.utils.windowResize(chart.update);

    return chart;
  });
});

As you can see, NVD3 uses the d3.select() method to add the chart to a given SVG tag in the HTML element tree. The code style is the same as d3js uses: recursive method calls. NVD3 provides specific method calls in addition to the basic d3.js calls to target-oriented build charts.

Chart libraries for AngularJS

As d3.js and NVD3 are plain JavaScript libraries, they can be used with any JavaScript dialect. The following two libraries are AngularJS-specific.

AngularJS-nvd3-directive

This library is an AngularJS-specific GitHub project based on NVD3. It is open source and provides fully implemented directives based on NVD3 charts. Eleven different charts are available, configuration and event handling is easily possible. Every chart type has its own chart-directive, which is called in the HTML file. It refers to the data which is defined in an AngularJS-Controller (JavaScript file which handles data, events and other code, see https://docs.angularjs.org/guide/controller for details). The fully functional bullet chart below can be generated by the following code:

Bullet chart generated with AngularJS-nvd3-directive

Bullet chart generated with AngularJS-nvd3-directive

 

Within JavaScript file:

//in AngularJS controller
  $scope.exampleData = {
         "title" : "Revenue",
         "subtitle" : "US$, in thousands",
         "ranges" : [150, 225, 300],
         "measures" : [220],
         "markers" : [250]
   };

and within HTML file:




<div ng-controller="ExampleCtrl">
      <nvd3-bullet-chart data="exampleData" id="exampleId" margin="{left:75,top:60,bottom:60,right:10}" width="550" height="160">
        <svg></svg>
    </nvd3-bullet-chart>
</div>



 

Angular-nvD3

The library Angular-nvD3 is also a d3.js and nvd3 based open source GitHub project. It supports 21 fully implemented charts which can be configured extensively. Event handling is also possible. In opposition to Angular-nvd3-directives the whole configuration of the chart resides in the AngularJS controller and there is only one directive for all chart types. The following illustration and code shows an exemplary line chart configuration:

Line Chart with Angular-nvD3

Line Chart with Angular-nvD3

 

Within JavaScript file:

// in AngularJS controller
options={
 "chart" : {
   "type" : "lineChart",
   "height" : 450,
   "margin" : {
     "top" : 20,
     "right" : 20,
     "bottom" : 40,
     "left": 55
   },
   "useInteractiveGuideline" : true,
   "dispatch" : {},
   "xAxis" : {
     "axisLabel" : "Time (ms)"
   },
   "yAxis" : {
     "axisLabel" : "Voltage (v)",
     "axisLabelDistance" : -10
   }
 },
 "title" : {
   "enable" : true,
   "text" : "Title for Line Chart"
 }
}

and within HTML file:

 
<!-- in HTML file -->
<nvd3 options="options" data="data" class="with-3d-shadow with-transitions">
</nvd3>

 

Evaluation

We evaluated the libraries based on functional range, usability, handling in AngularJS, technical usage (such as problems with versions, bugs etc) and documentation. The following table gives a short overview of the evaluation result. More stars indicate, that the according library is better in the respective category.

Evaluation of Charting Libraries for AngularJS

Evaluation of Charting Libraries for AngularJS

 

d3.js is not adequate for AngularJS applications

Even though d3.js is often used, it is not adequate for charts in AngularJS applications. The functional range of d3.js goes beyond only charts. To generate charts, only a small part of it is used. Because of the huge range of options, the user has to write a lot of basic code to create a chart. This results in poorly readable and maintainable code.

Furthermore the code is not optimal for AngularJS applications, as it is bad practice to alter the HTML element tree in JavaScript code. All HTML elements should be added in the HTML files. Nevertheless there could be reasons to use d3.js in AngularJS applications, if the programmer wants to have full access to all options. If d3.js is used, a separate directive should be created to encapsulate the code.

Because of the huge user community and popularity, the documentation is detailed and contains a lot of good examples.

NVD3 is good for generating charts but not adequate for AngularJS applications

As NVD3 is a library to generate charts, it is highly suitable for business applications in JavaScript. The range of different charts is fully sufficient for most business applications. The options to customize charts are satisfactory. NVD3 only supports given chart types and predefined features. Modifications and additions to the charts are not easily feasible – only by directly adapting the code of the library. This limits users to the supported chart types and features. If more functionality is needed, d3.js would be a better solution than adapting NVD3.

Because NVD3 uses the same code concept as d3.js, it is not optimal for AngularJS applications. The same rule as for d3.js applies here: if this library is used in AngularJS, the user should generate a directive for each chart to encapsulate HTML element tree manipulation.

On the NVD3 webpage, a code example for every chart type is given, so users can quickly get to speed. Questions (and in most instances answers) to specific configurations, further chart options and problems can be found at the GitHub repository.

Angular-nvd3-directives is easy to use

Angular-nvd3-directives is a good library to display charts in AngularJS applications. The programming is easy and the code is understandable. Unfortunately, only eleven charts are implemented, so the functional range is not that broad. The documentation consists of detailed examples for the charts with an explanation of the options. On the other hand, special customization is not mentioned. Questions and answers can be found at the GitHub repository.

Because it is built on top of d3.js and NVD3, both libraries must be referenced in the AngularJS project. When using Bower, it can come to problems at the usage of the correct library versions. Also, some troublesome bugs can be found in the event handling, at least in version 0.0.7 (from 2014). We can expect that there will be no further development and so further upcoming problems with correct library versions will occur when AngularJS develops further. Also, some troublesome bugs can be found in the event handling.

Angular-nvD3 is easy to use and has many charts in its portfolio

Charts can also be easily created with Angular-nvD3. The code is clearly structured and users can quickly start by reading the documentation. There are a lot of examples on the web page which are directly editable in Plunker (an online editor where you can upload, compile and share code).

The charts can be adapted extensively. Customized event handling is also possible, but closer examination in the code is necessary, because the usage is not that obvious. The documentation (apart from the examples) is sparse. Especially the documentation for parameters and features is lacking. Some parameters can only be used for specific charts, which is not documented. It is also missing in the documentation, that some features are mutually exclusive.

Eventhough this library also depends on d3.js and NVD3, there are less problems with the versioning, because the required versions are not specific.

Conclusion

Even though d3.js and NVD3 got three stars at our evaluation, we can only recommended these libraries if the angular specific libraries cannot fulfill your needs. Angular-nvd3-directive is on par with Angular-nvD3. Depending on the following criteria either the one or the other would be advisable.

We would recommend angular-nvd3-directives if it offers the chart types you need, and you do not require special event handling. The documentation for angular-nvd3-directives is better.

On the other hand, Angular-nvD3 wins if you need many different chart types, the modification abilities and the online editing in Plunker. So this library is advised if your charts are highly customized.

0 Kommentare

Dein Kommentar

An Diskussion beteiligen?
Hinterlasse uns Deinen Kommentar!

Schreibe einen Kommentar

Deine E-Mail-Adresse wird nicht veröffentlicht. Erforderliche Felder sind mit * markiert.