Charts and Events Using AngularJS Fusioncharts

Published on: 25th May 2018

This tutorial helps you implement charts and click events using Angular-FusionCharts Plugin in Angular JS.

We will be creating following three files in order to demonstrate the implementation of charts using Angular-FusionCharts Plugin -

charts.html file for creating the Chart and Events.
charts.css file for adding basic style to our Chart and Events.
charts.js file containing AngularJs controller responsible for initializing the Chart

This is how our project structure looks like -

charts.html

Here is how our HTML file charts.html looks like -

charts.html

<html ng-app="ChartApp">
<head>
<link rel="stylesheet" href="css/charts.css">
<script
  src="https://cdnjs.cloudflare.com/ajax/libs/angular.js/1.3.14/angular.min.js"></script>
<script
  src="http://static.fusioncharts.com/code/latest/fusioncharts.js"></script>
<script
  src="http://fusioncharts.github.io/angular-fusioncharts/demos/js/angular-fusioncharts.min.js"></script>
<script type="text/javascript" src="js/charts.js"></script>
</head>
<body>
  <div ng-controller="DemoController">
    <fusioncharts width="510" height="400" type="column2d" datasource="{{dataSource}}" events="events">
    </fusioncharts>
    <p>
      	<a id="change_data" ng-click="updateMyChartData()">Change Data</a>
        <a id="change_color" ng-click="changeBackgroundColor()">Change Chart Background Color</a>
        <a id="change_caption" ng-click="changeCaptionTextAlignment()">Caption Left-Aligned</a>
        <br><br>
        <span>The value that you have selected is: <b>{{ selectedValue }}</b></span>
    </p>
  </div>
</body>
</html>

Let's discuss some of AngularJs specific parts in the above HTML file. Specifically, here are the attributes that need attention -

First we have added two libraries fusioncharts.js and angular-fusioncharts.js in script tag - <script src="http://static.fusioncharts.com/code/latest/fusioncharts.js"></script>,
<script src="http://fusioncharts.github.io/angular-fusioncharts/demos/js/angular-fusioncharts.min.js"></script>
The angular-fusioncharts.js file should mandatorily be included after all other scripts.
The AngularJS application is defined by ng-app="ChartApp".The application runs inside the <html>.
Now we create div with controller ng-controller="DemoController" and inside this we create fusioncharts tag to define the view (chart width, height, and chart type) and
the variable for the datasource.
Now we create click events - for update the chart data,change the background color and change the caption alignment.
And in the last we create value indicator - to show chart values on click chart.

charts.css

Next file to talk about is a css file that we have added to give our links and chart a fine look. This is a simple CSS file without any angular or fancy stuff in it.

charts.css

body {
  font: 12px Arial;
}

#change_caption {
    text-align: center;
    width: 135px;
    padding: 6px;
    display: inline-table;
    color: white;
    background-color: gray;
    font-size: 12px;
    cursor: pointer;
    border: 1px solid gray;
    border-radius: 13px;
    margin-left: 5px;
}

#change_color {
    text-align: center;
    width: 210px;
    padding: 6px;
    display: inline-table;
    color: white;
    background-color: gray;
    font-size: 12px;
    cursor: pointer;
    border: 1px solid gray;
    border-radius: 13px;
    margin-left: 5px;
}

#change_data {
    text-align: center;
    width: 100px;
    padding: 6px;
    display: inline-table;
    color: white;
    background-color: gray;
    font-size: 12px;
    cursor: pointer;
    border: 1px solid gray;
    border-radius: 13px;
}

charts.js

Finally, here is the javascript file containing the controller for our charts and events -

charts.js


var app = angular.module('ChartApp', ["ng-fusioncharts"])
app.controller('DemoController', function($scope) {
    $scope.dataSource = {
        chart: {
            caption: "Demo",
            subCaption: "last month",
            numberPrefix: "Rs",
            theme: "ocean"
        },
        data:[{
            label: "Delhi",
            value: "800000"
        },
        {
            label: "Gurgaon",
            value: "730000"
        },
        {
            label: "Banglore",
            value: "590000"
        },
        {
            label: "Mumbai",
            value: "520000"
        },
        {
            label: "Hydrabad",
            value: "330000"
        }],
        "trendlines": [{
            "line": [{
                "startvalue": "640000",
                "color": "#FFA500",
                "displayvalue": "Target - Rs640K"
            }]
        }]
    };

    $scope.updateMyChartData = function () {
        $scope.dataSource.data[2].label = "This Label is Updated";
        $scope.dataSource.data[2].value = "420000";

        $scope.dataSource.data[3].label = "This is updated as well";
        $scope.dataSource.data[3].value = "210000";
    };

    $scope.changeBackgroundColor = function () {
        $scope.dataSource.chart.bgColor = "white";
    };

    $scope.changeCaptionTextAlignment = function () {
        $scope.dataSource.chart.captionAlignment = "left";
    };

    $scope.selectedValue = "Rs0K";

    $scope.events = {
        dataplotclick: function (ev, props) {
            $scope.$apply(function () {
                $scope.selectedValue = props.displayValue;
            });
        }
    }
});

In the above javascript file, there are a few things to note:

First we add ng-fusioncharts directive in our module.
Then we set the datasource using the regular FusionCharts JSON format like chart theme,caption,numberPrefix,data values and trendlines(target line).
Then we create event functions like- updateMyChartData function to update the data,changeBackgroundColor function to change the
background color of chart and changeCaptionTextAlignment function to change caption alignment.
And the last function events to show chart values.

Webpage Output in Browser

This is how the HTML code above will be displayed in a browser with Chart and events.

You can see the working demo of the above chart and events here.

Thank you for reading through the tutorial. In case of any feedback/questions/concerns, you can communicate same to us through your comments and we shall get back to you as soon as possible.

Posted By: Sumit Sain

Published on: 25th May 2018

Comment Form is loading comments...