Adding Special Characters Using AngularJS

FusionCharts offers multiple options to format numbers on the chart. You can configure number prefixes and suffixes, decimal places, and scale numbers based on a predefined scale. This article focuses on how you customize the prefix and suffix of the numbers on the chart using angularjs-fusioncharts component.

To customize the prefix and suffix of the numbers on the chart, use the following attributes:

• Specify the prefix for all the values on the chart using the numberPrefix attribute. Note that the value of this attribute works only if you don't specifically mention the values of the yNumberPrefix and xNumberPrefix attributes.

• Specify the prefix for all the Y-axis values on the chart using the yNumberPrefix attribute. If you don't mention this attribute, the chart will inherit the default value from the numberPrefix attribute.

• Specify the prefix for all the X-axis values on the chart using the xNumberPrefix attribute. If you don't mention this attribute, the chart will inherit the default value from the numberPrefix attribute.

• Specify the suffix for all the values on the chart using the numberSuffix attribute. Note that the value of this attribute works only if you don't specifically mention the values of the yNumberSuffix and xNumberSuffix attributes.

• Specify the suffix for all the Y-axis values on the chart using the yNumberSuffix attribute. If you don't mention this attribute, the chart will inherit the default value from the numberSuffix attribute.

• Specify the suffix for all the X-axis values on the chart using the xNumberSuffix attribute. If you don't mention this attribute, the chart will inherit the default value from the numberSuffix attribute.

A chart configured to customize the prefix of the numbers on the chart is shown below:

{
    "chart": {
        "caption": "Monthly revenue for last year",
        "subCaption": "Harry's SuperMart",
        "xAxisName": "Month",
        "yAxisName": "Revenues (In USD)",
        "numberPrefix": "$",
        "theme": "fusion"
    },
    "data": [
        {
            "label": "Jan",
            "value": "420000"
        },
        {
            "label": "Feb",
            "value": "810000"
        },
        {
            "label": "Mar",
            "value": "720000"
        },
        {
            "label": "Apr",
            "value": "550000"
        },
        {
            "label": "May",
            "value": "910000"
        },
        {
            "label": "Jun",
            "value": "510000"
        },
        {
            "label": "Jul",
            "value": "680000"
        },
        {
            "label": "Aug",
            "value": "620000"
        },
        {
            "label": "Sep",
            "value": "610000"
        },
        {
            "label": "Oct",
            "value": "490000"
        },
        {
            "label": "Nov",
            "value": "900000"
        },
        {
            "label": "Dec",
            "value": "730000"
        }
    ]
}COPY

The code to render the above chart is given below:

//  Require AngularJS 
var angular = require('angular');

// Require FusionCharts 
var FusionCharts = require('fusioncharts');

// Require angularjs-fusioncharts 
require('angularjs-fusioncharts');

// Require Chart modules 
var Charts = require('fusioncharts/fusioncharts.charts');

// Require Fusion theme
var FusionTheme = require('fusioncharts/themes/fusioncharts.theme.fusion');

// Initialize Charts with FusionCharts instance
Charts(FusionCharts);

// Initialize FusionTheme with FusionCharts instance
FusionTheme(FusionCharts);

var myApp = angular.module("myApp", ["ng-fusioncharts"]);
myApp.controller("MyController", ["$scope", function($scope){
    var chart;
    $scope.chartType = "column2d"; 
    // datasource
    $scope.myDataSource = {
        "chart": {
        "caption": "Monthly revenue for last year",
        "subCaption": "Harry's SuperMart",
        "xAxisName": "Month",
        "yAxisName": "Revenues (In USD)",
        "numberPrefix": "$",
        "theme": "fusion"
        },
        "data": [{
            "label": "Jan",
            "value": "420000"
        }, {
            "label": "Feb",
            "value": "810000"
        }, {
            "label": "Mar",
            "value": "720000"
        }, {
            "label": "Apr",
            "value": "550000"
        }, {
            "label": "May",
            "value": "910000"
        }, {
            "label": "Jun",
            "value": "510000"
        }, {
            "label": "Jul",
            "value": "680000"
        }, {
            "label": "Aug",
            "value": "620000"
        }, {
            "label": "Sep",
            "value": "610000"
        }, {
            "label": "Oct",
            "value": "490000"
        }, {
            "label": "Nov",
            "value": "900000"
        }, {
            "label": "Dec",
            "value": "730000"
        }]
    };
}]);COPY

Now, use the fusioncharts directive in a template. The HTML template is given below:

<div ng-app="myApp">
    <div ng-controller="MyController"> 
        <div id="chart-container">
            <!--To get the reference of chart instance listen to initialized event-->
            <fusioncharts
                type="column2d"
                width="700"
                id="id1"
                height=400
                dataFormat="json"
                initialized="initialized(chart)"
                datasource="{{myDataSource}}">
            </fusioncharts>
        </div>
    </div>
</div>COPY

Render the above chart by following the steps mentioned below:

1. Include the necessary libraries (such as fusioncharts and angularjs-fusioncharts) and components using require.

2. Add the chart and the theme as dependencies to the core.

3. Store the chart configurations in a variable (myApp).

4. In the dataSource object, add numberPrefix attribute in chart object. Set the numberPrefix to $.

5. Add the <div> with an fc-chart directive in your HTML, assuming that it is inside a controller named MyController. In the div:

   • Set the chart type as column2d. Find the complete list of chart types with their respective aliases here.
   • Set the width and the height (in pixels).
   • Set the dataFormat as json.
   • Embed the JSON data from dataSource.