Apply Different Themes using AngularJS

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 angularjs-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" } ] } 
{
    "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"
        }
    ]
}

The code to render the above chart is given below:

//  Require AngularJS 
var angular = require('angular');

// Require FusionCharts 
var FusionCharts = require('fusioncharts');

// Include angularjs-fusioncharts 
require('angularjs-fusioncharts');

// Require Chart modules 
var Charts = require('fusioncharts/fusioncharts.charts');

// Require Themes
var FusionTheme = require('fusioncharts/themes/fusioncharts.theme.fusion');
var GammelTheme = require('fusioncharts/themes/fusioncharts.theme.gammel');
var CandyTheme = require('fusioncharts/themes/fusioncharts.theme.candy');
var ZuneTheme = require('fusioncharts/themes/fusioncharts.theme.zune');
var OceanTheme = require('fusioncharts/themes/fusioncharts.theme.ocean');
var CarbonTheme = require('fusioncharts/themes/fusioncharts.theme.carbon');

// Initialize Charts with FusionCharts instance
Charts(FusionCharts);

// Initialize FusionTheme with FusionCharts instance
FusionTheme(FusionCharts);

var myApp = angular.module("myApp", ["ng-fusioncharts"]);
myApp.controller("MyController", ["$scope", function($scope){
    var chart;
    // datasource
    $scope.myDataSource = {
        "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"}
        ]
      };
    $scope.selectedTheme = "fusion";
    // initialized event handler
    $scope.initialized = function(chartObj){
        // store the reference of chart instance for further usage
        chart = chartObj;
    };
    $scope.applyTheme = function(e){
        chart.setChartAttribute('theme', e.target.value);
    }
}]);

Now, use the fusioncharts directive in a template. The HTML template is given below:

<div ng-app="myApp">
  <div ng-controller="MyController"> 
      <div id="chart-container">
          <fusioncharts type="column2d" width="100%" height="500" dataFormat="json" initialized="initialized(chart)" datasource="{{myDataSource}}"></fusioncharts>
      </div>
      <div style='position:relative;bottom:2px;text-align:center'>
        <span id="select-text">Choose a theme:</span>
        <div class="change-type">
            <div>
                <input type="radio" value="fusion" id="fusion_theme_button" ng-click="applyTheme($event)" ng-model="selectedTheme"/>
                <label for="fusion_theme_button">Fusion</label>
            </div>
            <div>
                <input type="radio" value="gammel" id ="gammel_theme_button" ng-click="applyTheme($event)" ng-model="selectedTheme"/>
                <label for="gammel_theme_button">Gammel</label>
            </div>
            <div>
                <input type="radio" value="candy" id="candy_theme_button" ng-click="applyTheme($event)" ng-model="selectedTheme"/>
                <label for="candy_theme_button">Candy</label>
            </div>
            <div>
                <input type="radio" value="zune" id="zune_theme_button" ng-click="applyTheme($event)" ng-model="selectedTheme"/>
                <label for="zune_theme_button">Zune</label>
            </div>
            <div>
                <input type="radio" value="ocean" id="ocean_theme_button" ng-click="applyTheme($event)" ng-model="selectedTheme"/>
                <label for="ocean_theme_button">Ocean</label>
            </div>
            <div>
                <input type="radio" value="carbon" id="carbon_theme_button" ng-click="applyTheme($event)" ng-model="selectedTheme"/>
                <label for="carbon_theme_button">Carbon</label>
            </div>
        </div>
      </div>
  </div>
</div>

The above chart has been rendered using the following steps:

  1. Include the necessary libraries and components using require. For example, angularjs-fusioncharts, fusioncharts, etc.

  2. Add the chart and the theme as dependencies to the core.

  3. Store the chart configurations in a variable (myApp).

  4. Create a handler to initialize events.

    • initialized to store the reference of the chart instance for further usage.
    • applyTheme to update the theme at runtime.

  5. Add the <div> with an fc-chart directive in your HTML, assuming that it is inside a controller named MyController. In the div:

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

  6. Create Radio buttons for Fusion, Gammel, Candy, Zune, Ocean and Carbon chart using <input>.

Was this article helpful to you ?
Where do you think this article needs improvement?