JavaScript Charts in Ruby on Rails (RoR)

Add interactive charts to your database-backed web applications using Model-View-Controller(MVC) pattern with ROR charts wrapper for FusionCharts.

Fusioncharts for ROR wrapper enables you to easily install and use FusionCharts in your ROR application. You can use any of the 90+ charts and 1000+ maps available with the FusionCharts for ROR wrapper to build interactive graphs and charts for your web application.

Download Wrapper View it on Github

Select Chart Types
Along with RoR wrapper, you will also need FusionCharts core JavaScript files which you can get from download page. Download FusionCharts JavaScript Files

QuickStart

Installation

Add this line to your application's Gemfile:

gem 'fusioncharts-rails'

And then execute:

$ bundle

Or install it yourself as:

$ gem install fusioncharts-rails

Getting Started

You will have to download the latest fusioncharts library at http://www.fusioncharts.com/download/. Once you have downloaded and extracted, copy the javascript files into vendor/assets/javascripts/fusioncharts/.

Require the following lines in the app/assets/javascripts/application.js

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

Step 1: Creating a chart:

Create the FusionCharts object in the controller action like the following:


#Filename: app/controllers/dashboard_controller.rb

class DashboardController < ApplicationController

  def index

    @chart = Fusioncharts::Chart.new({
        width: "600",
        height: "400",
        type: "mscolumn2d",
        renderAt: "chartContainer",
        dataSource: {
            chart: {
            caption: "Comparison of Quarterly Revenue",
            subCaption: "Harry's SuperMart",
            xAxisname: "Quarter",
            yAxisName: "Amount ($)",
            numberPrefix: "$",
            theme: "fint",
            exportEnabled: "1",
            },
            categories: [{
                    category: [
                        { label: "Q1" },
                        { label: "Q2" },
                        { label: "Q3" },
                        { label: "Q4" }
                    ]
                }],
                dataset: [
                    {
                        seriesname: "Previous Year",
                        data: [
                            { value: "10000" },
                            { value: "11500" },
                            { value: "12500" },
                            { value: "15000" }
                        ]
                    },
                    {
                        seriesname: "Current Year",
                        data: [
                            { value: "25400" },
                            { value: "29800" },
                            { value: "21800" },
                            { value: "26800" }
                        ]
                    }
              ]
        }
    })

  end

end

Step 2: Render the chart

In order to render the chart, you can use the render method in the specific view


<!-- Filename: app/views/dashboard/index.html.erb -->
<h3>My Chart</h3>

<%= @chart.render() %>

Licensing

jQuery-FusionCharts is open-source and distributed under the terms of the MIT/X11 License. You will still need to download and include FusionCharts in your page. This project provides no direct functionality. You can Download an evaluation. You will still need to purchase a FusionCharts license to use in a commercial environment (FusionCharts is free for non-commercial and personal use) .