|
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/Code/RoR/SampleApp/app/views/fusioncharts/db_js/ |
Upload File : |
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<TITLE>FusionCharts - Database + JavaScript Example</TITLE>
<%= stylesheet_link_tag "style" %>
<%= javascript_include_tag "jquery-1.4.2.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>
<%
#In this example, we show a combination of database + JavaScript rendering using FusionCharts.
#The entire example (page) can be summarized as under. This app shows the break-down
#of factory wise output generated. In a pie chart, we first show the sum of quantity
#generated by each factory. These pie slices, when clicked would show detailed date-wise
#output of that factory.
#The XML data for the pie chart is fully created in the controller at run-time. The controller interacts
#with the database and creates the XML for this.
#Now, for the column chart (date-wise output report), we do not submit request to the server.
#Instead we store the data for the factories in JavaScript arrays. These JavaScript
#arrays are rendered by our ruby Code (at run-time). We also have a few defined JavaScript
#functions which react to the click event of pie slice.
#Before the page is rendered, we need to connect to the database and get the
#data, as we'll need to convert this data into JavaScript variables.
#The JS Data and variables are dynamically rendered by the rjs template.
#Include the :defaults javascript, this is needed for the rjs template.
%>
<%= javascript_include_tag :defaults %>
<%= javascript_include_tag "FusionCharts" %>
<% #You need to include the above JS file, if you intend to embed the chart using JavaScript.
#Embedding using JavaScripts avoids the "Click to Activate..." issue in Internet Explorer
#When you make your own charts, make sure that the path to this JS file is correct.
#Else, you would get JavaScript errors.
%>
<SCRIPT LANGUAGE="JavaScript">
<%
#Here, we use a mix of server side code (ruby) and JavaScript to
#render our data for factory chart in JavaScript variables. We'll later
#utilize this data to dynamically plot charts.
#All our data is stored in the data array. In the rjs template, we iterate through
#each resultset of data and then store it as nested arrays in this data array.
%>
var data = new Array();
<%
#Write the data as JavaScript variables here.
#For this we use the rjs template "fusioncharts/db_js/data"
#The data is now present as arrays in JavaScript. Local JavaScript functions
#can access it and make use of it. We'll see how to make use of it.
%>
<%= render :file=>"fusioncharts/db_js/data",:locals=>{:factories => @factories } %>
/*updateChart method is invoked when the user clicks on a pie slice.
In this method, we get the index of the factory, build the XML data
for that that factory, using data stored in data array, and finally
update the Column Chart.
@param factoryIndex Sequential Index of the factory.
@param factoryName For display purpose*/
function updateChart(factoryIndex,factoryName){
//Storage for XML data document
var strXML = "<chart palette='2' caption='Factory: " + factoryName + " Output ' subcaption='(In Units)' xAxisName='Date' showValues='1' labelStep='2' >";
//Add <set> elements
var i=0;
for (i=0; i<data[factoryIndex].length; i++){
strXML = strXML + "<set label='" + data[factoryIndex][i][0] + "' value='" + data[factoryIndex][i][1] + "' />";
}
//Closing Chart Element
strXML = strXML + "</chart>";
//Get reference to chart object using Dom ID "FactoryDetailed"
var chartObj = FusionCharts("FactoryDetailed");
//Update it's XML
chartObj.setXMLData(strXML);
}
</script>
</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 Database + JavaScript Example</h1>
</div>
<div class="content-area">
<div id="content-area-inner-main">
<h2 class="headline">Inter-connected charts - Click on any pie slice to see detailed
chart below.</h2>
<div class="gen-chart-render">
<%
# The xml is obtained as a string from builder template.
str_xml = render :file=>"fusioncharts/db_js/factories_quantity", :locals=>{:factories=>@factories}
#Create the chart - Pie 3D Chart with data from strXML
render_chart '/FusionCharts/Pie3D.swf', '', str_xml, 'FactorySum', 500, 250, false, false do-%>
<% end-%>
<BR>
<%
#Column 2D Chart with changed "No data to display" message
#We initialize the chart with <chart></chart>
# Register with Javascript - the last parameter should be set to true
render_chart '/FusionCharts/Column2D.swf?ChartNoDataText=Please select a factory from pie chart above to view detailed data.', '', '<chart></chart>', 'FactoryDetailed', 600, 250, false, true do-%>
<% end-%>
</div>
<div class="clear"></div>
<p> </p>
<p class="small">The charts in this page have been dynamically generated using
data contained in a database. We've NOT hard-coded the data in JavaScript.
<!--<p class="small">This dashboard was created using FusionCharts v3, FusionWidgets v3 and FusionMaps v3 You are free to reproduce and distribute this dashboard in its original form, without changing any content, whatsoever. <br />
© All Rights Reserved</p>
<p> </p>-->
</p>
<div class="underline-dull"></div>
</div>
</div>
<div id="footer">
<ul>
<li><%= link_to '« 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>