<% #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. %>

FusionCharts Free Database + JavaScript Example

Inter-connected charts - Click on any pie slice to see detailed chart below.

The charts in this page have been dynamically generated using data contained in a database. We've NOT hard-coded the data in JavaScript.

<% # 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-%>
<% #Column 2D Chart with changed "No data to display" message #We initialize the chart with render_chart '/FusionCharts/FCF_Column2D.swf?ChartNoDataText=Please click on a pie slice above to view detailed data.', '', '', 'FactoryDetailed', 600, 300, false, false do-%> <% end-%>

Unable to see the charts above?
<%= link_to '« Back to list of examples', :controller=>'fusioncharts/index'%>