Multi-lingual Charts with FusionCharts

Do you have a website or a web application that caters to an international audience? Then you would like to offer your product information and sales copy in the language of their choice. Let’s assume you already do so. But what about your charts? Wouldn’t you like your charts in reports, dashboards, surveys or any other part of the application to be multi-lingual too? Wouldn’t that further increase your credibility? 

FusionCharts Suite v3.1 now allows your charts and maps to go international too. While FusionCharts Suite v3 allowed you to use multi-lingual characters horizontally, v3.1 allows you to use them vertically too. So with v3.1, you can render your charts like this:

Yes, we do agree that you would not ideally like to have a chart with such a motley assortment of languages. But then you get the point, don’t you? 

How to use multi-lingual characters? 

Before we talk about how exactly can you have multi-lingual characters in your charts, let's briefly talk about the two ways in which FusionCharts takes its input XML data: 

1. dataURL method: In this method, you provide the URL of XML Data Document to FusionCharts. This URL can be a physical XML document (like Data.xml) or relayed by a URL (like ReturnXMLData.asp). The chart now sends a request for XML data to the specified URL, reads it, parses it and then renders the charts accordingly. Click here for more details on this method.  


2. dataXML method: In this method, you send the XML data along with the HTML Content and chart SWF file to the browser. The SWF loads, reads this data (present in same page) and then renders the chart. Click here for more details on this method.

To use multi-lingual characters on the chart, you need to use UTF-8 encoded XML and the XML file/stream requires a BOM stamp to be present as the very first 3 Bytes of the file. BOM stands for Byte Order Mark and is an indicator that the file is containing UTF-8 encoded strings.

How to add BOM? 

Adding the BOM stamp is a very simple process and can be done as follows depending on which method you are using: 

dataURL

In case you are using a static XML file, you can manually insert the BOM stamp to the XML data file following these 3 steps:

1. Open the file in question in a text-editor that supports UTF-8 encoding with BOM stamp (Example – Windows Notepad).
2. Open the save menu and specify file name, file type, encoding and BOM mark (if the option is available).
3. Save the file.

In Windows Notepad, the process would look like this:

But in most of the cases, you would not really be using a static XML file. You would rather be having server side scripts virtually relaying the XML data document to the chart. In that case, you could use either of the following methods:

1. Manually add BOM to the XML relayer script file - just like adding BOM stamp to the static XML files you can also add the BOM stamp to the server side file which would be relaying the dynamically generated XML. This needs to be done when the script file is created for the first time before you start coding in it.


2. Write BOM using script - In most cases the XML relayer script file might be created with ANSI encoded format. In this case, one needs to add the BOM using script at the very beginning of the output stream. Moreover, when a server side script creates an XML file, it should add the BOM stamp as the very first 3 bytes of the file. As an example, you can append BOM for PHP script as under:

header ( 'Content-type: text/xml' );
echo pack ( "C3" , 0xef, 0xbb, 0xbf ); 

To implement BOM stamp with other server-side technologies, please visit our online documentation on this here. 

dataXML

Just like adding BOM stamp to a static XML files, in this case as well you would need to save the file containing the chart SWF and XML with BOM stamp. This needs to be done when the script/HTML file is created for the first time before you start coding in it.