Charts in AngularJS
Welcome to the World of Statistics – Where Storks Deliver Babies
Statistics are encountered in all areas of modern life, but what in fact is the field known as “statistics”? Wikipedia describes statistics this way: “Statistics is the study of methods for handling quantitative information.” In other words, statistics is essentially the clarification of facts based on extensive data sets. As such, statistics makes it easier to read important information for purposes such as making predictions about the future or aiding decision-making.
Creators of statistics face few limits, because in the world of statistics storks deliver babies – to bridge the gap to the section heading.
The quality of statistics is highly dependent on the quality of the collected data sets, however, and can be difficult to generalize. As a result, the following article is concerned not with the collection of statistical data but rather with the graphical representation of these data sets using AngularJS.
Angular Meets New Friends – Chart Libraries for Everyone
It won’t work without help. Libraries for the creation of charts and graphs are available everywhere. To provide a brief orientation, only the best-known libraries are presented here. Every library comes with an Angular directive, which encapsulates the functionality and simplifies working with the library. These directives should therefore be used whenever possible.
Angular nvD3 „Bring data to life with SVG, Canvas and HTML. “
https://github.com/krispo/angular-nvd3
nvD3 is one of the most extensive libraries and offers many configuration options. The large range of functions, though, requires a lot of memory (~1 MB). With 22 different chart types, the nvD3 library is no lightweight, and getting started with it is not particularly easy. Once users are familiar with the library, however, they have at their disposal a very powerful tool for creating charts.
Angular-Chart.js „Reactive, responsive, beautiful charts for AngularJS”
http://jtblin.github.io/angular-chart.js/
Angular-Chartjs, based on Chart.js, is a particularly lightweight library without additional dependencies. The API and the design are especially impressive. Getting started is very easy, and a user soon gets good results. On more elaborate projects, though, users quickly reach the limits of this library, as it supports only nine different chart types. Users should therefore consider at the outset if the scope of this library is adequate.
Highcharts.js „Make your data come alive “
https://github.com/pablojim/highcharts-ng
Highcharts.js is a compromise between scope and light weight. It supports many different chart types and is somewhat more customizable than Chart.js. In addition, it offers the possibility of directly exporting generated charts. This feature is especially useful for projects that need to export charts. It supports JPG, PNG, PDF and SVG. The use of Highcharts.js for commercial projects, though, requires the purchase of a license.
Lets code
To be able to dive into the world of charts, we first need a project. We generate the project in this example with Yeoman. Additional details about Yeoman are available in the article From 0 to 100 with Yeoman.
yo hottowel [App-Name]
In the next step, the required dependencies should be installed. Bower (bower.json) was used for installation in this example. The dependencies in the associated Angular module can then be easily used (highchart.module.js).
Note that the modules created must then be added to the application definition (app.module.js). This project structure allows better maintainability and leads to clearer source code.
bower.json extract
Comparison of Directives in the Code
The chart can then be defined in the respective application controller, in order to display it in the view. An identical chart, showing the average age of people in Germany from 1950 to 2016, is presented graphically on the following pages (based on data from the Federal Statistical Office https://www.destatis.de/bevoelkerungspyramide/).
Conclusion
Which library is most suitable for which application?
Design: Users looking for easy and stylish charts should opt for Angular-Chart.js. The design of the charts generated is impressive, although the customizability and range of the charts is somewhat limited.
Customizability: Users who plan to generate a large volume of scientific statistics and who need a variety of chart types should choose nvD3. As this library is based on the well-known D3 library, it offers many settings and chart types. It is as a result somewhat more complex than the other libraries.
Most Versatile: The most versatile of the chart libraries is Highcharts.js. Its appeal lies in its variety of chart types and easy use. In addition, it allows the export of charts by default. The only downside is the cost of a license for commercial projects.
Sources
https://de.wikipedia.org/wiki/Diagramm
http://www.bfs.admin.ch/bfs/portal/de/index/news/publikationen.Document.48507.pdf
https://github.com/johnpapa/generator-hottowel#readme
https://github.com/krispo/angular-nvd3
http://jtblin.github.io/angular-chart.js/
https://github.com/pablojim/highcharts-ng
Comments
No Comments