In our previous example, we had used FusionCharts to plot a chart using data stored in database. We'll now extend that example itself to create a drill-down chart which can show more information.
If you recall from previous example, we were showing the sum of factory output in a pie chart as below:

In this example, we'll extend the previous example, so that when a user clicks on a pie slice for a factory, he can drill down to see date wise production for that factory.
To set up the pie chart to enable links for drill-down involves just minor tweaking of our previous example. We basically need to add the link attribute for each <set> element.
Controller: Fusioncharts::DbExampleController
Action: default
def default
headers["content-type"]="text/html";
str_data_url = '';
@animate_chart = params[:animate]
if @animate_chart == ''
@animate_chart = '1'
end
factory_masters = FactoryMaster.find(:all)
@factory_data = []
factory_masters.each do |factory_master|
total = 0.0
factory_id = factory_master.id
factory_name = factory_master.name
factory_master.factory_output_quantities.each do |factory_output|
total = total + factory_output.quantity
end
str_data_url = "/Fusioncharts/db_example/detailed?"+CGI.escape("FactoryId="+factory_id.to_s)
@factory_data<<{:str_data_url=>str_data_url, :factory_name=>factory_name, :factory_output=>total}
end
end
View:
<% @page_title=" FusionCharts - Database and Drill-Down Example " %>
<% @page_heading=" FusionCharts Database and Drill-Down Example " %>
<% @page_subheading="Click on any pie slice to see detailed data." %>
<p class='text'>Or, right click on any pie to enable slicing or
rotation mode.</p>
<%
str_xml = render :file=>"fusioncharts/db_example/default_factories_quantity",:locals=>{:factory_data => @factory_data,:animate_chart=>@animate_chart}
render_chart '/FusionCharts/Pie3D.swf','', str_xml, 'FactorySum', 600, 300, false, false do-%>
<% end-%>
When compared to the previous example, the default action in this example, creates a link to the detailed action with FactoryId as parameter. This link is added as the third element of the hash for each factory.
The URL that is assigned to str_data_url is escaped using the CGI.escape function. Also, this action expects a parameter called "animate" from the request. This is assigned to the variable @animate_chart.
The view is similar to the basic_dbexample.html.erb seen in the previous example. Here the builder template used is default_factories_quantity.builder and we pass the factory_data array and animate_chart parameters to the builder.
The builder template used is as follows:
xml = Builder::XmlMarkup.new
xml.chart(:caption=>'Factory Output report', :subCaption=>'By Quantity', :pieSliceDepth=>'30', :showBorder=>'1', :formatNumberScale=>'0', :numberSuffix=>' Units', :animation=>animate_chart ) do
for item in factory_data
xml.set(:label=>item[:factory_name],:value=>item[:factory_output],:link=>item[:str_data_url])
end
end
Iterate through the array factory_data and use the values present in the hash. We add an attribute called link to the <set> tag, with value as the hash element str_data_url.
On clicking a pie slice, what happens? It goes to the detailed action of the Controller. Let us now generate the chart that will be shown on clicking a pie slice.
Controller: Fusioncharts::DbExampleController
Action: detailed
def detailed
headers["content-type"]="text/html";
@factory_id = params[:FactoryId]
@factory_data = []
factory_master = FactoryMaster. find(@factory_id)
factory_master.factory_output_quantities.each do |factory_output|
date_of_production = factory_output.date_pro
formatted_date = format_date_remove_zeroes(date_of_production)
quantity_number = factory_output.quantity
@factory_data<<{:date_of_production=>formatted_date,:quantity_number=>quantity_number}
end
end
View:
<% @page_title=" FusionCharts - Database and Drill-Down Example " %>
<% @page_heading=" FusionCharts Database and Drill-Down Example " %>
<% @page_subheading="Detailed report for the factory" %>
<%
str_xml = render :file=>"fusioncharts/db_example/factory_details", :locals=>{:factory_data=>@factory_data,:factory_id=>@factory_id}
render_chart '/FusionCharts/Column2D.swf', '', str_xml, 'FactoryDetailed', 600, 300, false, false do -%>
<% end-%>
<BR>
<a href='default?animate=0'>Back to Summary</a>
<BR>
The detailed action does the following:
- Gets the FactoryId from the request and stores in a variable @factory_id.
- Performs a find with the Model FactoryMaster for the id obtained from the previous step
- Iterates through the factory_output_quantities of this factory (Remember the hasMany relationship defined in the Model) and creates a hash with date of production (date_pro) and quantity_number (quantity_number ) as elements of the hash. The date_of_production is formatted to %d/%m format before putting in the hash. For this the function format_date_remove_zeroes from the application.rb is used (explained below)
- This hash is put into the array @factory_data.
This is the code for formatting date to dd/mm and removing the leading zeroes.
application.rb
def format_date_remove_zeroes(date_to_format)
date_num= date_to_format.strftime('%d').to_i
month_num = date_to_format.strftime('%m').to_i
formatted_date=date_num.to_s +"/"+month_num.to_s
end
The view detailed.html.erb calls the render function with the path to the builder factory_details, array factory_data and factory id as parameter. The resultant xml is assigned to the variable str_xml. Finally, it calls the render_chart function to chart a Column2D chart and passes the xml to it as dataXML parameter. What does the builder template factory_details do? Here is the code:
xml = Builder::XmlMarkup.new
xml.chart(:palette=>'2', :caption=>'Factory' + factory_id.to_s + ' Output ', :subcaption=>'(In Units)', :xAxisName=>'Date', :showValues=>'1', :labelStep=>'2') do
for item in factory_data
xml.set(:label=>item[:date_of_production],:value=>item[:quantity_number])
end
end
This is a simple xml with the outer <chart> element and <set> elements within it. The <set> element has label and value attributes. Date of production is set as the label and quantity is set as the value. These values are obtained from the array of hashes factory_data received as parameter.
Now, when you click on a pie slice, the page opens the following chart with details of the selected factory:

|