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

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

<% # 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-%>
<% #Column 2D Chart with changed "No data to display" message #We initialize the chart with # 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.', '', '', 'FactoryDetailed', 600, 250, false, true do-%> <% end-%>

 

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