Current File : /home/caballoscriollos/www/espanol/encuesta/graphs/contents/jsp_utf8example.html
<?xml version="1.0" encoding="iso-8859-1"?>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
<title>FusionCharts Free Documentation</title>
<link rel="stylesheet" href="Style.css" type="text/css" />
</head>
<body>
<table width="98%" border="0" cellspacing="0" cellpadding="3" align="center">
<tr>
<td>
<h2 class="pageHeader">Using FusionCharts with JSP > UTF8 Examples </h2>
</td>
</tr>
<tr>
<td valign="top" class="text">
<p>In this section, we'll show you how to use FusionCharts and Ruby to plot charts from data containing <strong>UTF-8 characters</strong>. Using dataURL method we'll do the following: </p>
<ul>
<li>Create a column3D chart to show the Monthly Sales with Japanese data from <strong>a XML file</strong>. </li>
<li>Create a pie chart to show "Production by Factory" data from the <strong>database </strong>containing Japanese text .</li>
</ul>
<p>We'll use Japanese text in this example but you could extend it to any left-to-right language by applying the same procedure. <strong>Before you proceed with the contents in this page, we recommend you to go through the section "Basic Examples " and
"<a href="JSP_DB.html">Plotting from Database Example</a>", as we'll directly use a lot of concepts defined in those sections.</strong></p>
<p class="highlightBlock">The code examples contained in this page are present
in <span class="codeInline">Download Package > Code > JSP > UTF8Example
</span> folder. <br />
The database scripts are present in <span class="codeInline">Download
Package > Code > JSP ></span> <span class="codeInline">DB</span>.
</p>
<p class="text">
</p>
<p><span class="header">Plotting a chart with Japanese text from JapaneseData.xml </span><br />
<br />
While using FusionCharts with UTF-8 characters, please remember the following:</p>
<ul>
<li>dataURL method has to be used to get the xml.</li>
<li>Rotated text cannot render UTF-8 characters. For example, UTF-8 characters in the rotated labels will not be rendered correctly.</li>
<li>BOM has to present in the xml given as input to the chart. </li>
</ul>
<p><span class="header">Setting up the charts for use</span></p>
<p>In our code, we've used the charts contained in <span class="codeInline">Download Package > Code > FusionCharts</span> 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 <span class="codeInline">JapaneseXMLFileExample.jsp</span> is present in the <span class="codeInline">Download Package > Code > JSP > UTF8Example > Data </span>folder.</p>
<p>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. </p>
<p>Let's first have a look at the XML Data document:</p>
<p class="codeBlock">
<?xml version="1.0" encoding="UTF-8" ?><br>
<graph caption='月間販売' xAxisName='月' yAxisName='Units' decimalPrecision='0' formatNumberScale='0'><br>
<set name='一月' value='462' color='AFD8F8' /><br>
<set name='二月' value='857' color='F6BD0F' /><br>
<set name='三月' value='671' color='8BBA00' /><br>
<set name='四月' value='494' color='FF8E46' /><br>
<set name='五月' value='761' color='008E8E' /><br>
<set name='六月' value='960' color='D64646' /><br>
<set name='七月' value='629' color='8E468E' /><br>
<set name='八月' value='622' color='588526' /><br>
<set name='九月' value='376' color='B3AA00' /><br>
<set name='十月' value='494' color='008ED6' /><br>
<set name='十一月' value='761' color='9D080D' /><br>
<set name='十二月' value='960' color='A186BE' /><br>
</graph></p>
<p class="text">The XML document should begin with an <strong>XML declaration </strong> which specifies the version of XML being used and the encoding as seen in the above xml:<br />
<span class="codeInline"><?xml version="1.0" encoding="UTF-8" ?> </span></p>
<p class="text">As you would notice, the caption, x-axisname and names of the months in the xml are in Japanese. </p>
<p>The jsp which uses this xml is JapaneseXMLFileExample.jsp which contains the following code:</p>
<p class="codeBlock"><%@ page language="java" contentType="text/html; charset=UTF-8"<br />
pageEncoding="UTF-8"%><br />
<HTML><br />
<HEAD><br />
<META http-equiv="Content-Type" content="text/html;charset=UTF-8"/> <br />
<TITLE>FusionCharts Free - UTF8 日本語 (Japanese) Example</TITLE><br />
<span class="codeComment"><%<br />
/*You need to include the following JS file, if you intend to embed the chart using JavaScript.<br />
Embedding using JavaScripts avoids the "Click to Activate..." issue in Internet Explorer<br />
When you make your own charts, make sure that the path to this JS file is correct. Else, you would get JavaScript errors.<br />
*/<br />
%></span><br />
<SCRIPT LANGUAGE="Javascript" SRC="../../FusionCharts/FusionCharts.js"></SCRIPT><br />
<style type="text/css"><br />
<!--<br />
body {<br />
font-family: Arial, Helvetica, sans-serif;<br />
font-size: 12px;<br />
}<br />
.text{<br />
font-family: Arial, Helvetica, sans-serif;<br />
font-size: 12px;<br />
}<br />
--><br />
</style><br />
</HEAD><br />
<BODY><br />
<CENTER><br />
<h2><a href="http://www.fusioncharts.com" target="_blank">FusionCharts Free</a> <br />
UTF8 日本語 (Japanese) Example</h2><br />
<h4>Basic Example using data from pre-built JapaneseData.xml</h4><br />
<%<br />
<span class="codeComment"> /*<br />
In this example, we show how to use UTF characters in charts created with FusionCharts <br />
Here, the XML data for the chart is present in Data/JapaneseData.xml. <br />
The xml file should be created and saved with an editor<br />
which places the UTF8 BOM. The first line of the xml should contain the<br />
xml declaration like this: <?xml version="1.0" encoding="UTF-8" ?><br />
*/<br />
/*<br />
The pageEncoding and chartSet headers for the page have been set to UTF-8<br />
in the first line of this jsp file.<br />
*/</span><br />
<br />
<span class="codeComment"> //Variable to contain dataURL<br />
String strDataURL = "Data/JapaneseData.xml";<br />
<br />
//Create the chart - Pie 3D Chart with dataURL as strDataURL</span><br />
%> <br />
<jsp:include page="../Includes/FusionChartsRenderer.jsp" flush="true"> <br />
<jsp:param name="chartSWF" value="../../FusionCharts/FCF_Column3D.swf" /> <br />
<jsp:param name="strURL" value="<%=strDataURL%>" /> <br />
<jsp:param name="strXML" value="" /> <br />
<jsp:param name="chartId" value="FactorySum" /> <br />
<jsp:param name="chartWidth" value="600" /> <br />
<jsp:param name="chartHeight" value="300" /><br />
<jsp:param name="debugMode" value="false" /> <br />
<jsp:param name="registerWithJS" value="false" /><br />
</jsp:include><br />
<BR><br />
<BR><br />
<a href='../NoChart.html' target="_blank">Unable to see the chart above?</a><BR><br />
<H5><a href='../default.htm'>&laquo; Back to list of examples</a></h5><br />
</CENTER><br />
</BODY><br />
</HTML> </p>
<br />
<p>This code is similar to the code present in <span class="codeInline">BasicExample/SimpleChart.jsp.</span> Points to note in the above page (specific to UTF8) are: (Page containing the chart) </p>
<ul>
<li><span class="text">First the page encoding and charset have to be set as shown: <br />
<br />
</span> <span class="codeBlock"><%@ page language="java" contentType="text/html; charset=UTF-8"
pageEncoding="UTF-8"%><br />
</span></li>
<li>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.<br />
<br />
<span class="codeBlock"><meta http-equiv="content-type" content="text/html; charset=utf-8" /> </span><br />
</li>
</ul>
<p class="text">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:</p>
<p class="text"><img src="Images/Code_JapXMLFileChart.jpg" width="577" height="274" class="imageBorder" /> </p>
<p class="text">Let' move on to our next example where we get the data from the database and dynamically create the xml. </p>
<p class="header">Plotting a chart with Japanese text from the database </p>
<p class="text">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. </p>
<p class="header">Database Configuration </p>
<ol>
<li>Please refer to <a href="JSP_DB.html">Plotting From Database</a> section for basic setup and configuration of the database.</li>
<li>Ensure that the tables required for the UTF8 examples have been created. The required sql script "UTFExampleTablesCreation.sql" is present in the <span class="codeInline">Download Package > Code > JSP > DB </span>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.</li>
</ol>
<p>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. </p>
<p class="text">JapaneseDBExample.jsp will act as the chart container and PieDataJapanese.jsp will be the xml data provider.</p>
<p class="text">The code contained in JapaneseDBExample.jsp is as follows:</p>
<p class="codeBlock"><strong><%@ page language="java" contentType="text/html; charset=UTF-8"<br />
pageEncoding="UTF-8"%></strong><br />
<HTML><br />
<HEAD><br />
<strong><META http-equiv="Content-Type" content="text/html;charset=UTF-8"/> </strong><br />
<TITLE>FusionCharts Free - UTF8 日本語 (Japanese) Database Example</TITLE><br />
<%<br />
<span class="codeComment"> /*You need to include the following JS file, if you intend to embed the chart using JavaScript.<br />
Embedding using JavaScripts avoids the "Click to Activate..." issue in Internet Explorer<br />
When you make your own charts, make sure that the path to this JS file is correct. Else, you would get JavaScript errors.<br />
*/</span><br />
%><br />
<SCRIPT LANGUAGE="Javascript" SRC="../../FusionCharts/FusionCharts.js"></SCRIPT><br />
<style type="text/css"><br />
<!--<br />
body {<br />
font-family: Arial, Helvetica, sans-serif;<br />
font-size: 12px;<br />
}<br />
.text{<br />
font-family: Arial, Helvetica, sans-serif;<br />
font-size: 12px;<br />
}<br />
--><br />
</style><br />
</HEAD><br />
<BODY><br />
<CENTER><br />
<h2><a href="http://www.fusioncharts.com" target="_blank">FusionCharts Free</a> UTF8 日本語 (Japanese) Example With Data from Database</h2><br />
<%<br />
<span class="codeComment"> /*<br />
In this example, we show how to use UTF characters in chart created with FusionCharts <br />
Here, the XML data for the chart is dynamically generated by PieDataJapanese.jsp. <br />
*/<br />
/*<br />
In this example, FusionCharts uses dataURL method to get the xml from the data in t he database. <br />
In order to store and retrieve UTF8 characters from database, in our example, MySQL,<br />
we have to alter the database default charset to UTF8. This can be done using the command:<br />
ALTER DATABASE DEFAULT CHARACTER SET = utf8; on the "factorydb" database.<br />
For this example, we will use another table Japanese_Factory_Master containing the names of the factories<br />
in Japanese language. This table should also be defined to use UTF8 as DEFAULT CHARSET. <br />
The sql script that needs to be executed before running this example is UTFExampleTablesCreation.sql <br />
present in Code/JSP/DB folder.<br />
*/<br />
/*<br />
The pageEncoding and chartSet headers for the page have been set to UTF-8<br />
in the first line of this jsp file.<br />
*/ <br />
//Variable to contain dataURL<br />
//NOTE: It's necessary to encode the dataURL if you've added parameters to it</span><br />
<strong>String strDataURL="PieDataJapanese.jsp";</strong><br />
<br />
<span class="codeComment"> //Create the chart - Pie 3D Chart with dataURL as strDataURL</span><br />
%> <br />
<jsp:include page="../Includes/FusionChartsRenderer.jsp" flush="true"> <br />
<jsp:param name="chartSWF" value="../../FusionCharts/FCF_Pie3D.swf" /> <br />
<jsp:param name="strURL" value="<%=strDataURL%>" /> <br />
<jsp:param name="strXML" value="" /> <br />
<jsp:param name="chartId" value="FactorySum" /> <br />
<jsp:param name="chartWidth" value="650" /> <br />
<jsp:param name="chartHeight" value="450" /><br />
<jsp:param name="debugMode" value="false" /> <br />
<jsp:param name="registerWithJS" value="false" /><br />
</jsp:include><br />
<BR><br />
<BR><br />
<a href='../NoChart.html' target="_blank">Unable to see the chart above?</a><BR><br />
<H5><a href='../default.htm'>&laquo; Back to list of examples</a></h5><br />
</CENTER><br />
</BODY><br />
</HTML></p>
<p class="text">In the above Chart container page following should be taken care of:</p>
<ul>
<li>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.<br />
<br />
<span class="codeBlock"><meta http-equiv="content-type" content="text/html; charset=utf-8" /> </span><br />
</li>
<li>The page encoding and charset need to be set with the following code: ( first line of the jsp)<br />
<br />
<span class="codeBlock"><%@ page language="java" contentType="text/html; charset=UTF-8" pageEncoding="UTF-8"%></span><br />
</li>
</ul>
<p>Next, let us understand the code in PieDataJapanese.jsp</p>
<p class="codeBlock"><% byte[] utf8Bom = new byte[]{(byte) 0xef, (byte) 0xbb, (byte) 0xbf};<br />
String utf8BomStr = new String(utf8Bom,"UTF-8");<br />
%><%=utf8BomStr%><?xml version='1.0' encoding='UTF-8'?><%@ page language="java" contentType="text/xml; charset=UTF-8"<br />
pageEncoding="UTF-8"%><%@ include file="../Includes/DBConn.jsp" %><%@ page import="java.sql.Statement,java.sql.ResultSet"%><%<br />
<span class="codeComment">/*<br />
This page generates the XML data for the Pie Chart contained in JapaneseDBExample.jsp. <br />
<br />
For the sake of ease, we've used the same database as used by other examples. <br />
We have added one more table Japanese_Factory_Master with stores the names of the factory in Japanese language.<br />
<br />
Steps to ensure UTF8 xml output for FusionCharts:<br />
1. Output the BOM bytes 0xef 0xbb 0xbf as shown above in the first few lines<br />
2. Put the xml declaration <?xml version='1.0' encoding='UTF-8'?> immediately after the output from previous step.<br />
3. Declare contentType to be text/xml, charSet and pageEncoding to be UTF-8<br />
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")<br />
Do not output anything other than the BOM, xml declaration and the xml itself. (no empty lines too!)<br />
*/</span><br />
<br />
<span class="codeComment">//Database Objects - Initialization</span><br />
Statement st1=null,st2=null;<br />
ResultSet rs1=null,rs2=null;<br />
<br />
String strQuery="";<br />
<span class="codeComment">//strXML will be used to store the entire XML document generated</span><br />
String strXML ="";<br />
<span class="codeComment">//Generate the chart element</span><br />
strXML = "<graph caption='工場出力レポート' subCaption='量で' decimalPrecision='0' showNames='1' numberSuffix=' Units' pieSliceDepth='30' formatNumberScale='0'>";<br />
<br />
<span class="codeComment">//Query to retrieve data about factory</span><br />
strQuery = "select * from Japanese_Factory_Master";<br />
<span class="codeComment">//Create the statement</span><br />
st1=oConn.createStatement();<br />
<span class="codeComment">//Execute the query</span><br />
rs1=st1.executeQuery(strQuery);<br />
<br />
String factoryId=null;<br />
String factoryName=null;<br />
String totalOutput="";<br />
<br />
while(rs1.next()) {<br />
factoryId=rs1.getString("FactoryId");<br />
byte[] b = rs1.getBytes("FactoryName");<br />
factoryName=new String (b, "UTF-8");<br />
<br />
<span class="codeComment"> //Now create second resultset to get details for this factory</span><br />
strQuery = "select sum(Quantity) as TotOutput from Factory_Output where FactoryId=" + factoryId;<br />
st2=oConn.createStatement();<br />
rs2 = st2.executeQuery(strQuery);<br />
if(rs2.next()){<br />
totalOutput=rs2.getString("TotOutput");<br />
}<br />
<span class="codeComment"> //Generate <set name='..' value='..'/> </span><br />
strXML += "<set name='" + factoryName + "' value='" +totalOutput+ "' />";<br />
try {<br />
if(null!=rs2){<br />
rs2.close();<br />
}<br />
}catch(java.sql.SQLException e){<br />
System.out.println("Could not close the resultset");<br />
}<br />
try{<br />
if(null!=st2) {<br />
st2.close();<br />
st2=null;<br />
}<br />
}catch(java.sql.SQLException e){<br />
System.out.println("Could not close the statement");<br />
}<br />
}<br />
<span class="codeComment">//Finally, close <graph> element</span><br />
strXML += "</graph>";<br />
<br />
try {<br />
if(null!=rs1){<br />
rs1.close();<br />
rs1=null;<br />
}<br />
}catch(java.sql.SQLException e){<br />
<span class="codeComment"> //do something</span><br />
System.out.println("Could not close the resultset");<br />
} <br />
try {<br />
if(null!=st1) {<br />
st1.close();<br />
st1=null;<br />
}<br />
}catch(java.sql.SQLException e){<br />
System.out.println("Could not close the statement");<br />
}<br />
try {<br />
if(null!=oConn) {<br />
oConn.close();<br />
oConn=null;<br />
}<br />
}catch(java.sql.SQLException e){<br />
System.out.println("Could not close the connection");<br />
}<br />
<br />
//Just write out the XML data<br />
//NOTE THAT THIS PAGE DOESN'T CONTAIN ANY HTML TAG, WHATSOEVER<br />
%><%=strXML%></p>
<p class="text">This code is similar to PieData.jsp seen in DBExample with dataURL method. There are some UTF-8 specific points to be noted here.<br />
If the XML data provider is a JSP, as in this case, then the output should follow this sequence:</p>
<ol>
<li> The jsp should output the BOM as shown in the following code:<br />
<% byte[] utf8Bom = new byte[]{(byte) 0xef, (byte) 0xbb, (byte) 0xbf};<br />
String utf8BomStr = new String(utf8Bom,"UTF-8");%><%=utf8BomStr%></li>
<li>Next, the xml declaration should be output: <?xml version='1.0' encoding='UTF-8'?></li>
<li>Finally, the xml data should be output</li>
</ol>
<p>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:</p>
<p class="codeBlock"><%@ page language="java" contentType="text/xml; charset=UTF-8"
pageEncoding="UTF-8"%></p>
<p>When we view the chart in the browser, it would look like this: </p>
<p> </p>
<p><img src="Images/Code_JapDBChart.jpg" class="imageBorder" /> </p>
<p class="highlightBlock">In <span class="codeInline">Download Package > Code > JSP > UTF8Example</span>, 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.</p>
</td>
</tr>
</table>
</body>
</html>
Mr. DellatioNx196 GaLers xh3LL Backd00r 1.0, Coded By Mr. DellatioNx196 - Bogor BlackHat