FusionCharts Documentation

Using FusionCharts with RoR - Creating Drill-down charts

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 under:

In this example, we'll extend this 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: dbexample_controller.rb
Action: basicdbexample

class DbexampleController < ApplicationController
def default
   oRs=''
   oRs2=''
   strQuery=''
   #strXML will be used to store the entire XML document generated
   strXML=''

   #We also keep a flag to specify whether we've to animate the chart or not.
   #If the user is viewing the detailed chart and comes back to this page, he shouldn't
   #see the animation again.
   animateChart=''
   animateChart = params["animate"]
   #Set default value of 1
   if animateChart==""
      animateChart = "1"
   end

   #Generate the chart element
   strXML = "<chart caption='Factory Output report' subCaption='By Quantity' pieSliceDepth='30' showBorder='1' formatNumberScale='0' numberSuffix=' Units' animation=' " + animateChart.to_s + "'>"

   #Iterate through each factory
   oRs = Factorymaster.find(:all)

   oRs.each do |recordset|
      #Now create second recordset to get details for this factory

      @oRs2 = Factoryoutput.find(:all,:conditions=>["FactoryId=?",recordset.FactoryId.to_s])
      recordcount = @oRs2.length
      count = 0
      quantity = 0
      while count < recordcount
         quantity = quantity + @oRs2[count][:Quantity].to_i
         count = count + 1
      end
   #puts quantity
   #Generate <set label='..' value='..' link='...'/>
   factoryid = ""
   @oRs2.each do |recordset2|
      if factoryid != recordset2.FactoryId
         strXML = strXML + "<set label='" + recordset.FactoryName + "' value='" + quantity.to_s + "' link='" + CGI.escape("/dbexample/detailed?FactoryId=" + recordset.FactoryId.to_s) + "'/>"
      end
      factoryid = recordset2.FactoryId
      end
   end
   #Finally, close <chart> element
   strXML = strXML + "</chart>"

   #Create the chart - Pie 3D Chart with data from strXML
   @chart1= renderChart("/FusionCharts/Pie3D.swf", "", strXML, "FactorySum", 600, 300, false, false)
end
end

View:
<HTML>
<HEAD>
   <TITLE> FusionCharts - Database and Drill-Down Example </TITLE>
   <SCRIPT LANGUAGE="Javascript" SRC="/FusionCharts/FusionCharts.js"></SCRIPT>
</HEAD>
<BODY>
   <%= @chart%>
</BODY>
</HTML>

As you can see in the code above, we're doing the following:

Include FusionCharts.js JavaScript class
Thereafter, we generate the XML data document by iterating through the recordset. We store the XML data in strXML variable. To each <set> element, we add the link attribute. We pass the factory id of the respective factory by appending it to the link. We finally URL Encode the link, which is a very important step.
Finally, we render the chart using renderChart() method and pass strXML as dataXML.

Let's now shift our attention to next page.

Controller: dbexample_controller.rb
Action: detailed

class DbexampleController < ApplicationController
def detailed
   #First, get the factory Id
   #Request the factory Id from Querystring
   fid = params["FactoryId"]
   oRs=''
   strQuery=''
   #strXML will be used to store the entire XML document generated
   strXML=''
   intCounter = 0
   #Generate the chart element string
   strXML = "<chart palette='2' caption='Factory " + fid.to_s + " Output '    subcaption='(In Units)' xAxisName='Date' showValues='1'    labelStep='2' >"
   #Now, we get the data for that factory
   factoryid = Factorymaster.find_by_FactoryId(fid.to_s)
   oRs = Factoryoutput.find(:all,:conditions=>["FactoryId=?",factoryid[:FactoryId]])
   oRs.each do |recordset|
     strXML = strXML + "<set label='" + recordset.DatePro.to_s + "' value='" + recordset.Quantity.to_s + "'/>"
   end
   strXML = strXML + "</chart>"
   #Create the chart - Column 2D Chart with data from strXML
   @chart1=renderChart("/FusionCharts/Column2D.swf", "", strXML, "FactoryDetailed", 600, 300, false, false)
end
end

View
<HTML>
<HEAD>
   <TITLE> FusionCharts - Database and Drill-Down Example </TITLE>
   <SCRIPT LANGUAGE="Javascript" SRC="/FusionCharts/FusionCharts.js"></SCRIPT>
</HEAD>
<BODY>
   <%= @chart1%>
</BODY>
</HTML>

In this page, we're:

Including FusionCharts.js JavaScript class
Requesting the factory id for which we've to show detailed data. This data was sent to us as querystring, as a part of pie chart link.
We get the requisite data for this factory from database and then convert it into XML using string concatenation.
Finally, we render a Column 2D chart using renderChart() method to show detailed data.

When you now run the app, you'll see the detailed page as under: