|
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 - Creating Drill-down charts </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", "Creating Drill down charts" ] ) );
</script>
<!-- breadcrumb ends here -->
<table width="98%" border="0" cellspacing="0" cellpadding="3" align="center">
<tr>
<td class="pageHeader">Creating Drill-down charts </td>
</tr>
<tr>
<td valign="top" class="text"><p>In our previous example, we had used FusionCharts XT to plot a chart using data stored in database. We will now extend that example itself to create a drill-down chart which can show more information.</p>
<p>If you recall from previous example, we were showing the sum of factory output in a pie chart as below: </p>
<p><img src="../../guide-for-web-developers/Images/Code_DB.jpg" class="imageBorder" /></p>
<p>In this example, we will extend the previous example, so that when users click a pie slice for a factory, they can drill down to see date wise production for that factory. </p>
</td></tr>
<tr>
<td class="header">Setting up the pie chart for Link</td>
</tr>
<tr>
<td valign="top" class="text">
<p>To set up the pie chart to enable links for drill-down involves just minor tweaking of our previous example<span class="codeInline">.</span> We basically need to add the link attribute for each<span class="codeInline"> <set> </span>element<span class="codeInline">. </span></p>
<pre class="code_container prettyprint"><b>Controller: Fusioncharts::DbExampleController
Action: default </b> <font color="blue"> </font>
<span class="codeComment">#This action retrieves the factory data, sets the default value
#of @animate_chart to 1 if ":animate" is not present in the request.
#The view for this action default.html.erb will use the array values to construct the
#xml for this chart. To build the xml, the view takes help from
#the builder file (default_factories_quantity.builder)</span>
def default
response.content_type = Mime::HTML
@animate_chart = params[:animate]
if @animate_chart.nil? or @animate_chart.empty?
@animate_chart = '1'
end
<span class="codeComment"> #Get data from factory masters table</span>
@factories = Fusioncharts::FactoryMaster.find(:all)
end
<b>View</b>:
<% @page_title=" FusionCharts XT - Database and Drill-Down Example " %>
<% @page_heading=" FusionCharts XT Database and Drill-Down Example " %>
<% @page_subheading="Click on any pie slice to see detailed data." %>
<p class='text'>Or, right click on any pie to enable slicing or
rotation mode.</p>
<%
<span class="codeComment"># The XML is obtained as a string from builder template.</span>
str_xml = render :file=>"fusioncharts/db_example/default_factories_quantity",
:locals=>{:factories => @factories,:animate_chart=>@animate_chart}
<span class="codeComment">#Create the chart - Pie 3D Chart with data from strXML</span>
render_chart '/FusionCharts/Pie3D.swf','', str_xml,
'FactorySum', 600, 300, false, false do-%>
<% end-%> </pre>
<p class="text"> This action expects a parameter called "animate" from the request. This is assigned to the variable @animate_chart. The controller finds the data and stores it in <span class="codeInline">@factories</span>. </p>
<p class="text">The view is similar to the basic_dbexample.html.erb seen in the previous example, except here it passes the parameter animate_chart also in the locals hash. Here the builder template used is <span class="codeInline">default_factories_quantity.builder </span>and we pass the factories' data and animate_chart parameters to the builder. </p>
<p class="text">The builder template used is as follows:</p>
<pre class="code_container prettyprint">#Creates xml with values for Factory Output
#along with their names and a link to detailed action for each factory.
#It uses the factories parameter from locals hash.
#This data is used for building xml for chart with factory name and total output.
#Constructs the data URL for the chart which will come up on clicking on the pie slice.
xml = Builder::XmlMarkup.new
xml.chart(:caption=>'Factory Output report', :subCaption=>'By Quantity',
:pieSliceDepth=>'30', :showBorder=>'1', :formatNumberScale=>'0',
:numberSuffix=>' Units', :animation=>animate_chart ) do
factories.each do |factory|
<strong> str_data_url = "/Fusioncharts/db_example/detailed/"+factory.id.to_s</strong>
xml.set(:label=>factory.name,:value=>factory.total_quantity<strong>,:link=>str_data_ur</strong>l)
end
end</pre>
<p>Iterate through each factory and use the name and total quantity values. We add an attribute called link to the <span class="codeInline"><set> </span>tag, with value as <span class="codeInline">str_data_url</span>. This link <span class="codeInline">str_data_url</span> is the path to the detailed action with id of the factory. </p>
<p>On clicking a pie slice, what happens? It goes to the detailed action of the Controller. Let us now generate the chart that will be shown on clicking a pie slice.</p>
</td></tr>
<tr>
<td class="header">Creating the detailed data chart page</td>
</tr>
<tr>
<td valign="top" class="text"> </td>
</tr>
<tr>
<td valign="top" class="text">
<pre class="code_container prettyprint"><b>Controller: Fusioncharts::DbExampleController
Action: detailed</b>
<span class="codeComment">#This action retrieves the factory data for the given "id" parameter
#The view for this action is detailed.html.erb and it uses the builder file
#factory_details.builder to build the xml for the column chart.</span>
def detailed
response.content_type = Mime::HTML
@factory_id = params[:id]
factory = Fusioncharts::FactoryMaster.find(@factory_id)
@factory_output_quantities = factory.factory_output_quantities
end
<b>View:
</b><% @page_title=" FusionCharts XT - Database and Drill-Down Example " %>
<% @page_heading=" FusionCharts XT Database and Drill-Down Example " %>
<% @page_subheading="Detailed report for the factory" %>
<%
<span class="codeComment">#This page is invoked from default action in controller.
#When the user clicks 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_output=>@factory_output_quantities,:factory_id=>@factory_id}
<span class="codeComment">#Create the chart - Column 2D Chart with data from strXML</span>
render_chart '/FusionCharts/Column2D.swf', '', str_xml,
'FactoryDetailed', 600, 300, false, false do -%>
<% end-%>
<BR>
<a href='/fusioncharts/db_example/default?animate=0'>Back to Summary</a>
<BR></pre>
<p class="text">The <span class="codeInline">detailed</span> action does the following: </p>
<ol>
<li>Gets the <span class="codeInline">id</span> from the request and stores in a variable @factory_id.</li>
<li>Performs a find with the Model <span class="codeInline">FactoryMaster</span> for the ID obtained from the previous step.</li>
<li>Stores the factory_output_quantities from the FactoryMaster in the variable @factory_output_quantities.<br class="text">
</li>
</ol>
<p> The view detailed.html.erb calls the render function with the path to the builder <span class="codeInline">factory_details</span>, factory_output and factory ID as parameter. The resultant XML is assigned to the variable <span class="codeInline">str_xml</span>. Finally, it calls the <span class="codeInline">render_chart()</span> function to chart a Column2D chart and passes the xml to it as <span class="codeInline">dataXML</span> parameter. What does the builder template <span class="codeInline">factory_details</span> do? Here is the code:</p>
<pre class="code_container prettyprint"><span class="codeComment">#Creates xml with values for date of production and quantity for a particular factory
#It uses the factory_output parameter from locals hash.
#This data is used for building xml for chart with date of production and output quantity.</span>
xml = Builder::XmlMarkup.new
xml.chart(:palette=>'2', :caption=>'Factory' + factory_id.to_s + ' Output ',
:subcaption=>'(In Units)', :xAxisName=>'Date', :showValues=>'1', :labelStep=>'2') do
factory_output.each do |output|
xml.set(:label=<strong>>output.formatted_dat</strong>e,:value=<strong>>output.quantit</strong>y)
end
end
</pre>
<p>This is a simple xml with the outer <span class="codeInline"><chart></span> element and <span class="codeInline"><set> </span>elements within it. The<span class="codeInline"> <set></span> element has <span class="codeInline">label</span> and <span class="codeInline">value </span>attributes. Date of production is set as the label and quantity is set as the value. These values are obtained from the array of hashes factory_data received as parameter.</p>
<p>Following code for formatting date to dd/mm and removing the leading zeroes is present in Fusioncharts::FactoryOutputQuantity model.</p>
<pre class="code_container prettyprint"><strong>Fusioncharts::FactoryOutputQuantity
</strong><span class="codeComment"># Formats the date to dd/mm without leading zeroes</span>
def formatted_date
date_num= date_pro.strftime('%d').to_i
month_num = date_pro.strftime('%m').to_i
result_date=date_num.to_s+"/"+month_num.to_s
return result_date
end</pre>
<p>Now, when you click a pie slice, the page opens the following chart with details of the selected factory: </p>
<p><img src="../../guide-for-web-developers/Images/Code_Drill.jpg" width="596" height="292" class="imageBorder" /></p></td>
</tr>
</table>
<!-- footer links starts-->
<div id="fcfooter"></div>
<script type="text/javascript">
document.getElementById("fcfooter").innerHTML = addFCFooter("Plotting from database|Ruby_db.html","ROR, JavaScript & dataURL|Ruby_JS_url.html");
</script>
<!-- footer links ends -->
<script type="text/javascript" language="javascript1.2">//<![CDATA[
<!--
highlightSearch();
//-->
//]]></script>
</body>
</html>