|
Server : Apache/2.2.17 (Unix) mod_ssl/2.2.17 OpenSSL/0.9.8e-fips-rhel5 DAV/2 PHP/5.2.17 System : Linux localhost 2.6.18-419.el5 #1 SMP Fri Feb 24 22:47:42 UTC 2017 x86_64 User : nobody ( 99) PHP Version : 5.2.17 Disable Function : NONE Directory : /home/queenjbs/www/FusionChart/Contents/Code/ROR/ |
Upload File : |
<?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>Using FusionCharts XT with ROR - UTF-8 Examples </title>
<link rel="stylesheet" href="../../assets/ui/css/style.css" type="text/css" />
<script type="text/javascript" src="../../assets/prettify/prettify.js"></script>
<link rel="stylesheet" type="text/css" href="../../assets/prettify/prettify.css" />
<script type="text/javascript" src="../../assets/ui/js/jquery.min.js" ></script>
<style type="text/css">
<!--
div.WebHelpPopupMenu { position:absolute;
left:0px;
top:0px;
z-index:4;
visibility:hidden; }
a.whtbtnhide, a.whtbtnshow, a.whtbtnhidenav , a.whtbtnshownav { border-bottom:none !important; }
-->
</style>
<script type="text/javascript" language="javascript1.2" src="../../assets/ui/js/whmsg.js"></script>
<script type="text/javascript" language="javascript" src="../../assets/ui/js/whver.js"></script>
<script type="text/javascript" language="javascript1.2" src="../../assets/ui/js/whproxy.js"></script>
<script type="text/javascript" language="javascript1.2" src="../../assets/ui/js/whutils.js"></script>
<script type="text/javascript" language="javascript1.2" src="../../assets/ui/js/whlang.js"></script>
<script type="text/javascript" language="javascript1.2" src="../../assets/ui/js/whtopic.js"></script>
<script type="text/javascript" src="../../assets/ui/js/lib.js"></script>
</head>
<body>
<!-- breadcrumb starts here -->
<div id="breadcrumb"></div>
<script type="text/javascript">
document.write( addFCBreadcrumb( [ "Home|../../Introduction/Overview.html", "Guide for web developers", "Using with Ruby on Rails|Ruby_basicexample.html", "UTF8 examples" ] ) );
</script>
<!-- breadcrumb ends here -->
<table width="98%" border="0" cellspacing="0" cellpadding="3" align="center">
<tr>
<td class="pageHeader">UTF-8 Examples </td>
</tr>
<tr>
<td valign="top" class="text"><p>In this section, we will show you how to use FusionCharts XT and Ruby to plot charts from data containing <strong>UTF-8 characters</strong>. Using the Data URL method we will do the following: </p>
<ul>
<li><a href="#column">Create a column3D chart to show the Monthly Sales with data from <strong>an XML file</strong>.</a></li>
<li><a href="#pie">Create a pie chart to show "Production by Factory" data from the <strong>database</strong>.</a></li>
</ul>
<p>We will use Japanese text in this example but you could extend it to any left-to-right language by applying the same procedure.</p>
<p><strong>Before you proceed with the contents in this page, we recommend you to go through the <a href="Ruby_basicexample.html">Basic Examples</a> section.</strong> </p>
<p class="highlightBlock">All code discussed here is present in
<span class="codeInline">Controller : <br/>
Download Package > Code > RoR > SampleApp > app > fusioncharts
> controllers > utf8_example_controller.rb</span>.
<span class="codeInline"><br>
View : Download Package > Code > RoR > SampleApp > app > views > fusioncharts > utf8_example</span> folder.
<span class="codeInline"><br>
View Helper Modules: Download Package > Code > RoR > SampleApp > lib > fusion_charts_helper.rb </span></p> </td></tr>
<tr>
<td class="header"><a name="column" id="column"></a>Plotting a chart with Japanese text from JapaneseData.xml</td>
</tr>
<tr>
<td valign="top" class="text">
<p>While using FusionCharts XT with UTF-8 characters, please remember the following:</p>
<ul>
<li>The Data URL method has to be used to get the XML.</li>
<li>BOM has to be present in the XML given as input to the chart. </li>
</ul>
</td>
</tr>
<tr>
<td valign="top" class="text"> </td></tr>
<tr><td class="header">Setting up the charts for use</td></tr>
<tr>
<td valign="top" class="text">
<p> In our code, we have used the charts contained in <span class="codeInline">Download Package > Code > RoR > SampleApp > public > 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 japanese_xmlfile_example action is present in the <span class="codeInline">Download Package > Code > RoR > public > Data</span> folder. </p>
<p>Let's now start building our first example. In this example, we will create a "Monthly Unit Sales" chart using the Data URL method. For a start, we will manually code our XML data in a physical XML document <span class="codeInline">JapaneseData.xml</span>, save it with UTF-8 encoding and then utilize it for our chart.</p>
<p class="text">Let's first have a look at the XML Data document:</p>
<pre class="code_container prettyprint">
<?xml version="1.0" encoding="UTF-8" ?>
<chart caption='月間販売' xAxisName='月' yAxisName='Units'
decimals='0' formatNumberScale='0'>
<set label='一月' value='462'/>
<set label='二月' value='857' />
<set label='三月' value='671' />
<set label='四月' value='494' />
<set label='五月' value='761'/>
<set label='六月' value='960' />
<set label='七月' value='629' />
<set label='八月' value='622' />
<set label='九月' value='376' />
<set label='十月' value='494' />
<set label='十一月' value='761' />
<set label='十二月' value='960' />
</chart></pre>
<p class="text"> Please notice, the caption, x-axisname and names of the months in the XML are in Japanese. </p>
<p class="text">Assuming that the Fusioncharts::Utf8ExampleController class has been created, we will define a function called japanese_xmlfile_example in this controller. The view used for this controller is the japanese_xmlfile_example.html.erb file. We will use the "common" layout for this view. It is important to have the <span class="codeInline"><meta></span> tag in the head section of the HTML with the charset defined as UTF-8 as shown below. This tag has been declared in the "common.html.erb" file, so that it is present in all the pages. </p>
<pre class="code_container prettyprint"><meta http-equiv="content-type" content="text/html; charset=utf-8" /> </pre>
<p class="text">The code in the controller and view are given below. </p>
<pre class="code_container prettyprint"><b>Controller: <b>Fusioncharts::Utf8ExampleController</b>
Action: japanese_xmlfile_example
</b><span class="style1">class Fusioncharts::Utf8ExampleController < ApplicationController</span>
<span class="codeComment">#This is an example showing Japanese characters on the chart.
#Here, we have used a pre-defined JapaneseData.xml (contained in /Data/ folder)
#This action uses the dataURL method of FusionCharts XT.
#A view with the same name japanese_xmlfile_example.html.erb is present
#and it is this view, which gets rendered with the layout "common".
#render_chart function from the helper is invoked to render the chart.
#The function itself has no code, all the work is done in the view.</span>
def japanese_xmlfile_example
#The common layout for this view
render(:layout => "layouts/common")
end<font color="blue">
</font><b>View: japanese_xmlfile_example</b><strong>.html.erb</strong>
<% @page_title="FusionCharts - UTF8 日本語 (Japanese) Example" %>
<% @page_heading="UTF8 日本語 (Japanese) Example" %>
<% @page_subheading="Basic example using data from pre-built JapaneseData.xml" %>
<%
<span class="codeComment">#Create the chart - Column 3D Chart with data from /Data/JapaneseData.xml</span>
render_chart "/FusionCharts/Column3D.swf", "/Data/JapaneseData.xml", "",
"JapaneseChart", 600, 300, false, false do-%>
<% end -%></pre>
<p class="text">The code in the controller action and the view page are similar to the basic example simple_chart action and its view simple_chart.html.erb. Only here, we have used some Japanese text. That is the effort involved in rendering UTF-8 characters on the chart! The chart with Japanese text will look as shown:</p>
<p class="text"><img src="../../guide-for-web-developers/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>
</td>
</tr>
<tr>
<td class="header"><a name="pie" id="pie"></a>Plotting a chart with Japanese text from the database</td>
</tr>
<tr>
<td valign="top" class="text">
<p>Let us now create a chart with UTF characters present in the database. For this we will modify the database and add table to contain the Japanese data. </p>
</td></tr>
<tr>
<td class="header">Database Configuration</td></tr>
<tr>
<td valign="top" class="text"> </td></tr>
<tr>
<td valign="top" class="text">
<ol>
<li>Please refer to <a href="Ruby_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 "create_utfexample_tables_data.sql" is present in the <span class="codeInline">Download Package > Code > RoR > SampleApp > 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_masters and french_factory_masters tables and insert sample data.</li>
</ol>
</td></tr>
<tr>
<td valign="top" class="text">
<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 an action japanese_dbexample, its .html.erb view, pie_data_japanese action and its corresponding pie_data_japanese view. </p>
<p>The code contained in the controller action, view page are as shown:</p>
<pre class="code_container prettyprint"><b>Controller: Fusioncharts::Utf8ExampleController
Action: japanese_dbexample
</b><span class="codeComment">#In this example, we show how to use UTF8 characters in FusionCharts XT by connecting to a database
#and using the dataURL method. Here, the XML data
#for the chart is generated in pie_data_japanese function.
#The function itself does not contain any specific code to handle UTF8 characters.
#NOTE: It's necessary to encode the dataURL if you have added parameters to it.</span>
<strong>def japanese_dbexample</strong>
@str_data_url = "/Fusioncharts/utf8_example/pie_data_japanese"
<span class="codeComment"> #The common layout for this view</span>
render(:layout => "layouts/common")
<strong>end</strong>
<span class="codeComment"># Finds all the factories.</span>
<span class="codeComment"># Factory name in japanese is obtained from JapaneseFactoryMaster.
# Content-type for its view is set to text/xml and charset to UTF-8.</span>
<strong>def pie_data_japanese
</strong> <span class="codeComment"># xml content with charset=utf-8</span>
response.content_type = Mime::XML
response.charset = "utf-8"
<span class="codeComment"> # Find all the factories</span>
@factories = Fusioncharts::JapaneseFactoryMaster.find(:all)
<strong>end</strong>
end
<b>View:</b><strong> japanese_dbexample.html.erb</strong>
<% @page_title="FusionCharts - UTF8 日本語 (Japanese) Database Example" %>
<% @page_heading=" - UTF8 日本語 (Japanese) Example With Data from Database" %>
<% @page_subheading="" %>
<%
<span class="codeComment">#Create the chart - Pie 3D Chart with dataURL as @str_data_url.</span>
render_chart '/FusionCharts/Pie3D.swf',@str_data_url,'','FactorySum', 650, 450, false, false do-%>
<% end -%>
<strong>View: pie_data_japanese.html.erb</strong>
<% str_xml = get_UTF8_BOM <span class="codeComment">#Function present in fusioncharts_helper library</span>
str_xml +="<?xml version='1.0' encoding='UTF-8'?>"
str_xml +="<chart caption='工場出力レポート' subCaption='数量面で' decimals='0'
showLabels='1' numberSuffix=' units' pieSliceDepth='30' formatNumberScale='0'>"
@factories.each do|factory|
str_xml += "<set label='"+factory.name+"' value='"+factory.total_quantity.to_s+"'/>"
end
str_xml+="</chart>"
<span class="codeComment">#Create the chart - Pie 3D Chart with data from str_xml</span>
%><%=str_xml%></pre>
<p class="text">The action japanese_db_example and its view japanese_db_example.html.erb are very similar to default action of <span class="text"><b>Fusioncharts::DbDataUrlController</b></span> and the corresponding default.html.erb view. Here we have used Japanese text for page heading, etc. There are no UTF specific changes that need to be done to this action and its view. Let's move on to the pie_data_japanese action and its view. In pie_data_japanese action, we have set the response header with right content-type and charset as shown:</p>
<pre class="code_container prettyprint">response.content_type = Mime::XML
response.charset = "utf-8"</pre>
<p class="text">
We have used the <span class="codeInline">JapaneseFactoryMaster</span> to find the factory names in Japanese. In the view pie_data_japanese.html.erb, we have built the xml as a string using <span class="codeInline">@factory_data</span> present in the controller. The steps followed in this page are:</p>
<ul>
<li> Call the function get_UTF8_BOM from fusioncharts_helper and store it in str_xml.</li>
<li>Append the XML declaration with encoding: <span class="codeInline"><?xml version="1.0" encoding="UTF-8" ?> </span>to str_xml.</li>
<li>Append the actual xml content starting with the <span class="codeInline"><chart></span> element. </li>
<li>Output str_xml which contains the UTF8 BOM, XML declaration with encoding and the actual xml data.
</li>
</ul>
<p>When we view the chart in the browser, it will look like this: </p>
<p><img src="../../guide-for-web-developers/Images/Code_JapDBChart.jpg" width="539" height="362" class="imageBorder" /> </p>
<p class="highlightBlock">In <span class="codeInline">Download Package > Code > RoR > SampleApp > app > controllers > fusioncharts > utf8_example_controller.rb</span>,
we have more example codes for French language too, which have not been explained here,
as they are similar in concept. You can directly see the code and get more insight into it. </p></td>
</tr>
</table>
<!-- footer links starts-->
<div id="fcfooter"></div>
<script type="text/javascript">
document.getElementById("fcfooter").innerHTML = addFCFooter("ROR, JavaScript & dataStr|Ruby_JS_xml.html","AJAX Examples|Ruby_AJAX.html");
</script>
<!-- footer links ends -->
<script type="text/javascript" language="javascript1.2">//<![CDATA[
<!--
highlightSearch();
//-->
//]]></script>
</body>
</html>