Pusat Ilmu Secara Detil

How to Create Line Chart Using AngularJS and Highcharts

How to Create Line Chart Using AngularJS and Highcharts

In this web programming tutorial, we will discuss how to create a line graph or commonly termed Line Chart by using AngularJS and library Highcharts.

If you seek tutorial about how to create line chart by using PHP and MySQL database, you can find our previous tutorial :"Create Line Chart using data from MySQ and MySQL".

The output or final result in this tutorial is shown in Figure 1 below:
(Fig.1)

From Figure 1 above, we have three commodities:
  • Sugar
  • Rice
  •  Wheat Flour
The line chart shows the comparison of price commodity from January to December,2008. The provided data in that graph only just as an example.

Step by Step Guide: Create Line Chart Using AngularJS

1. Using ng-app directive to initialize the AngularJS Application

The ng-app directive is a starting point of AngularJS Application. It initializes the AngularJS framework automatically. You can only have one ng-app directive in your HTML document. If more than one ng-app directive appears, the first appearance will be used.

In here we use ng-app directive with module "chartApp". We can give the module name according to our wishes.
<html ng-app="chartApp">

2. Call the required library

Besides we call the AngularJS and Highcharts libraries, we also call Boostrap libary, because in this tutorial we use boostrap as front-end.

Put those libraries after tag <head>

<head>
 <meta charset="utf-8">
 <meta name="viewport" content="width=device-width, initial-scale=1.0">
 <meta name="author" content="ilmu-detil.blogspot.com">
 <title>AngularJS Graph Using Highcharts </title>
 <link rel="stylesheet" href="assets/css/bootstrap.min.css">
 <link rel="stylesheet" href="assets/css/ilmudetil.css">
 <script  src="assets/js/jquery-1.11.3.min.js"></script>
 <script src="assets/js/highcharts.src.js"></script>
 <script src="assets/js//angular.js"></script>
 <script src="assets/js/exporting.js"></script>
     
</head>

3. Add the ng-controller

The ng-controller directive is used to specify a controller in HTML element, which will add behavior or maintain the data in that HTML element and its child elements.
<body ng-controller="myController">


4. Create an id for rendering chart

In step 4 we prepare where the line chart will be displayed. In this case, the id to render (display)chart is "mygraph"
<div class="container" style="margin-top:20px" >
 <div class="col-md-10">
  <div class="panel panel-primary">
   <div class="panel-heading">Commodity Price Graphs</div>
    <div class="panel-body">
     <div id ="mygraph"></div>
   </div>
  </div>
 </div>
</div>

5. Create the chart with AngularJS library

This 5th step is the core of the graph process, by calling first the module name of the ng-app directive and the controller's name for the ng-controller directive, then the viewing process is done in function ($ scope)
<script>
 angular.module('chartApp', [])
 .controller('myController', function ($scope) {
  Highcharts.chart('mygraph', {

   title: {
     text: 'Comparison of Sugar, Rice and Wheat Flour'
     
   },
   subtitle:{
     text: '(Price In 2008)'
    
   },
   
   xAxis: {
    categories: ['Jan', 'Feb', 'Mar', 'Apr', 'May', 'Jun', 
     'Jul', 'Aug', 'Sep', 'Oct', 'Nov', 'Dec']
   },
   yAxis: {
     title: {
      text: 'Price (Rp)'
     }
   },
   legend: {
     layout: 'vertical',
     align: 'right',
     verticalAlign: 'top',
     x: -10,
     y: 120,
     borderWidth: 0
    },

   series: [{
      "name":"Sugar",
      "data":[6415,6430,6437,6301,6440,6502,6441,6465,6446,6700,6650,6680]
     },{
      "name":"Rice",
      "data":[5442,5457,5376,5398,5363,5501,5471,5400,5420,5900,5460,5789]
     },{
      "name":"Wheat Flour",
      "data":[6759,7921,7291,7627,7641,7704,7744,7820,7790,7850,7320,7867]
     }]
  });
 });
</script>


Full Source Code

<!DOCTYPE html>
<html ng-app="chartApp">
<head>
 <meta charset="utf-8">
 <meta name="viewport" content="width=device-width, initial-scale=1.0">
 <meta name="author" content="ilmu-detil.blogspot.com">
 <title>AngularJS Graph Using Highcharts </title>
 <link rel="stylesheet" href="assets/css/bootstrap.min.css">
 <link rel="stylesheet" href="assets/css/ilmudetil.css">
 <script  src="assets/js/jquery-1.11.3.min.js"></script>
 <script src="assets/js/highcharts.src.js"></script>
 <script src="assets/js//angular.js"></script>
 <script src="assets/js/exporting.js"></script>
     
</head>
<body ng-controller="myController">
<nav class="navbar navbar-default navbar-fixed-top">
 <div class="container">
  <div class="navbar-header">
   <button type="button" class="navbar-toggle" data-toggle="collapse" data-target=".navbar-collapse">
    <span class="icon-bar"></span><span class="icon-bar"></span><span class="icon-bar"></span>
   </button>
   <a class="navbar-brand" href="index.html">
   Pusat Ilmu Secara Detil</a>
  </div>
  <div class="navbar-collapse collapse">
   <ul class="nav navbar-nav navbar-left">
    <li class="clr1 active"><a href="index.html">Home</a></li>
    <li class="clr2"><a href="">Programming</a></li>
    <li class="clr3"><a href="">English</a></li>
   </ul>
  </div>
 </div>
</nav>
</br></br></br></br>

<div class="container" style="margin-top:20px" >
 <div class="col-md-10">
  <div class="panel panel-primary">
   <div class="panel-heading">Commodity Price Graphs</div>
    <div class="panel-body">
     <div id ="mygraph"></div>
   </div>
  </div>
 </div>
</div>
<script>
 angular.module('chartApp', [])
 .controller('myController', function ($scope) {
  Highcharts.chart('mygraph', {

   title: {
     text: 'Comparison of Sugar, Rice and Wheat Flour'
     
   },
   subtitle:{
     text: '(Price In 2008)'
    
   },
   
   xAxis: {
    categories: ['Jan', 'Feb', 'Mar', 'Apr', 'May', 'Jun', 
     'Jul', 'Aug', 'Sep', 'Oct', 'Nov', 'Dec']
   },
   yAxis: {
     title: {
      text: 'Price (Rp)'
     }
   },
   legend: {
     layout: 'vertical',
     align: 'right',
     verticalAlign: 'top',
     x: -10,
     y: 120,
     borderWidth: 0
    },

   series: [{
      "name":"Sugar",
      "data":[6415,6430,6437,6301,6440,6502,6441,6465,6446,6700,6650,6680]
     },{
      "name":"Rice",
      "data":[5442,5457,5376,5398,5363,5501,5471,5400,5420,5900,5460,5789]
     },{
      "name":"Wheat Flour",
      "data":[6759,7921,7291,7627,7641,7704,7744,7820,7790,7850,7320,7867]
     }]
  });
 });
</script>
</body>
</html>


Share this:

You Might Also Like:

Disqus Comments