FusionCharts Free Documentation

Using FusionCharts with JSP > UTF8 Examples

In this section, we'll show you how to use FusionCharts and Ruby to plot charts from data containing UTF-8 characters. Using dataURL method we'll do the following:

Create a column3D chart to show the Monthly Sales with Japanese data from a XML file.
Create a pie chart to show "Production by Factory" data from the database containing Japanese text .

We'll use Japanese text in this example but you could extend it to any left-to-right language by applying the same procedure. Before you proceed with the contents in this page, we recommend you to go through the section "Basic Examples " and "Plotting from Database Example", as we'll directly use a lot of concepts defined in those sections.

The code examples contained in this page are present in Download Package > Code > JSP > UTF8Example folder.
The database scripts are present in Download Package > Code > JSP > DB.

Plotting a chart with Japanese text from JapaneseData.xml

While using FusionCharts with UTF-8 characters, please remember the following:

dataURL method has to be used to get the xml.
Rotated text cannot render UTF-8 characters. For example, UTF-8 characters in the rotated labels will not be rendered correctly.
BOM has to present in the xml given as input to the chart.

Setting up the charts for use

In our code, we've used the charts contained in Download Package > Code > FusionCharts folder. When you run your samples, you need to make sure that the SWF files are in proper location. Also the JapaneseData.xml file used in JapaneseXMLFileExample.jsp is present in the Download Package > Code > JSP > UTF8Example > Data folder.

Let's now get to building our first example. In this example, we'll create a "Monthly Unit Sales" chart using dataURL method. For a start, we'll hard code our XML data in a physical XML document JapaneseData.xml, save it with UTF-8 encoding and then utilize it for our chart.

Let's first have a look at the XML Data document:

<?xml version="1.0" encoding="UTF-8" ?>
<graph caption='月間販売' xAxisName='月' yAxisName='Units' decimalPrecision='0' formatNumberScale='0'>
    <set name='一月' value='462' color='AFD8F8' />
    <set name='二月' value='857' color='F6BD0F' />
    <set name='三月' value='671' color='8BBA00' />
    <set name='四月' value='494' color='FF8E46' />
    <set name='五月' value='761' color='008E8E' />
    <set name='六月' value='960' color='D64646' />
    <set name='七月' value='629' color='8E468E' />
    <set name='八月' value='622' color='588526' />
    <set name='九月' value='376' color='B3AA00' />
    <set name='十月' value='494' color='008ED6' />
    <set name='十一月' value='761' color='9D080D' />
    <set name='十二月' value='960' color='A186BE' />
</graph>

The XML document should begin with an XML declaration which specifies the version of XML being used and the encoding as seen in the above xml:
<?xml version="1.0" encoding="UTF-8" ?>

As you would notice, the caption, x-axisname and names of the months in the xml are in Japanese.

The jsp which uses this xml is JapaneseXMLFileExample.jsp which contains the following code:

<%@ page language="java" contentType="text/html; charset=UTF-8"
pageEncoding="UTF-8"%>
<HTML>
    <HEAD>
        <META http-equiv="Content-Type" content="text/html;charset=UTF-8"/>
        <TITLE>FusionCharts Free - UTF8 日本語 (Japanese) Example</TITLE>
        <%
        /*You need to include the following JS file, if you intend to embed the chart using JavaScript.
        Embedding using JavaScripts avoids the "Click to Activate..." issue in Internet Explorer
        When you make your own charts, make sure that the path to this JS file is correct. Else,         you would get JavaScript errors.
        */
        %>
        <SCRIPT LANGUAGE="Javascript" SRC="../../FusionCharts/FusionCharts.js"></SCRIPT>
        <style type="text/css">
        
       </style>
    </HEAD>
    <BODY>
        <CENTER>
            <h2><a href="http://www.fusioncharts.com" target="_blank">FusionCharts Free</a>
            UTF8 日本語 (Japanese) Example</h2>
            <h4>Basic Example using data from pre-built JapaneseData.xml</h4>
            <%
            /*
            In this example, we show how to use UTF characters in charts created with FusionCharts
            Here, the XML data for the chart is present in Data/JapaneseData.xml.
            The xml file should be created and saved with an editor
            which places the UTF8 BOM. The first line of the xml should contain the
            xml declaration like this: <?xml version="1.0" encoding="UTF-8" ?>
            */
            /*
            The pageEncoding and chartSet headers for the page have been set to UTF-8
            in the first line of this jsp file.
            */

            //Variable to contain dataURL
            String strDataURL = "Data/JapaneseData.xml";

            //Create the chart - Pie 3D Chart with dataURL as strDataURL
            %>
            <jsp:include page="../Includes/FusionChartsRenderer.jsp" flush="true">
                <jsp:param name="chartSWF" value="../../FusionCharts/FCF_Column3D.swf" />
                <jsp:param name="strURL" value="<%=strDataURL%>" />
                <jsp:param name="strXML" value="" />
                <jsp:param name="chartId" value="FactorySum" />
                <jsp:param name="chartWidth" value="600" />
                <jsp:param name="chartHeight" value="300" />
                <jsp:param name="debugMode" value="false" />
                <jsp:param name="registerWithJS" value="false" />
            </jsp:include>
            <BR>
            <BR>
            <a href='../NoChart.html' target="_blank">Unable to see the chart above?</a><BR>
            <H5><a href='../default.htm'>« Back to list of examples</a></h5>
        </CENTER>
    </BODY>
</HTML>

This code is similar to the code present in BasicExample/SimpleChart.jsp. Points to note in the above page (specific to UTF8) are: (Page containing the chart)

First the page encoding and charset have to be set as shown:

<%@ page language="java" contentType="text/html; charset=UTF-8" pageEncoding="UTF-8"%>
Next, it is important to have the <meta> tag in the head section of the html with the charset defined as UTF-8 as shown below.

<meta http-equiv="content-type" content="text/html; charset=utf-8" />

That's the only effort involved in rendering a chart with UTF8 characters with data from a xml file. The chart with Japanese text will look as shown:

Let' move on to our next example where we get the data from the database and dynamically create the xml.

Let us now create a chart with UTF characters present in the database. For this we will modify the database and add a table to contain the Japanese data.

Please refer to Plotting From Database section for basic setup and configuration of the database.
Ensure that the tables required for the UTF8 examples have been created. The required sql script "UTFExampleTablesCreation.sql" is present in the Download Package > Code > JSP > DB folder. You could run this script in your mysql, (if not already done)- this will alter the database to use UTF8 as default character set, create the Japanese_Factory_Master and French_Factory_Master tables and insert sample data.

Let's now shift our attention to the code that will interact with the database, fetch data and then render a chart. We will create two jsps - JapaneseDBExample.jsp and PieDataJapanese.jsp for this example.

JapaneseDBExample.jsp will act as the chart container and PieDataJapanese.jsp will be the xml data provider.

The code contained in JapaneseDBExample.jsp is as follows:

<%@ page language="java" contentType="text/html; charset=UTF-8"
pageEncoding="UTF-8"%>
<HTML>
    <HEAD>
        <META http-equiv="Content-Type" content="text/html;charset=UTF-8"/>
        <TITLE>FusionCharts Free - UTF8 日本語 (Japanese) Database Example</TITLE>
        <%
        /*You need to include the following JS file, if you intend to embed the chart using JavaScript.
        Embedding using JavaScripts avoids the "Click to Activate..." issue in Internet Explorer
        When you make your own charts, make sure that the path to this JS file is correct. Else, you would get JavaScript errors.
        */
        %>
        <SCRIPT LANGUAGE="Javascript" SRC="../../FusionCharts/FusionCharts.js"></SCRIPT>
        <style type="text/css">
        
        </style>
    </HEAD>
    <BODY>
        <CENTER>
            <h2><a href="http://www.fusioncharts.com" target="_blank">FusionCharts Free</a> UTF8 日本語 (Japanese) Example With Data from Database</h2>
            <%
            /*
            In this example, we show how to use UTF characters in chart created with FusionCharts
            Here, the XML data for the chart is dynamically generated by PieDataJapanese.jsp.
            */
            /*
            In this example, FusionCharts uses dataURL method to get the xml from the data in t       he          database.
            In order to store and retrieve UTF8 characters from database, in our example, MySQL,
            we have to alter the database default charset to UTF8. This can be done using the command:
            ALTER DATABASE DEFAULT CHARACTER SET = utf8; on the "factorydb" database.
            For this example, we will use another table Japanese_Factory_Master containing the names of          the factories
            in Japanese language. This table should also be defined to use UTF8 as DEFAULT CHARSET.
            The sql script that needs to be executed before running this example is             UTFExampleTablesCreation.sql
            present in Code/JSP/DB folder.
            */
            /*
            The pageEncoding and chartSet headers for the page have been set to UTF-8
            in the first line of this jsp file.
            */
            //Variable to contain dataURL
            //NOTE: It's necessary to encode the dataURL if you've added parameters to it
            String strDataURL="PieDataJapanese.jsp";

            //Create the chart - Pie 3D Chart with dataURL as strDataURL
            %>
            <jsp:include page="../Includes/FusionChartsRenderer.jsp" flush="true">
                <jsp:param name="chartSWF" value="../../FusionCharts/FCF_Pie3D.swf" />
                <jsp:param name="strURL" value="<%=strDataURL%>" />
                <jsp:param name="strXML" value="" />
                <jsp:param name="chartId" value="FactorySum" />
                <jsp:param name="chartWidth" value="650" />
                <jsp:param name="chartHeight" value="450" />
                <jsp:param name="debugMode" value="false" />
                <jsp:param name="registerWithJS" value="false" />
            </jsp:include>
            <BR>
            <BR>
            <a href='../NoChart.html' target="_blank">Unable to see the chart above?</a><BR>
            <H5><a href='../default.htm'>« Back to list of examples</a></h5>
        </CENTER>
    </BODY>
</HTML>

In the above Chart container page following should be taken care of:

It is important to have the <meta> tag in the head section of the html with the charset defined as UTF-8 as shown below.

<meta http-equiv="content-type" content="text/html; charset=utf-8" />
The page encoding and charset need to be set with the following code: ( first line of the jsp)

<%@ page language="java" contentType="text/html; charset=UTF-8" pageEncoding="UTF-8"%>

Next, let us understand the code in PieDataJapanese.jsp

<% byte[] utf8Bom = new byte[]{(byte) 0xef, (byte) 0xbb, (byte) 0xbf};
String utf8BomStr = new String(utf8Bom,"UTF-8");
%><%=utf8BomStr%><?xml version='1.0' encoding='UTF-8'?><%@ page language="java" contentType="text/xml; charset=UTF-8"
pageEncoding="UTF-8"%><%@ include file="../Includes/DBConn.jsp" %><%@ page import="java.sql.Statement,java.sql.ResultSet"%><%
/*
This page generates the XML data for the Pie Chart contained in JapaneseDBExample.jsp.

For the sake of ease, we've used the same database as used by other examples.
We have added one more table Japanese_Factory_Master with stores the names of the factory in Japanese language.

Steps to ensure UTF8 xml output for FusionCharts:
1. Output the BOM bytes 0xef 0xbb 0xbf as shown above in the first few lines
2. Put the xml declaration <?xml version='1.0' encoding='UTF-8'?> immediately after the output from previous step.
3. Declare contentType to be text/xml, charSet and pageEncoding to be UTF-8
4. Use getBytes to get the data from UTF field in the database and to convert it into String, use new String(bytes,"UTF-8")
Do not output anything other than the BOM, xml declaration and the xml itself. (no empty lines too!)
*/

//Database Objects - Initialization
Statement st1=null,st2=null;
ResultSet rs1=null,rs2=null;

String strQuery="";
//strXML will be used to store the entire XML document generated
String strXML ="";
//Generate the chart element
strXML = "<graph caption='工場出力レポート' subCaption='量で' decimalPrecision='0' showNames='1' numberSuffix=' Units' pieSliceDepth='30' formatNumberScale='0'>";

//Query to retrieve data about factory
strQuery = "select * from Japanese_Factory_Master";
//Create the statement
st1=oConn.createStatement();
//Execute the query
rs1=st1.executeQuery(strQuery);

String factoryId=null;
String factoryName=null;
String totalOutput="";

while(rs1.next()) {
    factoryId=rs1.getString("FactoryId");
    byte[] b = rs1.getBytes("FactoryName");
    factoryName=new String (b, "UTF-8");

    //Now create second resultset to get details for this factory
    strQuery = "select sum(Quantity) as TotOutput from Factory_Output where FactoryId=" + factoryId;
    st2=oConn.createStatement();
    rs2 = st2.executeQuery(strQuery);
    if(rs2.next()){
        totalOutput=rs2.getString("TotOutput");
    }
    //Generate <set name='..' value='..'/>
    strXML += "<set name='" + factoryName + "' value='" +totalOutput+ "' />";
    try {
        if(null!=rs2){
        rs2.close();
     }
     }catch(java.sql.SQLException e){
          System.out.println("Could not close the resultset");
     }
     try{
          if(null!=st2) {
               st2.close();
               st2=null;
     }
     }catch(java.sql.SQLException e){
          System.out.println("Could not close the statement");
     }
}
//Finally, close <graph> element
strXML += "</graph>";

try {
     if(null!=rs1){
          rs1.close();
          rs1=null;
     }
}catch(java.sql.SQLException e){
     //do something
     System.out.println("Could not close the resultset");
}
try {
     if(null!=st1) {
          st1.close();
          st1=null;
     }
}catch(java.sql.SQLException e){
     System.out.println("Could not close the statement");
}
try {
     if(null!=oConn) {
          oConn.close();
          oConn=null;
     }
}catch(java.sql.SQLException e){
     System.out.println("Could not close the connection");
}

//Just write out the XML data
//NOTE THAT THIS PAGE DOESN'T CONTAIN ANY HTML TAG, WHATSOEVER
%><%=strXML%>

This code is similar to PieData.jsp seen in DBExample with dataURL method. There are some UTF-8 specific points to be noted here.
If the XML data provider is a JSP, as in this case, then the output should follow this sequence:

The jsp should output the BOM as shown in the following code:
<% byte[] utf8Bom = new byte[]{(byte) 0xef, (byte) 0xbb, (byte) 0xbf};
String utf8BomStr = new String(utf8Bom,"UTF-8");%><%=utf8BomStr%>
Next, the xml declaration should be output: <?xml version='1.0' encoding='UTF-8'?>
Finally, the xml data should be output

Try not to put any empty lines or spaces in the output xml. You will also have to assure that you set the content-type response header to indicate the UTF-8 encoding of the page as shown:

<%@ page language="java" contentType="text/xml; charset=UTF-8" pageEncoding="UTF-8"%>

When we view the chart in the browser, it would look like this:

In Download Package > Code > JSP > UTF8Example, we've more example codes for French language too, which have not been explained here, as they're similar in concept. You can directly see the code and get more insight into it.