|
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 - Charting Data from an Array </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", "Charting data from Array" ] ) );
</script>
<!-- breadcrumb ends here -->
<table width="98%" border="0" cellspacing="0" cellpadding="3" align="center">
<tr>
<td class="pageHeader">Charting Data from an Array </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 contained in Ruby arrays. We will create the following charts using data contained in arrays:</p>
<ul>
<li><a href="#single">Single series</a></li>
<li><a href="#multi">Multi series</a></li>
</ul>
<p><strong>Before you go further with this page, we recommend you to please see the previous section <a href="Ruby_basicexample.html">Basic Examples</a> as we start off from concepts explained in that page. </strong></p>
<p class="highlightBlock">All code discussed here is present in <br/>
<span class="codeInline">Controller : Download Package > Code > RoR > SampleApp > app > controllers > fusioncharts > array_example_controller.rb</span>. <br/>
<span class="codeInline">Rhtml : Download Package > Code > RoR > SampleApp > app > views > fusioncharts > array_example</span> folder. </p></td></tr>
<tr>
<td class="header"><a name="single" id="single"></a>Single-series chart from arrays </td></tr>
<tr>
<td valign="top" class="text">
<p>Let us now plot a single-series chart from data contained in arrays. Take a look at the controller array_example_controller.rb and the view single_series.html.erb. Here is the code:</p>
<pre class="code_container prettyprint"><b>Controller: Fusioncharts::ArrayExampleController
Action: single_series</b><span class="codeComment">
# This controller class will show ways of generating chart by
# * using sales data of products with their names present in an array.
# * using sales data of products for current year and previous year with their names present in an array.
# * using sales figure and quantity sold in each quarter of a year of a product present in an array.
# * using sales information of two products in each quarter of a year present in an array .
# All the views related to this controller will use the "common" layout.
# As per the Ruby On Rails conventions, we have the corresponding views with the same name as the function name in the controller.</span>
class Fusioncharts::ArrayExampleController < ApplicationController
<span class="codeComment">#This is the layout which all functions in the controller make use of.</span>
layout "common"
<span class="codeComment"> #In this function, we plot a single series chart from data contained
#in an array. Each element in the array will have two values - first one for data label
#and the next one for data value.
#The sales data and product names for six products are stored in the array.
#These values in the array will be used by the builder to build an appropriate xml,
#which is then rendered by the corresponding view. </span>
def single_series
response.content_type = Mime::HTML
@arr_data = []
@arr_data << ['Product A','567500']
@arr_data << ['Product B','815300']
@arr_data << ['Product C','556800']
@arr_data << ['Product D','734500']
@arr_data << ['Product E','676800']
@arr_data << ['Product F','648500']
end <b>
View:</b>
<%
<span class="codeComment"># The following three variables are used in the "common" layout</span>
%>
<% @page_title=" FusionCharts XT- Array Example using Single Series Column 3D Chart " %>
<% @page_heading=" FusionCharts Examples " %>
<% @page_subheading="Plotting single series chart from data contained in Array." %>
<%
<span class="codeComment"> # The XML is obtained as a string from builder template.</span>
str_xml = render :file=>"fusioncharts/array_example/ss_array_data",:locals=>{:arr_data => @arr_data}
<span class="codeComment">#Create the chart - Column 3D Chart with data contained in str_xml</span>
render_chart '/FusionCharts/Column3D.swf', '', str_xml, 'productSales', 600, 300, false, false do-%>
<% end -%></pre>
<p class="text">Here are the steps:</p> <ol>
<li>In the controller, define an array. Each element in this array, is itself an array (simulating a two dimensional array) containing the product name and sales value. We have constructed the array by pushing values into it for Product A to Product F and the corresponding sales value. </li>
<li> Write the builder template to create an XML based on array values. (as shown below) </li>
<li>In the view, we render the builder XML and assign it to a variable. Finally we call the <span class="codeInline">render_chart</span> function with the appropriate parameters including <span class="codeInline">str_xml</span> as the XML. </li>
</ol></td></tr>
<tr>
<td valign="top" class="text"> </td></tr>
<tr>
<td valign="top" class="text">
<pre class="code_container prettyprint"><b>Builder - ss_array_data.builder</b>
<span class="codeComment">#Creates xml with values for sales data of products
#along with their names.
#The values required for building the xml is obtained as parameter arr_data
#It expects an array in which each element is
#itself an array with first element as label and second element as value</span>
xml = Builder::XmlMarkup.new
xml.chart(:caption=>'Sales by Product', :numberPrefix=>'$', :formatNumberScale=>'0') do
for item in arr_data
xml.set(:label=>item[0], :value=>item[1])
end
end</pre>
<p>
This is a simple chart xml with outermost
<span class="codeInline"><chart></span> tag, <span class="codeInline"><set></span> tag inside it with attributes <span class="codeInline">label</span> and <span class="codeInline">value</span>. To build the <span class="codeInline"><set></span> tags, we iterate through the array obtained as parameter from the view.</p> <p class="text">When you view the chart, you will see a chart as under: </p> <p class="text"><img src="../../guide-for-web-developers/Images/Code_ArraySS.jpg" width="584" height="287" class="imageBorder" /> </p>
</td></tr>
<tr>
<td class="header"><a name="multi" id="multi"></a>Multi-series chart from arrays</td>
</tr>
<tr>
<td valign="top" class="text">
<p>The code to create a multi series chart can be listed as under: </p>
<pre class="code_container prettyprint"><b>Controller: Fusioncharts::ArrayExampleController
Action: multi_series
</b><span class="codeComment">#In this function, we plot a multi-series chart from data contained
#in an array. Each element in the array will have three values - first one for data label (product)
#and the next one store sales information
#for current year and the last one stores sales information for previous year.
#The sales data and product names for six products are thus, stored.
#These values in the array will be used by the builder to build an appropriate XML,
#which is then rendered by the corresponding view. </span><b>
</b>def multi_series
response.content_type = Mime::HTML
@arr_data = []
@arr_data << ['Product A','567500','547300']
@arr_data << ['Product B','815300','584500']
@arr_data << ['Product C','556800','75400']
@arr_data << ['Product D','734500','456300']
@arr_data << ['Product E','676800','754500']
@arr_data << ['Product F','648500','437600']
end
<b>View:
</b><%
<span class="codeComment"># The following three variables are used in the "common" layout</span>
%>
<% @page_title=" FusionCharts - Array Example using Multi Series Column 3D Chart " %>
<% @page_heading=" FusionCharts Examples " %>
<% @page_subheading="Plotting multi-series chart from data contained in Array." %>
<%<b>
</b><span class="codeComment"># The XML is obtained as a string from builder template.</span><b>
</b>str_xml = render :file=>"fusioncharts/array_example/ms_array_data",:locals=>{:arr_data => @arr_data}<b></b>
<span class="codeComment">#Create the chart - MS Column 3D Chart with data contained in str_xml</span>
render_chart '/FusionCharts/MSColumn3D.swf', '', str_xml, 'productSales', 600, 300, false, false do-%>
<% end -%> </pre>
<p class="text">Steps involved: </p>
<ol>
<li>The controller code is very simple. We store the sales of six products in an array. For each product we store the name, sales in the current year and previous year in another array and append this array into the outer array. </li>
<li>The view is similar to the single_series view that we had seen previously. We render the XML using the builder file <span class="codeInline">ms_array_data.builder </span>and assign it to a variable <span class="codeInline">str_xml</span>. This XML is passed to <span class="codeInline">render_chart</span> as parameter.</li>
<li>The builder template contains the logic of creating the categories, dataset elements as described below.</li>
</ol></td></tr>
<tr>
<td valign="top" class="text"> </td></tr>
<tr>
<td valign="top" class="text">
<pre class="code_container prettyprint"><b>Builder: ms_array_data.builder
</b><span class="codeComment">#Creates xml with values for sales data of products
#for the current year and the previous year.
#The values required for building the xml is obtained as parameter arr_data
#It expects an array in which each element is
#itself an array with first element as label, second element as current year sales value
#and third element as previous year value</span>
xml = Builder::XmlMarkup.new
xml.chart(:caption=>'Sales by Product', :numberPrefix=>'$', :formatNumberScale=>'1',
:rotateValues=>'1', :placeValuesInside=>'1', :decimals=>'0') do
<span class="codeComment"># Iterate through the array to create the <category> tags within <categories></span>
xml.categories do
for item in arr_data
xml.category(:name=>item[0])
end
end
<span class="codeComment"> # Iterate through the array to create the <set> tags within dataset for series 'Current Year'</span>
xml.dataset(:seriesName=>'Current Year') do
for item in arr_data
xml.set(:value=>item[1])
end
end
<span class="codeComment"> # Iterate through the array to create the <set> tags within dataset for series 'Previous Year'</span>
xml.dataset(:seriesName=>'Previous Year') do
for item in arr_data
xml.set(:value=>item[2])
end
end
end </pre>
<p class="text">Now when you view the chart in the browser, you will see:</p>
<p class="text"><img src="../../guide-for-web-developers/Images/Code_ArrayMS.jpg" class="imageBorder"> </p>
<p class="highlightBlock">In <span class="codeInline">Download Package > Code > RoR > app > controllers > fusioncharts > array_example_controller.rb</span>,
we have more example codes to create Stacked and Combination Charts 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("Using with Ruby on Rails|Ruby_basicexample.html","Using with data in forms|Ruby_form.html");
</script>
<!-- footer links ends -->
<script type="text/javascript" language="javascript1.2">//<![CDATA[
<!--
highlightSearch();
//-->
//]]></script>
</body>
</html>