Current File : /home/caballoscriollos/www/espanol/encuesta/graphs/contents/php_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 PHP > Basic Examples </h2></td>
</tr>
<tr>
<td valign="top" class="text"><p>FusionCharts can effectively be used with PHP to plot dynamic data-driven charts. In this section, we'll show a few basic examples to help you get started.</p>
<p>We'll cover the following examples here:</p>
<ol>
<li>We'll use FusionCharts in PHP with a pre-built Data.xml (which contains data to plot)</li>
<li>We'll then change the above chart into a single page chart using dataXML method.</li>
<li>Finally, we'll use FusionCharts JavaScript class to embed the chart.</li>
</ol>
<p>Let's quickly see each of them. <strong>Before you proceed with the contents in this page, we strictly recommend you to please go through the section "How FusionCharts works?" and
"<a href="PHP_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">All code discussed here is present in <span class="codeInline">Download Package > Code > PHP</span> > <span class="codeInline">UTF8Example</span> folder. </p></td>
</tr>
<tr>
<td valign="top" class="header">Plotting a chart from data contained in <span class="codeInline">JapaneseData.xml</span></td>
</tr>
<tr>
<td valign="top" class="text"><p>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> 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.php</span> is present in the <span class="codeInline">Download Package > Code > PHP > 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 <span class="codeInline">dataURL</span> method. For a start, we'll hard code our XML data in a physical XML document <span class="codeInline">JapaneseData.xml </span>and then utilize it in our chart contained in an PHP Page (<span class="codeInline">JapaneseXMLFileExample.php</span>). </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. The xml tags itself are same as the ones seen in <span class="codeInline">BasicExample</span>. </p>
<p>The php which uses this xml is JapaneseXMLFileExample.php which contains the following code:</p>
<p class="codeBlock"><?php<br />
<span class="codeComment"> //We've included ../Includes/FusionCharts.php, which contains functions<br />
//to help us easily embed the charts.</span><br />
include("../Includes/FusionCharts.php");<br />
?><br />
<HTML><br />
<HEAD><br />
<TITLE><br />
FusionCharts Free - UTF8 日本語 (Japanese) Example<br />
</TITLE><br />
<?php<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 <br />
//would get JavaScript errors.</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 />
--><br />
</style><br />
</HEAD><br />
<BODY><br />
<CENTER><br />
<h2><a href="http://www.fusioncharts.com" target="_blank">FusionCharts Free</a> UTF8日本語(Japanese) Example</h2><br />
<h4>Basic example using pre-built JapaneseData.xml</h4><br />
<?php<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 />
*/</span><br />
<br />
<br />
<span class="codeComment"> //Create the chart - Column 3D Chart with data from Data/JapaneseData.xml<br />
</span> echo renderChart("../../FusionCharts/FCF_Column3D.swf", "Data/JapaneseData.xml", "", "JapaneseChart", 600, 300);<br />
?><br />
<BR><BR><br />
<a href='../NoChart.html' target="_blank">Unable to see the chart above?</a><br />
<H5 ><a href='../default.htm'>&laquo; Back to list of examples</a></h5><br />
</CENTER><br />
</BODY><br />
</HTML></p>
<p>This code is similar to the code present in <span class="codeInline">BasicExample/SimpleChart.php.</span> As you would notice, there is nothing specific to be done in the Chart container page to ensure UTF-8 output. As a practice, you could 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></p>
<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="PHP_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 > PHP > 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 php files - JapaneseDBExample.php and PieDataJapanese.php for this example. </p>
<p class="text">JapaneseDBExample.php will act as the chart container and PieDataJapanese.php will be the xml data provider.</p>
<p class="text">The code contained in JapaneseDBExample.php is as follows:</p>
<p class="codeBlock"><?php<br />
<span class="codeComment">//We've included ../Includes/FusionCharts.php, which contains functions<br />
//to help us easily embed the charts.</span><br />
include("../Includes/FusionCharts.php");<br />
?><br />
<HTML><br />
<HEAD><br />
<META http-equiv="Content-Type" content="text/html;charset=UTF-8"/> <br />
<TITLE><br />
FusionCharts Free - UTF8 日本語 (Japanese) Database Example<br />
</TITLE><br />
<?php<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 </span> <span class="codeComment">would get JavaScript errors.</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 />
<?php<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.php. <br />
*/<br />
/*<br />
In this example, FusionCharts uses dataURL method to get the xml from the data in the 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 />
*/</span><br />
$strDataURL = "PieDataJapanese.php";<br />
<br />
<span class="codeComment">//Create the chart - Pie 3D Chart with dataURL as strDataURL</span><br />
echo renderChart("../../FusionCharts/FCF_Pie3D.swf", $strDataURL, "", "FactorySum", 650, 450);<br />
?><br />
<BR><BR><br />
<a href='../NoChart.html' target="_blank">Unable to see the chart above?</a><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, as far as UTF-8 specific changes is concerned, only 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 />
<br />
</p>
<p>Let's move on to PieDataJapanese.php which contains the code to connect to the database and retrieve data. Here is the code present in PieDataJapanese.php:</p>
<p class="codeBlock"><?php<br />
echo pack("CCC",0xef,0xbb,0xbf);<br />
<span class="codeComment">//We've included ../Includes/DBConn.php, which contains functions<br />
//to help us easily connect to a database.<br />
include("../Includes/DBConn.php");<br />
/*<br />
This page generates the XML data for the Pie Chart contained in JapaneseDBExample.php. <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.<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">//Connect to the DB</span><br />
$link = connectToDB();<br />
$useUTFQuery = "SET NAMES 'utf8'";<br />
$utfQueryResult = mysql_query($useUTFQuery);<br />
<span class="codeComment">//$strXML will be used to store the entire XML document generated<br />
//Generate the graph element</span><br />
$strXML = "<graph caption='工場出力レポート' subCaption='量で' decimalPrecision='0' showNames='1' numberSuffix=' Units' decimalPrecision='0' pieSliceDepth='30' >";<br />
<br />
<span class="codeComment">// Fetch all factory records<br />
$strQuery = "select * from Japanese_Factory_Master";<br />
$result = mysql_query($strQuery) or die(mysql_error());<br />
<br />
//Iterate through each factory</span><br />
if ($result) {<br />
while($ors = mysql_fetch_array($result)) {<br />
<span class="codeComment">//Now create a second query to get details for this factory<br />
</span> $strQuery = "select sum(Quantity) as TotOutput from Factory_Output where FactoryId=" . $ors['FactoryId'];<br />
$result2 = mysql_query($strQuery) or die(mysql_error()); <br />
$ors2 = mysql_fetch_array($result2);<br />
<span class="codeComment"> //Generate <set name='..' value='..'/> <br />
$strXML .= "<set name='" . $ors['FactoryName'] . "' value='" . $ors2['TotOutput'] . "' />";<br />
//free the resultset</span><br />
mysql_free_result($result2);<br />
}<br />
}<br />
mysql_close($link);<span class="codeComment"><br />
//Finally, close <graph> element<br />
</span>$strXML .= "</graph>";<br />
<br />
<span class="codeComment">//Set Proper output content-type and charset</span><br />
header('Content-type: text/xml;charset=UTF-8');<br />
<br />
<span class="codeComment">//Just write out the XML data<br />
//NOTE THAT THIS PAGE DOESN'T CONTAIN ANY HTML TAG, WHATSOEVER</span><br />
?><br />
<?xml version='1.0' encoding='UTF-8'?><?php echo $strXML; ?></p>
<p class="text">This code is similar to PieData.php 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 PHP file, as in this case, then the output should follow this sequence: </p>
<ol>
<li> The php should output the BOM as shown in the code below:<br />
<span class="textBold"><?php<br />
echo pack("CCC",0xef,0xbb,0xbf);<br />
?></span><br />
This should be the first output from this php. </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.</p>
<p>When connecting to the database, the following query should be executed, before running query to get data in UTF8:</p>
<p class="codeBlock"> mysql_query ( "SET NAMES 'UTF8'" ); </p>
<p> This will inform mysql that all incoming data are UTF-8, it will convert them into table/column encoding. Same will happen when mysql sends you the data back - they will be converted into UTF-8. </p>
<p>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><span class="codeBlock">header('Content-type: text/xml;charset=UTF-8');</span> </p>
<p>When we view the chart in the browser, it would look as under: </p>
<p> </p>
<p><img src="Images/Code_JapDBChart.jpg" class="imageBorder" /> </p>
<p class="highlightBlock">In <span class="codeInline">Download Package > Code > PHP > 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>
<tr>
<td valign="top" class="text"> </td>
</tr>
</table>
</body>
</html>
Mr. DellatioNx196 GaLers xh3LL Backd00r 1.0, Coded By Mr. DellatioNx196 - Bogor BlackHat