Using Special Characters

FusionCharts Suite supports all unicode characters as part of charts. You can use Multi Lingual text, Currency symbols as well as special characters as part of your charts.

In this section, you will be shown how to:

  • Use Multi Lingual Text
  • Use Currency symbols
  • Use Special Characters

Using Multi Lingual Text#

FusionCharts XT allows you to use multi-lingual (UTF-8) characters on the charts.

To use multi-lingual characters on the chart, you necessarily need to use UTF-8 encoded XML.

The XML file or stream requires a BOM stamp to be present as the very first three bytes of the file. Hence, one must remember the two basic thumb rules:

  • Data URL method - the XML file or stream should have the BOM stamp

  • Data String method - the HTML or application file containing the XML as well as the chart object should have the BOM stamp.

  • What is BOM - Byte Order Mark. It is ‘EF BB EF’ - these three bytes in case of UTF-8 encoded files, the BOM being placed at the very beginning of the file. It is an indicator that the file is contains UTF-8 encoded strings.

Shown here is a chart that uses arabic text

كمية$0$200K$400K$600K$800K$1Mالشهرينايرفبرايرمارسأبريلمايويونيويوليوأغسطسسبتمبرأكتوبرنوفمبرديسمبرسوبرماركت هاريالإيرادات الشهرية للعام الماضي
Export As PNG
Export As JPG
Export As PDF
Export As SVG
Export As CSV
Export As XLSX
{
    "chart": {
        "caption": "سوبرماركت هاري",
        "subCaption": "الإيرادات الشهرية للعام الماضي",
        "xAxisName": "الشهر",
        "yAxisName": "كمية",
        "numberPrefix": "$",
        "theme": "fusion",
        "rotateValues": "1",
        "exportEnabled": "1"
    },
    "data": [
        {
            "label": "يناير",
            "value": "420000"
        },
        {
            "label": "فبراير",
            "value": "810000"
        },
        {
            "label": "مارس",
            "value": "720000"
        },
        {
            "label": "أبريل",
            "value": "550000"
        },
        {
            "label": "مايو",
            "value": "910000"
        },
        {
            "label": "يونيو",
            "value": "510000"
        },
        {
            "label": "يوليو",
            "value": "680000"
        },
        {
            "label": "أغسطس",
            "value": "620000"
        },
        {
            "label": "سبتمبر",
            "value": "610000"
        },
        {
            "label": "أكتوبر",
            "value": "490000"
        },
        {
            "label": "نوفمبر",
            "value": "900000"
        },
        {
            "label": "ديسمبر",
            "value": "730000"
        }
    ]
}
Were you able to implement this?
<chart caption="سوبرماركت هاري" subcaption="الإيرادات الشهرية للعام الماضي" xaxisname="الشهر" yaxisname="كمية" numberprefix="$" theme="fusion" rotatevalues="1" exportenabled="1">
    <set label="يناير" value="420000" />
    <set label="فبراير" value="810000" />
    <set label="مارس" value="720000" />
    <set label="أبريل" value="550000" />
    <set label="مايو" value="910000" />
    <set label="يونيو" value="510000" />
    <set label="يوليو" value="680000" />
    <set label="أغسطس" value="620000" />
    <set label="سبتمبر" value="610000" />
    <set label="أكتوبر" value="490000" />
    <set label="نوفمبر" value="900000" />
    <set label="ديسمبر" value="730000" />
</chart>
Were you able to implement this?

FusionCharts XT supports only left-to-right languages as of now. It does not have native support for right-to-left languages like Hebrew. So, if you want to use Hebrew with FusionCharts XT, you will have to programmatically reverse the sequence of words/characters and then provide the same to FusionCharts XT

Do not rely on specifying the encoding setting, that is, in the XML header region. This does not add the Byte Order Mark (BOM) to the XML file.

Using currency symbols#

Currency symbols like the, £(Pound), €(Euro), ¥(Yen) etc., may also be a part of the data which is displayed on charts. To display these characters on a chart, you can simply include it in the XML/JSON data source of the chart. This is applicable in both Data URL and Data String methods.

Shown below is a chart that uses the Yen symbol as a currency formatter.

Amount¥0¥200K¥400K¥600K¥800K¥1MMonthJanFebMarAprMayJunJulAugSepOctNovDecHarry's SuperMartMonthly revenue for last year
Export As PNG
Export As JPG
Export As PDF
Export As SVG
Export As CSV
Export As XLSX
{
    "chart": {
        "caption": "Harry's SuperMart",
        "subCaption": "Monthly revenue for last year",
        "xAxisName": "Month",
        "yAxisName": "Amount",
        "numberPrefix": "¥",
        "theme": "fusion",
        "rotateValues": "1",
        "exportEnabled": "1"
    },
    "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"
        }
    ]
}
Were you able to implement this?
<chart caption="Harry&#39;s SuperMart" subcaption="Monthly revenue for last year" xaxisname="Month" yaxisname="Amount" numberprefix="¥" theme="fusion" rotatevalues="1" exportenabled="1">
    <set label="Jan" value="420000" />
    <set label="Feb" value="810000" />
    <set label="Mar" value="720000" />
    <set label="Apr" value="550000" />
    <set label="May" value="910000" />
    <set label="Jun" value="510000" />
    <set label="Jul" value="680000" />
    <set label="Aug" value="620000" />
    <set label="Sep" value="610000" />
    <set label="Oct" value="490000" />
    <set label="Nov" value="900000" />
    <set label="Dec" value="730000" />
</chart>
Were you able to implement this?

When using the HTML embedding method with data provided as embedded string, it is essential to encode yen character as %A5. This is true for other currency characters as well.

Some special characters like the euro fall under the extended unicode character-set category. To display a these characters in your chart, the XML file should be encoded with a UTF-8 BOM signature as explained earlier, otherwise the character will not be displayed properly.

When using the HTML embedding method with data provided as embedded string, you need to use the encoded form (%E2%82%AC) instead of the character itself (€).

Using special characters#

You can directly embed most of the special characters and punctuation marks in the XML/JSON data source of your chart. However some characters like & , < , > , ' (apostrophe) and " (quote) need to be specially encoded when providing the same as a part of the chart data. Apart from this, there is no need to encode any other special character.

Given below is a table of the character and how it must be encoded, it is applicable in both Data URL and Data String methods.

Character JSON/XML Encoding HTML Embed Encoding
&amp; &amp; %26
&lt; &lt; %26lt
&gt; &gt; %26gt
&apos; &apos; %26apos
&quot; &quot; %26quot
% N/A %25

Shown here is a chart that uses special characters

'Amount'¥0¥200K¥400K¥600K¥800K¥1M"Month"JanFebMarAprMayJunJulAugSepOctNovDecHarry's SuperMartMonthly revenue for last year
Export As PNG
Export As JPG
Export As PDF
Export As SVG
Export As CSV
Export As XLSX
{
    "chart": {
        "caption": "Harry's SuperMart",
        "subcaption": "Monthly revenue for last year",
        "xaxisname": "\"Month\"",
        "yaxisname": "'Amount'",
        "numberprefix": "¥",
        "theme": "fusion",
        "rotatevalues": "1",
        "exportenabled": "1",
        "showlegend": "1",
        "animation": "0"
    },
    "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"
        }
    ]
}
Were you able to implement this?
<chart caption="Harry&#39;s SuperMart" subcaption="Monthly revenue for last year" xaxisname="&quot;Month&quot;" yaxisname="&#39;Amount&#39;" numberprefix="¥" theme="fusion" rotatevalues="1" exportenabled="1" showlegend="1" animation="0">
    <set label="Jan" value="420000" />
    <set label="Feb" value="810000" />
    <set label="Mar" value="720000" />
    <set label="Apr" value="550000" />
    <set label="May" value="910000" />
    <set label="Jun" value="510000" />
    <set label="Jul" value="680000" />
    <set label="Aug" value="620000" />
    <set label="Sep" value="610000" />
    <set label="Oct" value="490000" />
    <set label="Nov" value="900000" />
    <set label="Dec" value="730000" />
</chart>
Were you able to implement this?