|
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 - AJAX 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", "AJAX Examples" ] ) );
</script>
<!-- breadcrumb ends here -->
<table width="98%" border="0" cellspacing="0" cellpadding="3" align="center">
<tr>
<td class="pageHeader">AJAX Examples </td>
</tr>
<tr>
<td valign="top" class="text"><p>In this section, we will use AJAX in Ruby on Rails and generate dynamic charts. We will do the following: </p>
<ul>
<li>Create a page which will contain two charts. The first chart, a pie chart, will list the factories and their total output and the second chart will show the details of factory in a column chart.</li>
<li>On clicking the pie slice from the first chart, the second chart updates to show the details of the selected factory. </li>
</ul>
<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 : Download Package > Code > RoR > SampleApp > app > fusioncharts
> controllers > ajax_example_controller.rb</span>.
<span class="codeInline">View : Download Package > Code > RoR > SampleApp > app > views > fusioncharts > ajax_example</span> folder.
<span class="codeInline">View Helper Modules: Download Package > Code > RoR > SampleApp > lib > fusion_charts_helper.rb </span></p>
</td></tr>
<tr>
<td class="header">Creating the page with factory names drop-down and initial chart</td></tr>
<tr>
<td valign="top" class="text">
<p>We will create a controller called <span class="codeInline">AjaxExampleController</span> with the action <span class="codeInline">default_factories_chart</span> for this page. </p>
<p class="text">The code in the controller and view are given below. </p>
<pre class="code_container prettyprint"><b>Controller: <b>Fusioncharts::AjaxExampleController</b>
Action: default_factories_chart</b>
<span class="style1">class Fusioncharts::AjaxExampleController < ApplicationController</span>
# The data for the first chart is obtained and this is used in the corresponding builder and view files
def default_factories_chart
response.content_type = Mime::HTML
@factories = Fusioncharts::FactoryMaster.find(:all)
if(@factories.size>0)
factory = @factories[0]
@ factory_id = factory.id # Default factory
factory = Fusioncharts::FactoryMaster.find(@factory_id)
@factory_name = factory.name
@factory_output_quantities = factory.factory_output_quantities
end
end
<b>View: default_factories_chart</b><strong>.html.erb</strong>
<%
#In this page, we will render two charts. The data for the first chart will be factories data from database
#The second chart will be shown when clicked a pie slice in the first chart.
#This chart will show the details of the clicked factory.<br>#The mechanism followed here, is as follows:
#Set the link attribute of the set element of the first chart's xml
#to updateChart javascript function.
#Pass the factory_id to this function as parameter.
#In the updateChart function, invoke the action factory_chart in ajax ( using jquery ).
#The response obtained from this action will be the object tag that can be used to render the chart.
#This response is written to the div named detailedChart. ( initially empty )
%>
<HTML>
<HEAD>
<TITLE>FusionCharts XT - Ajax Based Data Charting Example</TITLE>
<%= javascript_include_tag "FusionCharts" %>
<style type="text/css">
<!--
body {
font-family: Arial, Helvetica, sans-serif;
font-size: 12px;
}
.text{
font-family: Arial, Helvetica, sans-serif;
font-size: 12px;
}
-->
</style>
<SCRIPT LANGUAGE="JavaScript">
/**
* the updateChart method is invoked when the user clicks a pie slice.
* In this method, we get the index of the factory after which we request for XML data
* for that that factory from factory_chart action via ajax, and finally
* update the Column Chart.
* @param factoryIndex Sequential Index of the factory.
*/
function updateChart(factoryIndex){
var strURL = "factory_chart?factory_id=" + factoryIndex;
$.ajax({
type: "GET",
url: strURL,
success: function(msg){
$("#detailedChart").show().html(msg);
}
});
}
</SCRIPT>
</HEAD>
<BODY>
<CENTER>
<h4>Inter-connected charts - Click any pie slice to see the detailed chart below.</h4>
<p>The charts in this page have been dynamically generated using data contained in a database.</p>
<p>The detailed charts along with the dynamic data are received using AJAX.</p>
<%= render :partial=>"factory_sum_chart", :locals=>{:factories=> @factories} %>
<br/>
<div id="detailedChart" style="width:600px;height:300px;"></div>
<BR/><BR/>
<a href='/NoChart.html' target="_blank">Unable to see the chart above?</a>
<BR><h5><%= link_to '&laquo; Back to list of examples', :controller=>'fusioncharts/index'%></h5>
</CENTER>
</BODY>
</HTML></pre>
<p class="text">The following steps are carried out in the controller action:</p>
<ol>
<li>Find all the factories present in the database. This data is stored in <span class="codeInline">@factories</span>, which is used in the view to show a drop-down of factory names.</li>
<li>The first factory is taken as default factory. The ID, factory name and output quantities for this factory are stored in<span class="codeInline"> @factory_id, @factory_name</span> and<span class="codeInline"> @factory_output_quantities. </span>These values are used in the view, to show the chart. </li>
</ol>
<p class="text">Let us next, dissect the view page and see it part by part. </p>
<p>In order to show the chart, we will render a <span class="codeInline">partial _factory_sum_chart</span> passing it the factory id, name and output quantities. The partial renders the chart using <span class="codeInline">FusionChartsHelper</span> and the <span class="codeInline">factory_details</span> builder file. Here, we will not go into the details of the partial and the builder, since they are similar to those seen in <a href="Ruby_drill.html">Drill Down example </a>and other examples. The resulting chart is shown below:</p>
<p class="text"><img src="../../guide-for-web-developers/Images/Code_DB.jpg" class="imageBorder" /> </p>
<p class="text">On clicking a slice in the above pie chart, the chart with that factory's details should be shown below. For this, we will use AJAX. As seen in the above code, we have a div with id "detailedChart" where the factory details chart will be shown. Let us analyze the action and its output. We will come to the javascript code in a minute. The code for this action is:</p>
<pre class="code_container prettyprint"><b>Controller: <b>Fusioncharts::AjaxExampleController</b><br/>Action: factory_chart</b>
# This action is called from the javascript function updateChart via ajax
# Expects the request parameter factory_id. Finds the details for the requested factory
# This data is then used by the corresponding view.
# The view renders the chart using the object tag.
def factory_chart
@factory_id = params[:factory_id]
factory = Fusioncharts::FactoryMaster.find(@factory_id)
@factory_name = factory.name
@factory_output_quantities = factory.factory_output_quantities
end</pre>
<p class="text">In this action, the expected parameter is <span class="codeInline">factory_id</span>. A look-up is performed and the factory details for this ID are obtained. The factory_output_quantities of the factory is stored in <span class="codeInline">@factory_output_quantities</span>. This is passed to the builder <span class="codeInline">factory_details</span> via local parameter by the corresponding view <span class="codeInline">factory_chart.html.erb</span>. </p>
<p class="text">Note that this action is invoked via ajax in the updateChart JavaScript function.</p>
<p class="text">The view renders the chart using the FusionChartsHelper's <span class="codeInline">render_chart_html</span> function and the <span class="codeInline">factory_details</span> builder file. The code is as follows:</p>
<pre class="code_container prettyprint"><%
<span class="codeComment"> #This page is invoked from default action in controller. When the user clicks on a pie
#slice rendered by default.html.erb, the factoryId is passed as a parameter to detailed function
#in the controller. We need to get that factory id, get the information from database and then show
#a detailed chart.
# The xml is obtained as a string from builder template</span>.
str_xml = render :file=>"fusioncharts/db_example/factory_details",
:locals=>{:factory_id=> @factory_id,:factory_name=>@factory_name,:factory_output => @factory_output_quantities}
#Create the chart - Column 2D Chart with data from strXML
render_chart_html '/FusionCharts/Column2D.swf', '', str_xml, 'FactoryDetailed', 600, 300, false do -%>
<% end-%>
</pre>
<p class="text">As part of ajax response the complete object tag to render the chart is obtained. Let us focus on this javascript function now.</p>
<pre class="code_container prettyprint">function updateChart(factoryIndex){
var strURL = "factory_chart?factory_id=" + factoryIndex;
$.ajax({
type: "GET",
url: strURL,
success: function(msg){
$("#detailedChart").show().html(msg);
}
});
}</pre>
<p class="text">In this function, the following steps are performed:</p>
<ol>
<li>Getting the index of the factory as parameter </li>
<li>Requesting for object embed tag data with xml for selected factory from <span class="codeInline">factory_chart</span> action via ajax </li>
<li>Finally, updating the div containing column Chart.</li>
</ol>
<p>Note that the Ajax functionality is part of the FusionCharts JS files. </p>
<p>Our job is done. The chart will now get refreshed with details of the selected factory. In this example, we have seen how to use AJAX to update a chart when clicked on a slice in the pie chart.</p>
<p> This is just the beginning of what can be achieved with Ruby on Rails, AJAX and FusionCharts XT. Keep exploring!</p></td>
</tr>
</table>
<!-- footer links starts-->
<div id="fcfooter"></div>
<script type="text/javascript">
document.getElementById("fcfooter").innerHTML = addFCFooter("UTF8 Examples|Ruby_UTF8Example.html","Drill Down Charts - Simple Example|../../DrillDown/Simple.html");
</script>
<!-- footer links ends -->
<script type="text/javascript" language="javascript1.2">//<![CDATA[
<!--
highlightSearch();
//-->
//]]></script>
</body>
</html>