<HTML>
	<HEAD>
		<TITLE>FusionCharts - Database + JavaScript Example</TITLE>

				<%= 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">
				
				/** 
				 * updateChart method is invoked when the user clicks on 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 FactoryData.asp, and finally
				 * update the Column Chart.
				 *	@param	factoryIndex	Sequential Index of the factory.
				*/		
				function updateChart(factoryIndex){		
					//DataURL for the chart
					var strURL = "/Fusioncharts/db_js_dataurl/factory_details?factoryId=" + factoryIndex;
					
					//Sometimes, the above URL and XML data gets cached by the browser.
					//If you want your charts to get new XML data on each request,
					//you can add the following line:
					//strURL = strURL + "&currTime=" + getTimeForURL();
					//getTimeForURL method is defined below and needs to be included
					//This basically adds a ever-changing parameter which bluffs
					//the browser and forces it to re-load the XML data every time.
								
					//URLEncode it - NECESSARY.
					strURL = escape(strURL);
					
					//Get reference to chart object using Dom ID "FactoryDetailed"
					var chartObj = getChartFromId("FactoryDetailed");			
					//Send request for XML
					chartObj.setDataURL(strURL);
				}
				/**
				 * getTimeForURL method returns the current time 
				 * in a URL friendly format, so that it can be appended to
				 * dataURL for effective non-caching.
				*/
				function getTimeForURL(){
					var dt = new Date();
					var strOutput = "";
					strOutput = dt.getHours() + "_" + dt.getMinutes() + "_" + dt.getSeconds() + "_" + dt.getMilliseconds();
					return strOutput;
				}
			</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>
			<h2>FusionCharts Database + JavaScript (dataURL method) Example</h2>
			<h4>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.</p>
			<%
						
				# The xml is obtained as a string from builder template.
				str_xml = render :file=>"fusioncharts/db_js_dataurl/factories_quantity", :locals=>{:factory_data=>@factory_data}
			
				#Create the chart - Pie 3D Chart with data from str_xml
				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>
			
				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 -%>
			<BR>
			<BR>
			<a href='/NoChart.html' target="_blank">Unable to see the charts above?</a>
	            <BR><h5><%= link_to '&laquo; Back to list of examples', :controller=>'fusioncharts/index'%></h5>
			</CENTER>
	</BODY>
</HTML>
