default.html.erb
来自「FusionCharts 是一个免费的图形显示组件」· ERB 代码 · 共 127 行
ERB
127 行
<HTML>
<HEAD>
<TITLE>FusionCharts Free - Client Side Dynamic Chart (using Database) Example</TITLE>
<%
#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_var_string will contain the JS Data and variables.
#This string will be built in the controller and rendered at run-time as JavaScript.
%>
<%= 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 controller, 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
#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.
%>
<%= @js_var_string %>
<% #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.
%>
/**
* 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 Name of the factory.
*/
function updateChart(factoryIndex,factoryName){
//defining array of colors
//We also initiate a counter variable to help us cyclically rotate through
//the array of colors.
var FC_ColorCounter=0;
var arr_FCColors= new Array("1941A5" , "AFD8F8", "F6BD0F", "8BBA00", "A66EDD", "F984A1", "CCCC00", "999999", "0099CC", "FF0000", "006F00", "0099FF", "FF66CC", "669966", "7C7CB4", "FF9933", "9900FF", "99FFCC", "CCCCFF", "669900");
//Storage for XML data document
var strXML = "<graph caption='" + factoryName + " Output ' subcaption='(In Units)' xAxisName='Date' decimalPrecision='0'>";
//Add <set> elements
var i=0;
for (i=0; i<data[factoryIndex].length; i++){
strXML = strXML + "<set name='" + data[factoryIndex][i][0] + "' value='" + data[factoryIndex][i][1] + "' color='"+ arr_FCColors[++FC_ColorCounter % arr_FCColors.length] +"' />";
}
//Closing graph Element
strXML = strXML + "</graph>";
//Update it's XML
updateChartXML("FactoryDetailed",strXML);
}
</SCRIPT>
<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>
</HEAD>
<BODY>
<CENTER>
<h3><a href="http://www.fusioncharts.com" target="_blank">FusionCharts Free</a> Database + JavaScript Example</h2>
<h5>Inter-connected charts - Click on any pie slice to see detailed
chart below.</h4>
<p>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>
<%
# The xml is obtained as a string from builder template.
str_xml = render "fusioncharts/db_js/factories_quantity", {:factory_data=>@factory_data}
#Create the chart - Pie 3D Chart with data from strXML
render_chart '/FusionCharts/FCF_Pie3D.swf', '', str_xml, 'FactorySum', 650, 300, false, false do-%>
<% end-%>
<BR>
<%
#Column 2D Chart with changed "No data to display" message
#We initialize the chart with <chart></chart>
render_chart '/FusionCharts/FCF_Column2D.swf?ChartNoDataText=Please click on a pie slice above to view detailed data.', '', '<graph></graph>', 'FactoryDetailed', 600, 300, false, false do-%>
<% end-%>
<BR>
<BR>
<a href='/NoChart.html' target="_blank">Unable to see the charts above?</a>
<BR><h5><%= link_to '« Back to list of examples', :controller=>'fusioncharts/index'%></h5>
</CENTER>
</BODY>
</HTML>
⌨️ 快捷键说明
复制代码Ctrl + C
搜索代码Ctrl + F
全屏模式F11
增大字号Ctrl + =
减小字号Ctrl + -
显示快捷键?