Creating a Drill-down Chart

Assume that you have a fusioncharts_sample database that stores the population of all countries in the world, in the Country table, and the population of all cities in each country, in the City table.

Using this data, you want to plot a column 2D chart showing the top 10 most populous countries in the world. Furthermore, you want to render this column 2D chart as a drill-down chart, where clicking each data plot shows another chart plotting the top 10 populous cities of that country.

You can download this database from the MYSQL website or refer to the sample database available here.

The column 2D chart, with the drill-down functionality, that we need to render here looks like this:

FusionCharts will load here..

The data structure needed to create the above chart goes into the app/controllers/examples_controller.rb file. It is as given below:

# Example to demonstrate the creation of a drill - down chart by fetching data from a database.# The `country`actionisdefinedtoloadthebasecolumn2Dchart—theonethatshowsthetop# 10 populous countries and has clickable data plots.# It fetches the country list from the * * Country * * table and then prepares the data in# a format compatible with FusionCharts.defcountry# The `select`queryisusedtoretrievethename,population,andcountrycodeofthe10# countries having the highest population, in descending order.countries=Country.select(:name,:population,:code).order(population::desc).limit(10)top_ten_populous_countries=[]# Iterate through the list of countries in the database and create an array of hashes that# stores the labelforeachcountrydataplotanditspopulationvalue.#The hash also stores the drill - down linkforthecitychartcorrespondingtoeachcountry# data plot.countries.eachdo|country|top_ten_populous_countries.push({:label=>country.name,:value=>country.population,:link=>"#{example_drilldown_path}/#{country.code}"})end# Create a new FusionCharts instance that initializes the chart height, width, type, container div# id, data source, and the data format@chart=Fusioncharts::Chart.new({:height=>400,:width=>600,:type=>'column2d',:renderAt=>'chart-container',# Chart data is passed to the `dataSource`parameter,ashashes,intheformof# key - value pairs.:dataSource=>{:chart=>{:caption=>'Top 10 Most Populous Countries',:xAxisname=>'Quarter',:yAxisName=>'Amount ($)',:numberPrefix=>'$',:theme=>'fint',},# The data in the array of hashes is now stored in the `top_ten_populous_countries`# variable in the FusionCharts consumable format.:data=>top_ten_populous_countries}})end# The `drilldown` action is defined to load the chart with the drill - down functionality.# It fetches the list of cities from the * * City * * table, based on the country selected in the# base chart.# It then prepares the data in a format compatible with FusionCharts.defdrilldown# The `select` query is used to retrieve the name and population of the top ten cities# based on the country code for the selected country, in descending order.cities=City.select(:name,:population).where(:countrycode,params[:id]).order(population::desc).limit(10)top_ten_populous_cities=[]# Iterate through the list of cities in the database and create an array of hashes that# stores the labelforeachcitydataplotandtheitspopulationvalue.cities.eachdo|city|top_ten_populous_cities.push({:label=>city.name,:value=>city.population})end# Create the FusionCharts object in the controller action.@chart=Fusioncharts::Chart.new({:height=>400,:width=>600,:type=>'column2d',:renderAt=>'chart-container',:dataSource=>{:chart=>{:caption=>'Top 10 Most Populous City in selected Country',:xAxisname=>'Quarter',:yAxisName=>'Amount ($)',:numberPrefix=>'$',:theme=>'fint',},:data=>top_ten_populous_cities}})end