Data analytics and data visualizations are the core aspects of every business today. They also play a significant role in driving the enterprise economy. They serve the important purpose of providing a pictorial representation of the large and complex data points that enterprises generate on a day-to-day basis. Beautiful charts and explanatory graphs, in addition to illustrations, are essential elements behind every data visualization objective, and this is where FusionCharts comes into the picture!

Due to its large library of robust and beautiful data visualization components, FusionCharts allows developers to implement beautiful and responsive chart components.

Read on to find out how you can use FusionCharts in your AngularJS applications to implement beautiful visualizations, responsive dashboards, and visual information pages.

The best part about FusionCharts is that it has full source code available for developers. You only need to download it and plug it into your own projects and start using them.

How can I create a simple chart in AngularJS?

A simple histogram-based chart is an ideal choice in situations where you have to do a comparative analysis of the subjects against specific parameters. Histograms give you a brief overview of your entire data pool. They also allow you to pull valuable insights from it.

FusionCharts has support for AngularJS, which is one of the pioneers in building single-page web applications. Using the FusionCharts library, you can easily create beautiful histogram-based visualizations in your applications.

Component JavaScript

var myApp = angular.module("myApp", ["ng-fusioncharts"]);
myApp.controller("MyController," ["$scope", function($scope){
    $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"}
        ]
    };
}]);

Include the following dependencies in index.html.

<script type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/angular.js/1.7.2/angular.min.js"></script>
<script type="text/javascript" src="path/to/fusioncharts/fusioncharts.js"></script>
<script type="text/javascript" src="path/to/fusioncharts/themes/fusioncharts.theme.fusion.js"></script>
<script type="text/javascript" src="path/to/angularjs-fusioncharts.min.js"></script>
<link rel="stylesheet" href="path/to/fusioncharts/themes/fusioncharts.theme.fusion.css"/>

Component HTML

<div ng-app="myApp">
    <div ng-controller="MyController">
        <fusioncharts 
            width="600" 
            height="400"
            type="column2d"
            datasource="{{myDataSource}}">
        </fusioncharts>
    </div>
</div>
simple-chart

What is an easy way to create a time-series visualization in AngularJS?

Most of the enterprises in today’s agile world are interested in knowing the trends that their data follows over time. This is undoubtedly an important metric to watch out for because data changes rapidly and customer priorities shift frequently. Therefore, it is necessary to keep an eye on time-trending data using visualizations.

FusionCharts allows you to create amazing time-series visualizations that you can integrate into your already built AngularJS applications and monitor your data trends with time.

To build your histogram, just use the following code:

Component JavaScript

var jsonify = res => res.json();
  var dataFetch = fetch(
    'https://s3.eu-central-1.amazonaws.com/fusion.store/ft/data/area-chart-with-time-axis-data.json'
  ).then(jsonify);
  var schemaFetch = fetch(
    'https://s3.eu-central-1.amazonaws.com/fusion.store/ft/schema/area-chart-with-time-axis-schema.json'
  ).then(jsonify);
var myApp = angular.module("myApp", ["ng-fusioncharts"]);
  myApp.controller("MyController", ["$scope", function($scope){
    $scope.myDataSource = {
      data: null,
      chart: {
        showLegend: 0
      },
      caption: {
        text: 'Daily Visitors Count of a Website'
      },
      yAxis: [
        {
          plot: {
            value: 'Daily Visitors',
            type: 'area'
          },
          title: 'Daily Visitors (in thousand)'
        }
      ]
    };
Promise.all([dataFetch, schemaFetch]).then(res => {
      const data = res[0];
      const schema = res[1];
      const fusionTable = new FusionCharts.DataStore().createDataTable(
        data,
        schema
      );
      $scope.$apply(function() {
        $scope.myDataSource.data = fusionTable;
      });
    });
  }]);

Include the following dependencies in index.html.

<script type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/angular.js/1.7.2/angular.min.js"></script>
<script type="text/javascript" src="path/to/fusioncharts/fusioncharts.js"></script>
<script type="text/javascript" src="path/to/fusioncharts/themes/fusioncharts.theme.gammel.js"></script>
<script type="text/javascript" src="path/to/angularjs-fusioncharts.min.js"></script>

Component HTML

<div ng-app="myApp">
  <div ng-controller="MyController">
        <div id="chart-container">
            <!--To get the reference of chart instance listen to initialized event-->
                <fusioncharts
                  type="timeseries"
                  width="100%"
                  id="id1"
                  height=500
                  dataFormat="json"
                  datasource-dt="myDataSource">
                </fusioncharts>
        </div></br>
  </div>
</div>
time-series-chart

What is a simple way to add a world map in AngularJS with FusionCharts?

With the introduction of modern technologies, enterprises have started offering digital services worldwide. This allows them to scale and build a clientele from different parts of the world. These services generate a significant amount of data. and it is extremely important to monitor this distributed data to continuously provide top-of-the-line services to your clients.

FusionCharts allows you to create a world map visualization in AngularJS that can help you monitor this widespread data.

Component JavaScript

var myApp = angular.module("myApp", ["ng-fusioncharts"]);
myApp.controller("MyController", ["$scope", function($scope){
  // datasource
  $scope.myDataSource = {
    "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"
      }
    ]
  };
}]);

Include the following dependencies in index.html.

<script type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/angular.js/1.7.2/angular.min.js"></script>
<script type="text/javascript" src="path/to/fusioncharts/fusioncharts.js"></script>
<script type="text/javascript" src="path/to/fusioncharts/themes/fusioncharts.theme.fusion.js"></script>
<script type="text/javascript" src="path/to/angularjs-fusioncharts.min.js"></script>
<link rel="stylesheet" href="path/to/fusioncharts/themes/fusioncharts.theme.fusion.css"/>

Component HTML

<div ng-app="myApp">
  <div ng-controller="MyController">
    <fusioncharts
      type="world"
      width="800"
      height="400"
      dataFormat="json"
      dataSource="{{myDataSource}}">
    </fusioncharts>
  </div>
</div>
world-map

How can I create a 2D pie chart with FusionCharts?

Pie charts are frequently used in the visualization industry with an aim to facilitate quantifiable analysis. You can create 2D pie charts in your AngularJS applications using FusionCharts components easily and quickly. Take a look!

Component JavaScript

var myApp = angular.module("myApp", ["ng-fusioncharts"]);
myApp.controller("MyController", ["$scope", function($scope){
  var chart,
  clickedPlot;
  // datasource
  $scope.myDataSource = {
    "chart": {
      "caption": "Market Share of Web Servers",
      "plottooltext": "<b>$percentValue</b> of web servers run on $label servers",
      "showLegend": "0",
      "enableMultiSlicing": "0",
      "showPercentValues": "1",
      "legendPosition": "bottom",
      "useDataPlotColorForLabels": "1",
      "theme": "fusion",
    },
    "data": [{
      "label": "Apache",
      "value": "32647479"
    }, {
      "label": "Microsoft",
      "value": "22100932"
    }, {
      "label": "Zeus",
      "value": "14376"
    }, {
      "label": "Other",
      "value": "18674221"
    }]
  };
  // handler for daplotclick event
  $scope.plotClickHandler = function(event){
    $scope.$apply(function(){
      clickedPlot = (event.data.categoryLabel).toLowerCase();
      if ($scope.selectedItem !== clickedPlot) {
        $scope.selectedItem = clickedPlot;
      } else{
        $scope.selectedItem = 'none';
      }
    });
  };
  // handler for initialzed event
  $scope.initialized = function(chartObj){
    // store the reference of chart instance for further usage
    chart = chartObj;
  };
  $scope.selectedItem = "none";
  $scope.noneChecked = function(){
    chart.slicePlotItem(0,false);
    chart.slicePlotItem(1,false);
    chart.slicePlotItem(2,false);
    chart.slicePlotItem(3,false);
  }
  $scope.apacheChecked = function(){
    chart.slicePlotItem(0,true);
  }
  $scope.microsoftChecked = function(){
    chart.slicePlotItem(1,true);
  }
  $scope.zeusChecked = function(){
    chart.slicePlotItem(2,true);
  }
  $scope.otherChecked = function(){
    chart.slicePlotItem(3,true);
  }
}]);

Include the following dependencies in index.html.

<script type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/angular.js/1.7.2/angular.min.js"></script>
<script type="text/javascript" src="path/to/fusioncharts/fusioncharts.js"></script>
<script type="text/javascript" src="path/to/fusioncharts/themes/fusioncharts.theme.gammel.js"></script>
<script type="text/javascript" src="path/to/angularjs-fusioncharts.min.js"></script>

Component HTML

<div ng-app="myApp">
  <div ng-controller="MyController">
    <!--To get the reference of chart instance listen to initialized event-->
      <div>
          <fusioncharts
            type="pie2d"
            width="100%"
            height="500"
            dataFormat="json"
            initialized="initialized(chart)"
            fcevent-dataplotclick="plotClickHandler(event)"
            datasource="{{myDataSource}}">
          </fusioncharts>
      </div>
      <div style='position:relative;bottom:2px;text-align:center'>
          <div>
            <div>
              <input type="radio" value="none" id="none_button" ng-click="noneChecked()" ng-model="selectedItem"/>
              <label for="none_button">None</label>
            </div>
            <div>
                <input type="radio" value="apache" id="apache_button" ng-click="apacheChecked()" ng-model="selectedItem"/>
                <label for="apache_button">Apache</label>
            </div>
            <div>
                <input type="radio" value="microsoft" id="microsoft_button" ng-click="microsoftChecked()" ng-model="selectedItem"/>
                <label for="microsoft_button">Microsoft</label>
            </div>
            <div>
                <input type="radio" value="zeus" id="zeus_button" ng-click="zeusChecked()" ng-model="selectedItem"/>
                <label for="zeus_button">Zeus</label>
            </div>
            <div>
                <input type="radio" value="other" id="other_button" ng-click="otherChecked()" ng-model="selectedItem"/>
                <label for="other_button">Other</label>
            </div>
          </div>
      </div>
  </div>
</div>
pie-chart

How can I add a simple gauge with FusionCharts in AngularJS?

Gauge-based visualizations are not frequently used in the visualization industry, however, they are very useful for visualization in selected cases. Undoubtedly, IoT applications and their data visualization modules are good candidates for gauge-based visualizations.

FusionCharts, integrated with AngularJS applications, is one of the easiest ways to implement gauge-based visualizations.

Component JavaScript

var myApp = angular.module("myApp", ["ng-fusioncharts"]);
myApp.controller("MyController", ["$scope", function($scope){
  // datasource
  $scope.myDataSource = {
    "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"
      }]
    }
  };
}]);

Include the following dependencies in index.html.

<script type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/angular.js/1.7.2/angular.min.js"></script>
<script type="text/javascript" src="path/to/fusioncharts/fusioncharts.js"></script>
<script type="text/javascript" src="path/to/fusioncharts/themes/fusioncharts.theme.fusion.js"></script>
<script type="text/javascript" src="path/to/angularjs-fusioncharts.min.js"></script>
<link rel="stylesheet" href="path/to/fusioncharts/themes/fusioncharts.theme.fusion.css"/>

Component HTML

<div ng-app="myApp">
  <div ng-controller="MyController">
    <fusioncharts
      type="angulargauge"
      width="450"
      height="250"
      dataFormat="json"
      dataSource="{{myDataSource}}">
    </fusioncharts>
  </div>
</div>
simple-gauge

Source Code for FusionCharts in AngularJS and Demo

As you can see, AngularJS, in addition to FusionCharts, is an ideal choice for designing and developing your data visualizations. Apart from AngularJS, FusionCharts also supports a wide variety of bindings out of the box for Javascript, Angular 2+, React, jQuery, Vue.js, Ember, React Native, Svelte, ASP.NET, and PHP, in addition to Java, Ruby on Rails, and Django.

Let us know in the comment section below how you used FusionCharts with AngularJS to build beautiful visualization charts.

Download FusionCharts and get started today!

Take your data visualization to a whole new level

From column to donut and radar to gantt, FusionCharts provides with over 100+ interactive charts & 2,000+ data-driven maps to make your dashboards and reports more insightful

Explore FusionCharts

Leave a comment

Your email address will not be published. Required fields are marked *

This site uses Akismet to reduce spam. Learn how your comment data is processed.

Your next great dashboard starts here

With our interactive and responsive charts, extensive documentation, consistent API, and cross-browser support - delight your customers with kick-ass dashboards

Explore FUSIONCHARTS