Choose an item

Create a chart in AngularJS

FusionTime is a JavaScript charting library that helps you visualize, and explore time-series data. In FusionTime, you get lots of out-of-the-box interactivity, like, time navigator, date range selectors, tooltips with crosslines, interactive legend and more features which enhances the experience of exploring and understanding time series data.

We have built a simple angularjs-fusioncharts directive which provides bindings for FusionTime. The angularjs-fusioncharts directive allows you to easily add interactive time-series charts to any AngularJS project.

In this page, we'll see how to install FusionTime and render an interactive time-series chart using the angularjs-fusioncharts directive.

Installation

Since FusionTime is distributed along with FusionCharts Suite, download/install the FusionCharts package to get access to FusionTime and other charts of the FusionCharts Suite. To install follow any of the methods below:

To install FusionTime and the angularjs-fusioncharts directive via npm follow the steps below:
1. Install angularjs-fusioncharts directive

$ npm install angularjs-fusioncharts --save
2. Install fusioncharts core library

$ npm install fusioncharts --save
To install the FusionCharts Suite and the angularjs-fusioncharts component follow the steps below:
  1. Include the AngularJS core library.
  2. Include the FusionCharts JavaScript files from CDN.
  3. Include the angularjs-fusioncharts directive.
  4. Include FusionTime file.
The consolidated code is shown below:

<head>
    <!-- Step 1 - Including angular.js  -->
    <script type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/angular.js/1.7.5/angular.js"></script>
    <!-- Step 2 - Including angularjs-fusioncharts -->
    <script type="text/javascript" src="https://unpkg.com/angularjs-fusioncharts/dist/angular-fusioncharts.js"></script>
    <!-- Step 3 - Including the fusioncharts core library -->
    <script type="text/javascript" src="http://cdn.fusioncharts.com/fusioncharts/latest/fusioncharts.js"></script>
    <!-- Including the fusiontime file to render charts -->
    <script
      type="text/javascript"
      src=" http://cdn.fusioncharts.com/fusioncharts/latest/fusioncharts.timeseries.js"
    ></script>
</head>
To install the FusionCharts Suite and the angularjs-fusioncharts component follow the steps below:
  1. Include the AngularJS core library.
  2. Include the FusionCharts JavaScript files, which can be downloaded from here.
  3. Include the angularjs-fusioncharts directive.
  4. Include FusionTime file.
The consolidated code is shown below:

<head>
    <!-- Step 1 - Including angular.js  -->
    <script type="text/javascript" src="path/to/local/angular.js"></script>
    <!-- Step 2 - Including angularjs-fusioncharts -->
    <script type="text/javascript" src="path/to/local/angular-fusioncharts.js"></script>
    <!-- Step 3 - Including the fusioncharts core library -->
    <script type="text/javascript" src="path/to/local/fusioncharts.js"></script>
    <!-- Including the fusiontime file to render charts -->
    <script type="text/javascript" src=" text/javascript" src="path/to/local/fusioncharts.timeseries.js"></script>
</head>

That completes the installation of FusionTime and the angularjs-fusioncharts directive.

Create your First Chart

Let's create a time-series chart using angularjs-fusioncharts directive showing Daily sales of a grocery store.

The chart will look as shown below:

Loading data for chart…

The data for the above chart is too big to be displayed here. The table below shows the sample data of the above chart:

Time Sales
01-Feb-11 8866
02-Feb-11 2174
03-Feb-11 2084
04-Feb-11 1503
05-Feb-11 4928
06-Feb-11 4667
07-Feb-11 1064

FusionTime accepts a DataTable as it's data source. DataTable is the tabular representation of data. To create the DataTable, you need to provide the following:

  • schema - which defines the properties of the columns.
  • data - values of each row and column of the DataTable.

For an instance of FusionTime, you can create n number of DataTables, but only 1 DataStore.

Next, let's learn how to prepare the schema and the data of the DataTable.

Create the schema

The schema outlines each column represented in the above table. The schema contains an array which has multiple objects created in it. Each object outlines a column of the above table.

name and type are mandatory keys for each object. If the object type is time then format is also a mandatory key.

To define the schema, let's create a schema.json file and copy the following code:

It is not mandatory to create the schema in a different .json file. You can also define the schema within the .html file.

Let schema = [{
    "name": "Time",
    "type": "date",
    "format": "%-m/%-d/%Y"
}, {
    "name": "Sales",
    "type": "number"
}]

In the above code:

  • schema is the variable in which the array is stored.
  • Each object of a schema maps to a column of the tabular representation of the data
  • The JSON object has the following attributes:
    • name - Specify the name of the column of the tabular representation of data
    • type - Specify the type of the column.
    • format - Specify the input format of the date as per your data. In this example, the format is %-m/%-d/%Y. To know more on date formats click here.

Now that we have the schema ready, let's work on the data.

Create data

Data can be provided either in JSON format or 2D array format. We will use the 2D array format.

Data for the above chart is too big to be shown here. A sample of it has been used in the data object defined below:

var data = [
    [
        "1/4/2011",
        16.448
    ],
    [
        "1/5/2011",
        272.736
    ],
    [
        "1/5/2011",
        11.784
    ],
    [
        "1/5/2011",
        3.54
    ],
    [
        "1/6/2011",
        19.536
    ],
    [
        "1/7/2011",
        2573.82
    ],
]

Create a new data.json file, and copy the above code there. Next, copy the entire data and replace it with the content of the data object in your 'data.json' file.

It is not mandatory to create a data.json file. You could also do the same in your HTML file.

In the above code:

  • data is the variable in which the data array is stored.
  • Each object in the data array corresponds to a row in the tabular representation of the data.
  • Each element in an object is represented by each object of the schema. The values in each object of the array represent the following:
    • Time according to the format
    • Total Sales amount

We are all set with our data to create the chart.

By default, FusionTime applies the average function to aggregate the data and display on the chart. You can change the aggregate function from average to any other numeric calculation. To know more click here.

Now, let's create the files to render the above chart.

Render the chart

To render the chart, create a .js file and copy the following code:


var angular = require('angular');
var FusionCharts = require('fusioncharts');
require('angularjs-fusioncharts');

// Require TimeSeries module
var TimeSeries = require('fusioncharts/fusioncharts.timeseries');

// Initialize Charts with FusionCharts instance
TimeSeries(FusionCharts);
var app = angular.module('myApp', ['ng-fusioncharts']);

var jsonify = res => res.json();
var dataFetch = fetch(
  'https://s3.eu-central-1.amazonaws.com/fusion.store/ft/data/line-chart-with-time-axis-data.json'
).then(jsonify);
var schemaFetch = fetch(
  'https://s3.eu-central-1.amazonaws.com/fusion.store/ft/schema/line-chart-with-time-axis-schema.json'
).then(jsonify);

var app = angular.module('myApp', ['ng-fusioncharts']);

app.controller('MyController', function($scope) {
  $scope.dataSource = {
    data: null,
    caption: {
      text: 'Sales Analysis'
    },
    subcaption: {
      text: 'Grocery'
    },
    yAxis: [
      {
        plot: {
          value: 'Grocery Sales Value',
          type: 'line'
        },
        format: {
          prefix: '$'
        },
        title: 'Sale Value'
      }
    ]
  };

  Promise.all([dataFetch, schemaFetch]).then(res => {
    const data = res[0];
    const schema = res[1];
    const fusionTable = new FusionCharts.DataStore().createDataTable(
      data,
      schema
    );
    $scope.$apply(function() {
      $scope.dataSource.data = fusionTable;
    });
  });
});
Use a bundler browserify, to bundle the script. Click here to know more.

$ browserify script.js -o bundle.js
Create an HTML template as shown below:

<html>
  <head>
    <!-- Include compiled bundle in script tag -->
    <script type="text/javascript" src="./bundle.js"></script>
  </head>

  <body ng-app="myApp">
    <div ng-controller="MyController">
      <div
        fusioncharts
        width="700"
        height="400"
        type="timeseries"
        datasource-dt="dataSource">
        // When using TimeSeries pass your dataSource in "datasource-dt" attribute not in "datasource".
      </div>
    </div>
  </body>
</html>



<html>

<head>
    <!-- Including AngularJS -->
    <script type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/angular.js/1.7.2/angular.min.js"></script>
    <!-- Including the fusioncharts core library -->
    <script type="text/javascript" src="https://cdn.fusioncharts.com/fusioncharts/latest/fusioncharts.js"></script>
    <!-- Including the angularjs-fusioncharts directive-->
    <script type="text/javascript" src="https://unpkg.com/[email protected]/dist/angular-fusioncharts.js"></script>
    <!-- Include FusionTime -->
    <script type="text/javascript" src=" http://cdn.fusioncharts.com/fusioncharts/latest/fusioncharts.timeseries.js"></script>
    <script type="text/javascript" src="./bundle.js"></script>
    <script type="text/javascript">
        var jsonify = res => res.json();
        var dataFetch = fetch(        'https://s3.eu-central-1.amazonaws.com/fusion.store/ft/data/line-chart-with-time-axis-data.json'
        ).then(jsonify);
        var schemaFetch = fetch(
        'https://s3.eu-central-1.amazonaws.com/fusion.store/ft/schema/line-chart-with-time-axis-schema.json'
        ).then(jsonify);
        var app = angular.module('myApp', ['ng-fusioncharts']);
        app.controller('MyController', function($scope) {
        $scope.dataSource = {
            data: null,
            caption: {
            text: 'Sales Analysis'
            },
            subcaption: {
            text: 'Grocery'
            },
            yAxis: [{
                plot: {
                    value: 'Grocery Sales Value',
                    type: 'line'
                },
                format: {
                    prefix: '$'
                },
                title: 'Sale Value'
            }]
        };
        Promise.all([dataFetch, schemaFetch]).then(res => {
            const data = res[0];
            const schema = res[1];
            const fusionTable = new FusionCharts.DataStore().createDataTable(
            data,
            schema
            );
            $scope.$apply(function() {
            $scope.dataSource.data = fusionTable;
            });
        });
        });
    </script>
</head>
<body ng-app="myApp">
    <div ng-controller="MyController">
      <div
        fusioncharts
        width="700"
        height="400"
        type="timeseries"
        datasource-dt="dataSource">
        // When using TimeSeries pass your dataSource in "datasource-dt" attribute not in "datasource".
      </div>
    </div>
</body>
</html>



<html>
<head>
    <!-- Including AngularJS -->
    <script type="text/javascript" src="path/to/local/angular.min.js"></script>
    <!-- Including the fusioncharts core library -->
    <script type="text/javascript" src="path/to/local/fusioncharts.js"></script>
    <!-- Including the angularjs-fusioncharts directive-->
    <script type="text/javascript" src="path/to/local/angular-fusioncharts.js"></script>
    <!-- Include FusionTime -->
    <script type="text/javascript" src="path/to/local/fusioncharts.timeseries.js"></script>
    <script type="text/javascript" src="./bundle.js"></script>
    <script type="text/javascript">
        var jsonify = res => res.json();
        var dataFetch = fetch(
        'https://s3.eu-central-1.amazonaws.com/fusion.store/ft/data/line-chart-with-time-axis-data.json'
        ).then(jsonify);
        var schemaFetch = fetch(
        'https://s3.eu-central-1.amazonaws.com/fusion.store/ft/schema/line-chart-with-time-axis-schema.json'
        ).then(jsonify);
        var app = angular.module('myApp', ['ng-fusioncharts']);
        app.controller('MyController', function($scope) {
        $scope.dataSource = {
            data: null,
            caption: {
            text: 'Sales Analysis'
            },
            subcaption: {
            text: 'Grocery'
            },
            yAxis: [{
                plot: {
                    value: 'Grocery Sales Value',
                    type: 'line'
                },
                format: {
                    prefix: '$'
                },
                title: 'Sale Value'
            }]
        };
        Promise.all([dataFetch, schemaFetch]).then(res => {
            const data = res[0];
            const schema = res[1];
            const fusionTable = new FusionCharts.DataStore().createDataTable(
            data,
            schema
            );
            $scope.$apply(function() {
            $scope.dataSource.data = fusionTable;
            });
        });
        });
    </script>
</head>
<body ng-app="myApp">
    <div ng-controller="MyController">
      <div
        fusioncharts
        width="700"
        height="400"
        type="timeseries"
        datasource-dt="dataSource">
        // When using TimeSeries pass your dataSource in "datasource-dt" attribute not in "datasource".
      </div>
    </div>
</body>
</html>

That's it! Your first chart in AngularJS using FusionTime is ready.

IE support

To run your application on IE(11 and below), follow the steps given below:

  • Install v5.0.0 or later versions of angularjs-fusioncharts.
  • Install v13.3.3-sr.1 or later versions of FusionCharts.
  • Update the index.html file where instead of passing data in datasource, pass the data using datasource-dt. The HTML code is given below:
<div
  fusioncharts
  width="600"
  height="400"
  type="timeseries"
  datasource-dt="dataSource"
>
  // Instead of passing data in datasouce, use datasource-dt.
</div>