Choose an item

Apply Different Themes using Ember

In FusionCharts Suite XT you can manually set the cosmetics and functional attributes for each chart in the corresponding JSON/XML file. This can work if you deal with only a small number of charts. As the number of charts increases so does your hassles. FusionCharts Suite ships with predefined themes which you can use to set the visual appearance or the behavior of your chart.

FusionCharts Suite XT ships with the following predefined themes:

  • fusion (since v3.13.0)
  • gammel (since v3.13.0)
  • candy (since v3.13.0)
  • zune
  • ocean
  • carbon

This article focuses on how you can apply different themes to the chart at runtime using ember-fusioncharts component. Click any radio button, to see how the look and feel of the chart change with each theme.

A chart configured to change the theme, is shown below:

FusionCharts will load here..
{
    "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"
        }
    ]
}

Setup ember-cli-build.js

In this step we will include all the necessary files and add the dependency to create the Column 2D chart. The code is given below:

/* eslint-env node */
'use strict';

const EmberAddon = require('ember-cli/lib/broccoli/ember-addon');

module.exports = function (defaults) {
    let app = new EmberAddon(defaults, {
        // Add options here
    });

    // Import FusionCharts library
    app.import('bower_components/fusioncharts/fusioncharts.js');
    app.import('bower_components/fusioncharts/fusioncharts.charts.js');    
    app.import('bower_components/fusioncharts/themes/fusioncharts.theme.fusion.js');
    app.import('bower_components/fusioncharts/themes/fusioncharts.theme.gammel.js');
    app.import('bower_components/fusioncharts/themes/fusioncharts.theme.candy.js');
    app.import('bower_components/fusioncharts/themes/fusioncharts.theme.zune.js');
    app.import('bower_components/fusioncharts/themes/fusioncharts.theme.ocean.js');
    app.import('bower_components/fusioncharts/themes/fusioncharts.theme.carbon.js');    

    return app.toTree();
};

In the above code:

  1. Include the necessary libraries and components using import. For example, ember-fusioncharts, fusioncharts, etc.

  2. Include the theme files for all the six themes.

If you need to use different assets in different environments, specify an object as the first parameter. That object's keys should be the environment name and the values should be the asset to use in that environment.

Add chart data to chart-viewer.js

Add the following code to chart-viewer.js:

import Component from '@ember/component';

export default Component.extend({    
    id: 'theme-chart',    
    width: 700,
    height: 400,
    type: 'column2d',
    dataFormat: 'json',
    dataSource: {
        "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"
        }]
    },        
    actions: {
        changeTheme(value) {
            FusionCharts.items['theme-chart'].setChartAttribute('theme', value);
        }        
    }    
});

In the above code:

  1. Create a chart component to render the chart.

  2. Store the chart configuration in a JSON object. In the JSON object:

    • Set the chart type as column2d. Find the complete list of chart types with their respective alias here.
    • Set the width and height of the chart in pixels.
    • Set the dataFormat as JSON.
    • Embed the json data as the value of dataSource.

  3. Add the changeTheme() function to update the theme of the chart whenever the radio buttons are clicked.