|
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 : /proc/21585/root/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 Forms </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", "Using with data in Forms" ] ) );
</script>
<!-- breadcrumb ends here -->
<table width="98%" border="0" cellspacing="0" cellpadding="3" align="center">
<tr>
<td class="pageHeader">Charting Data from Forms </td>
</tr>
<tr>
<td valign="top" class="text"><p>In this section, we will show you how to use FusionCharts XT with Ruby to plot data collected from form. </p>
<p>We will build a simple restaurant sales example, where the user will enter the items sold by a restaurant in a given week. This data will be submitted in a form to the server. We will acquire this data and plot it on a chart. For the sake of simplicity, we will not process anything on this data. However, your real life applications might process data before presenting it on the chart. </p>
<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 > form_based_controller.rb</span>. <br/>
<span class="codeInline">Rhtml : Download Package > Code > RoR > SampleApp > app > views > fusioncharts > form_based</span> folder.
</p></td></tr>
<tr>
<td class="header">Building the Form</td></tr>
<tr>
<td valign="top" class="text">
<p class="text">The form is contained in default.html.erb and looks as under: </p>
<p class="text"><img src="../../guide-for-web-developers/Images/Code_Form.gif" width="445" height="387" class="imageBorder" /></p>
<p class="text">To display this form, we have defined an action default in the controller, <span class="codeInline">form_based_controller.rb. </span>There is no code in this action. It just renders the view (the form). </p>
<p class="text">Let us see the view.</p>
<pre class="code_container prettyprint"><html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>FusionCharts XT - Form Based Data Charting Example</title>
<%= stylesheet_link_tag "style" %>
<%= javascript_include_tag "jquery.min" %>
<%= javascript_include_tag "lib" %>
<%= javascript_include_tag "DD_belatedPNG_0.0.8a-min" %>
<!--[if IE 6]>
<script>
/* select the element name, css selector, background etc */
DD_belatedPNG.fix('img');
/* string argument can be any CSS selector */
</script>
<![endif]-->
<style type="text/css">
h2.headline {
font: normal 110%/137.5% "Trebuchet MS", Arial, Helvetica, sans-serif;
padding: 0;
margin: 25px 0 25px 0;
color: #7d7c8b;
text-align: center;
}
p.small {
font: normal 68.75%/150% Verdana, Geneva, sans-serif;
color: #919191;
padding: 0;
margin: 0 auto;
width: 664px;
text-align: center;
}
</style>
<%
#You need to include the following JS files,
#if you intend to embed the chart using JavaScript.
#When you make your own charts, make sure that the path
#to this JS file is correct. Else, you will get JavaScript errors.
%>
<%= javascript_include_tag "FusionCharts" %>
</head>
<body>
<div id="wrapper">
<div id="header">
<div class="back-to-home"><%= link_to 'Back to home', :controller=>'fusioncharts/index'%></div>
<div class="logo">
<a href="http://www.fusioncharts.com"><%= image_tag "fusionchartsv3.2-logo.png",
:width=>"131", :height=>"75", :alt=>"FusionCharts v3.2 logo" %></a>
</div>
<h1 class="brand-name">FusionCharts</h1>
<h1 class="logo-text">FusionCharts RoR Samples</h1>
</div>
<div class="content-area">
<div id="content-area-inner-main">
<h2 class="headline">FusionCharts Form-Based Data Example</h2>
<div class="gen-chart-render">
<p class='text'>Please enter how many items of each category you
sold within this week. We will plot this data on a Pie chart.</p>
<p class='text'>To keep things simple, we are not validating for
non-numeric data here. So, please enter valid numeric values only. In
your real-world applications, you can put your own validators.</p>
<% form_tag(:action=>'chart') do -%>
<table width='50%' align='center' cellpadding='2' cellspacing='1'
border='0' class='text'>
<tr>
<td width='50%' align='right'><B>Soups:</B> &nbsp;</td>
<td width='50%'><input type='text' size='5' name='Soups'
value='108'> bowls</td>
</tr>
<tr>
<td width='50%' align='right'><B>Salads:</B> &nbsp;</td>
<td width='50%'><input type='text' size='5' name='Salads'
value='162'> plates</td>
</tr>
<tr>
<td width='50%' align='right'><B>Sandwiches:</B> &nbsp;</td>
<td width='50%'><input type='text' size='5' name='Sandwiches'
value='360'> pieces</td>
</tr>
<tr>
<td width='50%' align='right'><B>Beverages:</B> &nbsp;</td>
<td width='50%'><input type='text' size='5' name='Beverages'
value='171'> cans</td>
</tr>
<tr>
<td width='50%' align='right'><B>Desserts:</B> &nbsp;</td>
<td width='50%'><input type='text' size='5' name='Desserts'
value='99'> plates</td>
</tr>
<tr>
<td width='50%' align='right'>&nbsp;</td>
<td width='50%'><input type='submit' value='Chart it!'></td>
</tr>
<table>
<% end -%>
</div>
<div class="clear"></div>
<p>&nbsp;</p>
<p class="small">
<p>&nbsp;</p>-->
</p>
<div class="underline-dull"></div>
</div>
</div>
<div id="footer">
<ul>
<li><%= link_to '&laquo; Back to list of examples', :controller=>'fusioncharts/index'%></li>
<li class="pipe">|</li>
<li><a href="/NoChart.html"><span>Unable to see the chart above?</span></a></li>
</ul>
</div>
</div>
</body>
</html></pre>
<p class="text">Here, we have used the <span class="codeInline">form_tag</span> ruby <span class="codeInline">form-helper</span> function to create the form and we have assigned the action <span class="codeInline">"chart"</span> to it. In this example, we have the form text fields hard-coded. In real-world, you will create the form based on some Model and use ruby form-helpers to create the form, the textfields, etc. What happens when you click on <span class="codeInline">Chart It</span> button? </p> </td></tr>
<tr>
<td class="header">Requesting the Data and Creating the Chart</td></tr>
<tr>
<td valign="top" class="text">
<p>The work of requesting the data from submitted form and creating the chart containing the following code: </p>
<pre class="code_container prettyprint"><b>Controller: Fusioncharts::FormBasedController
Action: chart
</b><span class="codeComment">#Data is obtained from the submitted form (present in the request)
#In this example, we are directly showing this data back on chart.
#In your apps, you can do the required processing and then show the
#relevant data only.
#The view for this action uses the "common" layout.</span>
def chart
response.content_type = Mime::HTML
<span class="codeComment"> # Get the values from the request using params[]</span>
<span class="codeComment"> </span>@str_soups = params[:Soups]
<span class="codeComment"> </span>@str_salads = params[:Salads]
<span class="codeComment"> </span>@str_sandwiches = params[:Sandwiches]
<span class="codeComment"> </span>@str_beverages = params[:Beverages]
<span class="codeComment"> </span>@str_desserts = params[:Desserts]
<span class="codeComment"> #The common layout is used only by this function in controller.</span>
<span class="codeComment"> </span>render (:layout => "layouts/common")
end
<b>View:</b>
<span class="codeComment"> </span><% @page_title=" FusionCharts - Form Based Data Charting Example " %>
<span class="codeComment"> </span><% @page_heading="FusionCharts Form-Based Data Example" %>
<span class="codeComment"> </span><% @page_subheading="Restaurant Sales Chart below" %>
<span class="codeComment"> </span><p class='text'>Click on any pie slice to see slicing effect. Or,
<span class="codeComment"> </span> right click on chart and choose "Enable Rotation", and then drag and
<span class="codeComment"> </span> rotate the chart.</p>
<span class="codeComment"> </span><%
<span class="codeComment"> # The xml is obtained as a string from builder template.</span>
<span class="codeComment"> </span>str_xml =render :file=>"fusioncharts/form_based/form_based_data",
:locals=>{:str_soups => @str_soups,
:str_salads => @str_salads,:str_sandwiches => @str_sandwiches,
:str_beverages => @str_beverages,:str_desserts => @str_desserts}
<span class="codeComment"> #Create the chart - Pie 3D Chart with data from str_xml</span>
render_chart '/FusionCharts/Pie3D.swf','',str_xml,'Sales', 500, 300, false, false do-%>
<span class="codeComment"> </span><% end -%>
<span class="codeComment"> </span><a href='javascript:history.go(-1);'>Enter data again</a> </pre>
<p>The controller action does the following:</p>
<ol>
<li> Gets the data submitted by the form from the request using params[...]</li>
<li>Stores them in global variables accessible to the view </li>
</ol>
<p class="text" >The view calls render function and gets the XML from the builder template <span class="codeInline">form_based_data</span> by passing the form data as parameters to it. Then it calls the <span class="codeInline">render_chart()</span> function to create a Pie chart, by passing the XML as parameter. </p>
<p class="text" >What does the builder do? Let's see.</p>
<pre class="code_container prettyprint" ><span class="codeComment"> # Builds xml for sales of various product categories
# of a Restaurant to be shown in form of a pie-chart.
# The values required here are received as parameters
# Expected parameters: str_soups,str_salads,str_sandwiches,str_beverages,str_desserts</span>
xml = Builder::XmlMarkup.new
<span class="codeComment"> </span> xml.chart(:caption=>'Sales by Product Category', :subCaption=>'For this week',
:showPercentValues=>'1', :pieSliceDepth=>'30', :showBorder=>'1') do
<span class="codeComment"> </span> xml.set(:label=>'Soups',:value=>str_soups)
<span class="codeComment"> </span> xml.set(:label=>'Salads',:value=>str_salads)
<span class="codeComment"> </span> xml.set(:label=>'Sandwiches',:value=>str_sandwiches)
<span class="codeComment"> </span> xml.set(:label=>'Beverages',:value=>str_beverages)
<span class="codeComment"> </span> xml.set(:label=>'Desserts',:value=>str_desserts)
end</pre>
<p class="text" >The builder builds the xml with outermost tag as the <span class="codeInline"><chart></span> element. Inside this, it puts the <span class="codeInline"><set></span> element. The attributes of the set tag are label and value. The values are picked from the parameters received from the view. That's it. Now, when you click the "<span class="codeInline">Chart it</span>" button, this is what you will see:</p> <p class="text" ><img src="../../guide-for-web-developers/Images/Code_FormChart.jpg" width="468" height="268" class="imageBorder" /></p></td>
</tr>
</table>
<!-- footer links starts-->
<div id="fcfooter"></div>
<script type="text/javascript">
document.getElementById("fcfooter").innerHTML = addFCFooter("Charting data from Array|Ruby_array.html","Plotting from database|Ruby_db.html");
</script>
<!-- footer links ends -->
<script type="text/javascript" language="javascript1.2">//<![CDATA[
<!--
highlightSearch();
//-->
//]]></script>
</body>
</html>