Integrating Highcharts-ng into your AngularJS Applications
In this tutorial we’ll be having a look at how you can effectively implement highcharts.js into your angularjs applications. We’ll be following a component based architecture and enforcing things like one-way data-binding as is suggested in Todd Mottos AngularJS Style Guide.
If you already follow a component based architecture, then it should should be very easy to integrate the code in this tutorial straight into your application without too much fuss.
Setting Up
In order to be able to use highcharts-ng, you’ll need to add a script tag that imports the vanilla highchartsjs library:
<!DOCTYPE html>
<html ng-app="root" ng-strict-di lang="en">
<head>
<meta charset="UTF-8" />
<title>AngularJS Highcharts Tutorial</title>
...
<!-- ADD These two imports to your index.html page. -->
<!-- Without these, highcharts will not work -->
<script src="//code.highcharts.com/highcharts.src.js"></script>
<script src="./assets/js/highcharts-ng.js"></script>
...
</head>
<body>
...
</body>
</html>
After we’ve imported the appropriate javascript files, we’ll then be able to add
highcharts-ng to our modules array like so:
angular.module('root', [
...
'highcharts-ng'
...
]);
By adding this to our modules array, it means we’ll now be able to use and see Highcharts-ng in all of the components/controllers attached to our root module.
Our Controller
Now that we have everything set up in order to use highcharts-ng, we can start adding highcharts charts to our application.
Within your html file add to following:
<highchart id="chart1" config="$ctrl.chartConfig"></highchart>
Once you have this, we’ll have to define our $ctrl.chartConfig object, we can do this in our Controller like so:
function HighchartsController(StatsService, $log, $timeout, $scope) {
var ctrl = this;
ctrl.chartConfig = {
options: {
chart: {
type: "area"
}
},
title: {
text: "Network Usage - Last 60 Minutes"
},
yAxis: {
title: {
text: "Throughput MBit/s"
}
},
xAxis: {
title: {
text: "Minutes"
},
categories: [
"-55",
"-50",
"-45",
"-40",
"-35",
"-30",
"-25",
"-20",
"-15",
"-10",
"-05",
"0"
]
},
plotOptions: {
line: {
dataLabels: {
enabled: true
},
enableMouseTracking: true
}
},
series:
angularjs[
({
name: "Inbound",
data: [
29.9,
71.5,
25.4,
43.2,
37.0,
33.0,
35.6,
48.5,
21.4,
19.1,
16.6,
54.4
]
},
{
name: "Outbound",
data: [
19.3,
56.3,
23.1,
38.5,
32.9,
27.0,
30.6,
42.3,
17.4,
12.0,
9.1,
34.0
]
})
]
};
}
angular.module("root").controller("HighchartsController", HighchartsController);
And finally we need to add the binding for our chartConfig object to our component:
var ourComponent = {
...
controller: HighchartsController,
bindings: {
chartConfig: '<'
}
}
angular.module('root')
.component('ourComponent', ourComponent);
Pushing Dynamic Data to the Chart
Static charts can be pretty boring at times and having to refresh the page all the time can be time consuming. Fortunately dynamically updating our Highcharts charts in angular is easy. All you have to do is push that values you want into your chartConfig object and angular and highcharts handles the rest.
In the below code snippet you’ll see we are performing a shift on our data array to remove the first element and then pushing our own random value to the same data array every 2 seconds.
ctrl.poll = function() {
$timeout(function() {
// Here is where you could poll a REST API or the websockets service for live data
ctrl.chartConfig.series[0].data.shift();
ctrl.chartConfig.series[0].data.push(Math.floor(Math.random() * 20) + 1);
ctrl.chartConfig.series[1].data.shift();
ctrl.chartConfig.series[1].data.push(Math.floor(Math.random() * 20) + 1);
ctrl.poll();
}, 2000);
};
this.$onInit = function() {
$log.log("hello");
ctrl.poll();
};
Summary
Open up your AngularJS Application and you should see your chart rendering in all it’s glory. If you found this tutorial useful then let me know in the comments section below.
If you need more in-depth knowledge about Highcharts-ng, check out the official documentation: