Your First Chart in Ruby using FusionCharts

FusionCharts Suite XT includes the FusionCharts Rails wrapper that lets you create interactive, data-driven charts. You can create a simple chart using the FusionCharts server-side Rails wrapper without writing any JavaScript code.

The server-side Rails wrapper generates the required JavaScript and HTML code as a string, which is then used to render charts on a browser page. We'll start with simple examples of creating a chart , then a gauge and a map .

Before going through this article, please install FusionCharts Rails wrapper, if you haven’t installed it already.

Create your first chart

In this section, we will create a chart using FusionCharts Rails server-side wrapper. We will create a Column 2D chart, which has the column2d chart alias in FusionCharts. We have 95+ chart types with their respective aliases for you to explore. Find the complete list of chart types here . To create a Column 2D chart, we need the chart data to be passed in JSON string format.

For this example, we have created a controller named examples and a view named firstchart. To keep things simple, we have placed all the chart rendering logics in the examples controller only.

The example controller we created is app/controllers/examples_controller.rb.

Let's start with a simple example of "Countries With Most Oil Reserves" chart, which we will plot in a Column 2D chart as shown below:

The data for this chart is represented in the table below:

Convert tabular data into JSON/XML format

Now that you have the tabular data ready, it's time to convert it into JSON/XML format, as FusionCharts accepts data in JSON or XML format. The converted format is shown below:

There are JSON/XML formats for different groups of charts in FusionCharts - e.g., single-series (which you see here), multi-series , combination , etc.

{
    "chart": {
        "caption": "Countries With Most Oil Reserves [2017-18]",
        "subCaption": "In MMbbl = One Million barrels",
        "xAxisName": "Country",
        "yAxisName": "Reserves (MMbbl)",
        "numberSuffix": "K",
        "theme": "fusion"
    },
    "data": [
        {
            "label": "Venezuela",
            "value": "290"
        },
        {
            "label": "Saudi",
            "value": "260"
        },
        {
            "label": "Canada",
            "value": "180"
        },
        {
            "label": "Iran",
            "value": "140"
        },
        {
            "label": "Russia",
            "value": "115"
        },
        {
            "label": "UAE",
            "value": "100"
        },
        {
            "label": "US",
            "value": "30"
        },
        {
            "label": "China",
            "value": "30"
        }
    ]
}

In the above code we have:

• Created the chart object to define the elements of the chart.
• Then, each row of the tabular data is present within the data array to specify the labels and their corresponding values.

Both the chart object and the data array contain a set of key-value pairs known as attributes. These attributes are used to set the functional and cosmetic properties of the chart as defined below:

Functional Attributes

Functional attributes let you control a variety of functional elements on the chart. For example, you can opt to show/hide data labels or data values. You can also set chart limits and extended properties. The functional attributes used in the above code are:

• caption sets the caption of the chart.
• subcaption sets the sub-caption of the chart.
• xAxisName sets the name of the x-axis, whereas yAxisName sets the name of the y-axis.
• numberPrefix adds a prefix to all the numbers visible on the chart.
• Please note, we have used the theme attribute in the chart's data and provided fusion theme as its value. Using themes, you can centralize cosmetic and functional properties across various charts in your web application.

Cosmetic Attributes

Cosmetic attributes let you configure chart cosmetics like color, transparency, font size, etc. Since we are using the fusion theme to customize the chart's look and feel, no cosmetic attributes are used in this sample. For the detailed list of attributes, click here .

Create an instance of the chart

In this step, we will create an instance of the chart type as column2d using FusionCharts class constructor, set the width and height (in pixels or %), and finally specify the data for the chart as JSON string format.

The firstchart action is defined to create the column 2D chart

The code of the instance of the chart is given below:

# Chart rendering
chart = Fusioncharts::Chart.new({
    width: “700”,
    height: “400",
    type: “column2d”,
    renderAt: “chart-container”,
    dataSource: chartJSONDataStr # Variable which has chart data in JSON format
})

In the above code:

• We have created an instance of the Column 2D chart. Each chart type in FusionCharts Suite XT has a unique alias, which you can use to create an instance of that chart. In this case, we are creating an instance of a Column 2D chart with dimensions of 600x400 pixels using width and height.
• To specify the data format as JSON, we have set the dataFormat parameter to json. You can also provide the data in XML format.
• The JSON data is embedded as the value of the dataSource parameter.

The HTML template of the above sample is shown below:

<!-- Filename: app/views/examples/firstchart.html.erb -->
<h3>My Chart</h3>
<div id="chart-container"></div>
<%=@myChart.render() %>

The full code for the above sample is:

# Filename: app/controllers/examples_controller.rb
class ExamplesController < ApplicationController
require ‘fusioncharts-rails’

def getChart

    # Chart appearance configuration
    chartAppearancesConfigObj = Hash.new
    chartAppearancesConfigObj = {
        "caption" => "Countries With Most Oil Reserves [2017-18]",
        "subCaption" => "In MMbbl = One Million barrels",
        "xAxisName" => "Country",
        "yAxisName" => "Reserves (MMbbl)",
        "numberSuffix" => "K",
        "theme" => "fusion"
    }

    # An array of hash objects which stores data
    chartDataObj = [{
            "Venezuela" => "290"
        }, {
            "Saudi" => "260"
        }, {
            "Canada" => "180"
        }, {
            "Iran" => "140"
        }, {
            "Russia" => "115"
        }, {
            "UAE" => "100"
        }, {
            "US" => "30"
        }, {
            "China" => "30"
        }
    ]

    # Chart data template to store data in "Label" & "Value"
    format
    labelValueTemplate = "{ \"label\": \"%s\", \"value\": \"%s\" },"

    # Chart data as JSON string
    labelValueJSONStr = ""

    chartDataObj.each { | item |
            data = labelValueTemplate % [item.keys[0], item[item.keys[0]]]
        labelValueJSONStr.concat(data)
    }

    # Removing trailing comma character
    labelValueJSONStr = labelValueJSONStr.chop

    # Chart JSON data template
    chartJSONDataTemplate = "{ \"chart\": %s, \"data\": [%s] }"

    # Final Chart JSON data from template
    chartJSONDataStr = chartJSONDataTemplate % [chartAppearancesConfigObj.to_json, labelValueJSONStr]

    # Chart rendering
    chart = Fusioncharts::Chart.new({
        width: "700",
        height: "400",
        type: "column2d",
        renderAt: "chart-container",
        dataSource: chartJSONDataStr
    })

    end

    def firstchart
        @myChart = getChart
    end

end

That's it! When you run this HTML page now, you should see a chart representing your data.

See the complete list of all possible attributes (the keys in the dataSource object) for a Column 2D chart.

Now, go on and explore other 95+ chart types that we have in FusionCharts or explore the configuration attributes for the charts.

The FusionCharts Chart Class

The syntax of the Chart class constructor used to initialize the chart object is:

Chart <object name> = new Chart (chartType, chartId, chartWidth, chartHeight, dataFormat, dataSource, bgColor, bgOpacity)

A list of available constructor parameters are given in the table below:

It is not necessary to assign values for all parameters during initialization. However, keep in mind the following:

• The order of parameters, needs to be preserved.
• Make sure that all of these parameters have been assigned values using the constructor, the Chart class methods, or the Render() method before running the application.
• If not, either the chart will not render at all or it will not render the way you want it to.

Create your first gauge

Gauges are powerful tools that can showcase information using a radial scale to display data and a dial to indicate the value. In this section, we will create an Angular Gauge.

To start with, we'll build a simple gauge showcasing Nordstorm's Customer Satisfaction Score as shown below:

The thresholds for the above sample have been defined using the following range.

So, any score less than 50 is bad and is red. Any score between 50 and 75 is average and is yellow. Any score above 75 means good and is green.

Convert tabular data into JSON/XML format

Now that you have the tabular data ready, it's time to convert it into JSON/XML format, as FusionCharts accepts data in JSON or XML format. The converted format will look as shown below:

{
    "chart": {
        "caption": "Nordstorm's Customer Satisfaction Score for 2017",
        "lowerLimit": "0",
        "upperLimit": "100",
        "showValue": "1",
        "numberSuffix": "%",
        "theme": "fusion",
        "showToolTip": "0"
    },
    "colorRange": {
        "color": [
            {
                "minValue": "0",
                "maxValue": "50",
                "code": "#F2726F"
            },
            {
                "minValue": "50",
                "maxValue": "75",
                "code": "#FFC533"
            },
            {
                "minValue": "75",
                "maxValue": "100",
                "code": "#62B58F"
            }
        ]
    },
    "dials": {
        "dial": [
            {
                "value": "81"
            }
        ]
    }
}

Create an instance of the gauge

In this step, we will create an instance of the chart type as angularGauge using FusionCharts class constructor, set the width and height (in pixels or %), and finally specify the data for the chart as JSON string format.

For this example, we have created a controller named examples and view named firstwidget. To keep things simple we have placed all the chart rendering logics in the examples controller only.

The example controller we created is app/controllers/examples_controller.rb.

The firstwidget action is defined to create the angular gauge.

The code of the instance of the gauge is given below:

# Rendering the gauge
widget = Fusioncharts::Chart.new({
    width: “450”,
    height: “250",
    type: “angulargauge”,
    renderAt: “widget-container”,
    dataSource: widgetJSONStr # Variable which has gauge data in JSON format
})

The template of the above sample is shown below:

<<!-- Filename: app/views/examples/firstwidget.html.erb -->
<h3>My Widget</h3>
<div id="widget-container"></div>
<%=@myWidget.render() %>

The full code for the above sample is:

#Filename: app / controllers / examples_controller.rb
class ExamplesController < ApplicationController
require ‘fusioncharts-rails’

def getWidget

    # Widget appearance configuration
    widgetAppearancesConfigObj = {
        "caption" => "Nordstorm's Customer Satisfaction Score for 2017",
        "lowerLimit" => "0",
        "upperLimit" => "100",
        "showValue" => "1",
        "numberSuffix" => "%",
        "theme" => "fusion",
        "showToolTip" => "0"
    }

    # Widget color range data
    colorDataObj = {
        "color" => [{
                "minValue" => "0",
                "maxValue" => "50",
                "code" => "#F2726F"
            },
            {
                "minValue" => "50",
                "maxValue" => "75",
                "code" => "#FFC533"
            },
            {
                "minValue" => "75",
                "maxValue" => "100",
                "code" => "#62B58F"
            }
        ]
    }

    # Widget dial data in array format, multiple values can be separated by comma e.g. ["81", "23", "45", ...]
    widgetDialDataArray = ["81"]

    # Dial value in JSON format
    widgetDialDataStr = ""

    # Template
    for dial value
    widgetDialDataTemplate = "{ \"value\": \"%s\" },"

    # Iterates dial data array and converts them proper data format
    widgetDialDataArray.each { | item |
            data = widgetDialDataTemplate % [item]
        widgetDialDataStr.concat(data)
    }

    # Removing trailing comma
    widgetDialDataStr = widgetDialDataStr.chop

    # Formats dial value(s)
    widgetDialTemplate = "{ \"dial\": [%s]}"
    widgetDialStr = ""
    widgetDialStr = widgetDialTemplate % [widgetDialDataStr]

    # Final Widget JSON template
    widgetJSONTemplate = "{ \"chart\": %s, \"colorRange\": %s,  \"dials\": %s}"

    # Final Widget JSON data from template
    widgetJSONStr = widgetJSONTemplate % [widgetAppearancesConfigObj.to_json, colorDataObj.to_json, widgetDialStr]

    # Rendering the widget
    widget = Fusioncharts::Chart.new({
        width: "450",
        height: "250",
        type: "angulargauge",
        renderAt: "widget-container",
        dataSource: widgetJSONStr
    })

    end

    def firstwidget
        @myWidget = getWidget
    end
end      

See the complete list of all possible attributes for an angular gauge.

Create your first map

In this section, we will create a visualization using the World Map. Take a look at the map shown below:

The data for this chart is represented in the table below:

In the above table, the column Entity Name represents the geographical entities represented in the map, whose full names are given in the State column in this example.

However, when you convert the data in a format acceptable by FusionCharts, the entities are denoted by the id key in the data object (see the code snippet of the next section).

For any map visualization you create, it is imperative that you provide the correct value for the id keys. For example, if you want to denote Africa, the value for the corresponding id must be AF, and not AFR. We have detailed Map Specification Sheets for all the maps that can be rendered using FusionCharts. Refer to them for the correct id of the map you want to create.

Convert tabular data into JSON/XML format

Now that you have the tabular data ready, it's time to convert it into JSON/XML format, as FusionCharts accepts data in JSON or XML format. The converted format will look as shown below:

{
    "chart": {
        "caption": "Average Annual Population Growth",
        "subcaption": " 1955-2015",
        "numbersuffix": "%",
        "includevalueinlabels": "1",
        "labelsepchar": ": ",
        "entityFillHoverColor": "#FFF9C4",
        "theme": "fusion"
    },
    "colorrange": {
        "minvalue": "0",
        "code": "#FFE0B2",
        "gradient": "1",
        "color": [
            {
                "minvalue": "0.5",
                "maxvalue": "1.0",
                "color": "#FFD74D"
            },
            {
                "minvalue": "1.0",
                "maxvalue": "2.0",
                "color": "#FB8C00"
            },
            {
                "minvalue": "2.0",
                "maxvalue": "3.0",
                "color": "#E65100"
            }
        ]
    },
    "data": [
        {
            "id": "NA",
            "value": ".82",
            "showLabel": "1"
        },
        {
            "id": "SA",
            "value": "2.04",
            "showLabel": "1"
        },
        {
            "id": "AS",
            "value": "1.78",
            "showLabel": "1"
        },
        {
            "id": "EU",
            "value": ".40",
            "showLabel": "1"
        },
        {
            "id": "AF",
            "value": "2.58",
            "showLabel": "1"
        },
        {
            "id": "AU",
            "value": "1.30",
            "showLabel": "1"
        }
    ]
}

Create an instance of the map

In this step, we will create an instance of the chart type as world using FusionCharts class constructor, set the width and height (in pixels or %), and finally specify the data for the chart as JSON string format.

For this example, we have created a controller named examples and a view named firstmap. To keep things simple we have placed all the chart rendering logics in the examples controller only.

The example controller we created is app/controllers/examples_controller.rb.

The code of the instance of the chart is given below:

# Rendeing the Map
map = Fusioncharts::Chart.new({
    width: “600”,
    height: “400",
    type: “maps/world”,
    renderAt: “map-container”,
    dataSource: mapJSONStr # Variable which has Map data in JSON format
})

The template of the above sample is shown below:

<!-- Filename: app/views/examples/firstwidget.html.erb -->
<h3>My Map</h3>
<div id="map-container"></div>
<%=@myMap.render() %>

The full code of the sample is:

# Filename: app / controllers / examples_controller.rb
class ExamplesController < ApplicationController
require ‘fusioncharts-rails’

def getMap

    # Map appearance configuration
    mapAppearancesConfigObj = {
        "caption" => "Average Annual Population Growth",
        "subcaption" => " 1955-2015",
        "numbersuffix" => "%",
        "includevalueinlabels" => "1",
        "labelsepchar" => ": ",
        "entityFillHoverColor" => "#FFF9C4",
        "theme" => "fusion"
    }

    # Map color range data
    colorDataObj = {
        "minvalue" => "0",
        "code" => "#FFE0B2",
        "gradient" => "1",
        "color" => [{
                "minValue" => "0.5",
                "maxValue" => "1",
                "code" => "#FFD74D"
            },
            {
                "minValue" => "1.0",
                "maxValue" => "2.0",
                "code" => "#FB8C00"
            },
            {
                "minValue" => "2.0",
                "maxValue" => "3.0",
                "code" => "#E65100"
            }
        ]
    }

    # Map data array
    mapDataArray = [
        ["NA", ".82", "1"],
        ["SA", "2.04", "1"],
        ["AS", "1.78", "1"],
        ["EU", ".40", "1"],
        ["AF", "2.58", "1"],
        ["AU", "1.30", "1"]
    ]

    # Map data template
    mapDataTemplate = "{ \"id\": \"%s\", \"value\": \"%s\", \"showLabel\": \"%s\" },"

    # Map data as JSON string
    mapDataJSONStr = ""

    # Iterate all data in mapDataArray and converts it to actual data format
    mapDataArray.each { | item |
            data = mapDataTemplate % [item[0], item[1], item[2]]
        mapDataJSONStr.concat(data)
    }

    # Removing trailing comma
    mapDataJSONStr = mapDataJSONStr.chop

    # Map JSON data template
    mapJSONTemplate = "{ \"chart\": %s, \"colorRange\": %s,  \"data\": [%s]}"

    # Map JSON data after combining all parts
    mapJSONStr = mapJSONTemplate % [mapAppearancesConfigObj.to_json, colorDataObj.to_json, mapDataJSONStr]

    # Rendeing the Map
    map = Fusioncharts::Chart.new({
        width: "600",
        height: "400",
        type: "maps/world",
        renderAt: "map-container",
        dataSource: mapJSONStr
    })
    end

    def firstmap
        @myMap = getMap
    end
end

See the complete list of all possible attributes (the keys in the dataSource object) for the World Map. The respective ids, can be found here .

Problem rendering the chart?

In case there is an error and you are unable to see the chart, check for the following:

• If you don't see the chart rendered on your browser, it might be because some browsers do not allow JavaScript files to be loaded and run from the local file system. In such cases, either try a different browser, or create a local/remote server and provide the webpages containing the charts from the server.

• If you are getting a JavaScript error on your page, check your browser console for the exact error and fix accordingly.

• If the chart does not show up, but there are no JavaScript errors, check if the FusionCharts Suite XT JavaScript library has loaded correctly. You can use developer tools within your browser to see if fusioncharts.js was loaded. Check if the path to fusioncharts.js file is correct and whether the file exists in that location.

• If you get a Loading Data or Error in Loading Data message, check whether your JSON data structure is correct, or if there are conflicts related to quotation marks in your code.