Adding Special Characters

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 FusionCharts ASP.NET C# & VB wrapper.

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"
        }
    ]
}

The consolidated code for the above chart is shown below:

using System;
using FusionCharts.Charts;

public partial class Pages_ChartSpclChar: System.Web.UI.Page {
    protected void Page_Load(object sender, EventArgs e) {
        //Json data in string format
        string jsonData = "             ";
        // create chart instance
        // parameter
        // chart type, chart id, chart width, chart height, data format, data source
        Chart column2d = new Chart("column2d", "first_chart", "700", "400", "json", jsonData);
        //render chart
        Literal1.Text = column2d.Render();
    }
}

Imports FusionCharts.Charts

Partial Class Pages_ChartSpclChar
Inherits System.Web.UI.Page

Protected Sub Page_Load(ByVal sender As Object, ByVal e As EventArgs) Handles MyBase.Load
Dim jsonData As String = "             "
Dim column2d As Chart = New Chart("column2d", "first_chart", "700", "400", "json", jsonData)
Literal1.Text = column2d.Render()
End Sub
End Class

The HTML template for aspx file is shown below:

<%@ Page Language="C#" AutoEventWireup="true" CodeFile="ChartSpclChar.aspx.cs" Inherits="Pages_ChartSpclChar" %>

<!DOCTYPE html>

<html xmlns=" http://www.w3.org/1999/xhtml" >

<head runat="server">
    <link href="../Styles/SampleStyleSheet.css" rel="stylesheet" />
    <title>FusionCharts | Chart using special character</title>
</head>

<body>
    <script type="text/javascript" src="//cdn.fusioncharts.com/fusioncharts/latest/fusioncharts.js"></script>
    <script type="text/javascript" src="//cdn.fusioncharts.com/fusioncharts/latest/themes/fusioncharts.theme.fusion.js"></script>
    <h3>Chart using special character</h3>
    <form id="form1" runat="server">
        <div>
            <asp:Literal ID="Literal1" runat="server"></asp:Literal>
        </div>
        <div><span>
                <asp:HyperLink id="hyperlink1" NavigateUrl="../Default.aspx" Text="Go Back" runat="server" /></span></div>
    </form>
</body>

</html>

<%@ Page Language="VB" AutoEventWireup="false" CodeFile="ChartSpclChar.aspx.vb" Inherits="Pages_ChartSpclChar" %>

<!DOCTYPE html>

<html xmlns=" http://www.w3.org/1999/xhtml" >

<head runat="server">
    <link href="../Styles/SampleStyleSheet.css" rel="stylesheet" />
    <title>FusionCharts | Chart using special character</title>
</head>

<body>
    <script type="text/javascript" src="//cdn.fusioncharts.com/fusioncharts/latest/fusioncharts.js"></script>
    <script type="text/javascript" src="//cdn.fusioncharts.com/fusioncharts/latest/themes/fusioncharts.theme.fusion.js"></script>
    <h3>Chart using special character</h3>
    <form id="form1" runat="server">
        <div>
            <asp:Literal ID="Literal1" runat="server"></asp:Literal>
        </div>
        <div><span>
                <asp:HyperLink id="hyperlink1" NavigateUrl="../Default.aspx" Text="Go Back" runat="server" /></span></div>
    </form>
</body>

</html>

Apart from the usual boilerplate, the sample C#/VB code provided above corresponds to the following tasks:

1. Import and resolve the dependencies like System, and FusionCharts.Charts.

2. Define a class CommonThemeUsage inherited from System.Web.UI.Page. Correspondingly, in the .aspx file, CommonThemeUsage is inherited.

3. Within the class CommonThemeUsage, define Page_Load():

   • Declare a string jsonData and use it to assign the chart configuration as a JSON string.
   • Create an instance of Chart (defined within FusionCharts.Charts), and assign it the necessary attributes of a Column 2D chart. See the source code comments for the attributes used. Of particular importance is the attribute chartType, which in this case is column2d. Find the complete list of chart types with their respective alias here .
   • In the dataSource object, add numberPrefix attribute in chart object. Set the numberPrefix to $.
   • Render the chart using the [instanceName].Render() method. Correspondingly, in the .aspx file, include the necessary chart and theme libraries modules using the <script> tags, like fusioncharts.js, fusioncharts.theme.fusion.js (for this case, include all theme files), followed by some JavaScript functions and radio buttons, and finally within a <form><div> render the chart.

Refer to Column 2D chart for more information on the configuration and data for this chart type.