<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 '&laquo; Back to list of examples', :controller=>'fusioncharts/index'%></h5>
	</CENTER>
	</BODY>
</HTML>
