Introduction to the FusionCharts Ruby on Rails Wrapper

FusionCharts Ruby on Rails Wrapper can be downloaded from here.

FusionCharts Suite XT includes the FusionCharts Ruby on Rails wrapper that lets you create interactive, data-driven charts.

In this section, you will be shown how you can create a simple chart using the FusionCharts server-side Rails wrapper.

Before you start creating charts, you will need to install the wrapper and get the latest version of the FusionCharts library.

Installing the FusionCharts Rails Wrapper

To install the Rails wrapper:

Add this line to your application’s Gemfile:

gem ‘fusioncharts-rails’

RubyGems contain package information along with the files to install. To read more on gems, click here.

On the command line prompt, execute the following command:

$bundle

This command will automatically install the fusioncharts-rails gem.

You can also install the gem directly from the command line prompt, without making any edits to the Gemfile.

To do this, use the code line given below:

$gem install fusioncharts-rails

Downloading the Latest FusionCharts Library

You will have to download the latest version of the library at http://www.fusioncharts.com/download/.

Once you have downloaded and extracted files from the package:

Copy the JavaScript files in to the vendor/assets/javascripts/fusioncharts/ folder.
Add the following code lines in the app/assets/javascripts/application.js file:

//= require fusioncharts/fusioncharts
//= require fusioncharts/fusioncharts.charts
//= require fusioncharts/themes/fusioncharts.theme.fint

Ensure that the config.assets.debug flag in the development.rb file (config/environments/development.rb) is enabled (set to true)

Creating and Rendering a Simple Chart using the FusionCharts Rails Wrapper

As an example, we will create a simple column 2D chart that plots the monthly revenue for the last year at Harry’s SuperMart. The data for the chart is shown in the table below:

Month	Revenue (In USD)
Jan	420000
Feb	810000
Mar	720000
Apr	550000
May	910000
Jun	510000
Jul	680000
Aug	620000
Sep	610000
Oct	490000
Nov	900000
Dec	730000

The column 2D chart generated from above data will look like this:

FusionCharts will load here..

Creating the Chart

The data structure, with steps explained as inline comments, needed to create the above chart is given below:

# Example to create a column 2D chart with the chart data passed in JSON string format
# Filename: `app/controllers/examples_controller.rb`

# The `fc_json` action is defined to create the column 2D chart.
def fc_json

# **Step 1:** Create the FusionCharts object in the controller action
	@chart = Fusioncharts::Chart.new({
    	:height => 400,
    	:width => 600,
    	:id => 'chart',
    	:type => 'column2d',
    	:renderAt => 'chart-container',
    	:dataSource => '{
        	"chart": {
            	"caption": "Monthly revenue for last year",
            	"subCaption": "Harry\'s SuperMart",
            	"xAxisName": "Month",
            	"yAxisName": "Revenues (In USD)",
            	"numberPrefix": "$",
            	"paletteColors": "#0075c2",
            	"bgColor": "#ffffff",
            	"borderAlpha": "20",
            	"canvasBorderAlpha": "0",
            	"usePlotGradientColor": "0",
            	"plotBorderAlpha": "10",
            	"placevaluesInside": "1",
            	"rotatevalues": "1",
            	"valueFontColor": "#ffffff",
            	"showXAxisLine": "1",
            	"xAxisLineColor": "#999999",
            	"divlineColor": "#999999",
            	"divLineDashed": "1",
            	"showAlternateHGridColor": "0",
            	"subcaptionFontBold": "0",
            	"subcaptionFontSize": "14"
        	},
        	"data": [{
            	"label": "Jan",
            	"value": "420000"
        	}, {
            	"label": "Feb",
            	"value": "810000"
        	}, {
            	"label": "Mar",
            	"value": "720000"
        	}, {
            	"label": "Apr",
            	"value": "550000"
        	}, {
            	"label": "May",
            	"value": "910000"
        	}, {
            	"label": "Jun",
            	"value": "510000"
        	}, {
            	"label": "Jul",
            	"value": "680000"
        	}, {
            	"label": "Aug",
            	"value": "620000"
        	}, {
            	"label": "Sep",
            	"value": "610000"
        	}, {
            	"label": "Oct",
            	"value": "490000"
        	}, {
            	"label": "Nov",
            	"value": "900000"
        	}, {
            	"label": "Dec",
            	"value": "730000"
        	}]
    	}'
	})

Data for the chart can be in any one of the following formats:

Valid Ruby Hash
JSON String
XML String

Rendering the Chart

The render() method is used to render the above chart. The code for this method is written in the view file - .erb file, which is automatically generated once you have created the .rb file containing the action.

The HTML code to render the chart is given below:

<!-- Filename: `app/views/examples/fc_json.html.erb` -->
<!-- **Step 2:** Render the chart**  **-->
<div id="chart-container"></div>
<%= @chart.render() %>