Gagan Sikri

Creating Charts in AngularJS

Recommended Posts

I have divided the complete process into the following four easy-to-understand steps:

  1. Include the required JavaScript files
  2. Create the AngularJS app
  3. Define the chart controller
  4. Render the chart

Step 1: Include the required JavaScript files

We need the following three JavaScript dependencies to render our chart:

  1. AngularJS Library
  2. FusionCharts core package JS files
  3. FusionCharts Angular charts plugin

We will include all the above files using the <script> tag, as shown in the code below:

<html>
    <head>
        <!-- including AngularJS library -->
        <script type="text/javascript" src="path/to/angular.min.js"></script>

        <!-- including FusionCharts core package files -->
        <script type="text/javascript" src="path/to/fusioncharts.js"></script>
        <script type="text/javascript" src="path/to/fusioncharts.charts.js"></script>

        <!-- including FusionChart Angular charts plugin -->
        <script type="text/javascript" src="path/to/angular-fusioncharts.min.js"></script>
    </head>
</html>

Step 2: Create the AngularJS app

Next, we need to create the Angular app and inject the ng-fusioncharts module, which is provided by the plugin that we have included in the previous step. This is how we do it:

var app = angular.module('myChartApp', ['ng-fusioncharts']);

Step 3: Define Chart Controller

In this step, we will define a controller for our app. To achieve this, we will augment the controller scope with the dataSource and the chart configurations:

app.controller('chartController', function($scope) {
 	// chart datasource
	 $scope.dataSource = {
		 "chart": {
			// caption configuration
         "caption": "Highest Paid Actors",
         "captionFontBold": "0",
         "captionFontSize": "20",
		 // more chart properties - explained later
		 },
		 "data": [{
			 "label": "Leonardo",
			 "value": "1"
		 	}, //more chart data
 		]
	 };
});

Step 4: Render the Chart

We are almost done now. To render the chart, we will add the fusioncharts directive inside the <div> tag where chart will be rendered. This is how we will do it:

<div ng-controller="chartController">
 	<fusioncharts 
		 width= "100%"
		 height= "400"
		 type= "bar2d"
		 dataFormat= "json"
		 dataSource= "{{dataSource}}">
	 </fusioncharts>
</div>

When you’ve executed the above code, you should be seeing a live bar 2D chart. If your chart didn’t render, or you want to see the source code, check out this JSFiddle example.

If you’d like to know know more about creating charts with AngularJS, you can refer to this developer documentation page.  

Share this post


Link to post
Share on other sites
Guest stretchtents

Stretch Tents Cape Town provides different types of tents like <a href="http://stretchtents.capetown/peg-pole-tents/">Peg & Pole tents</a>, Aluminium Tents, Frame Tents, Bedouin Tents, Pagoda Tents, Canvas Tents and many more. Some of our tent accessories include: Plastic Chairs, Tiffany Chairs, Wimbledon Chairs, Phoenix Chairs, Plastic Folding Tables, Mobile Chillers, Mobile Freezers, Tarpaulin Tarps, Flooring and Gas Stoves. <a href="http://stretchtents.capetown/bedouin-stretch-tents/"> Stretch Tents manufacturers </a> South Africa.
 

Share this post


Link to post
Share on other sites
Guest Quickbooks Support

Get comprehensive round-the clock QuickBooks Support for all issues. The QuickBooks technical support team offers immediate assistance and can be reached by calling the toll-free QuickBooks support number.
 

Share this post


Link to post
Share on other sites
Guest canvastents

<a href="http://canvastents.durban/">Canvas Tents Durban</a> specializes in the manufacture of Marquees and Tents. We are committed to manufacturing exceptional quality tents and marquees at the most competitive prices. Our low prices do not mean that we compromise on quality, all marquees and tents are manufactured to the highest standard, but also to suit your pocket.
Best <a href="http://canvastents.durban/">Manufacturers of Canvas Tents</a>, Relief Tents, Refugee Tents, Disaster Tents, Army Tents, Military Tents as well as Marquees, <a href="http://canvastents.durban/alpine-marquees-tents-for-sale/">Alpine Tents</a>, Frame Tents, Aluminium Tents, Wedding Tents, Party Tents, Storage Tents, Warehouse Tents, Exhibition Tents, A Frame Tents, Bedouin Stretch Tents. We custom manufacture any size or shape tent to suit your needs.
 

Share this post


Link to post
Share on other sites
Guest brother printer tech suppo

Brother &nbsp;printer is a renowned brand name for delivering rich-featured printers at low cost across the world. Apart from excellent performance, users may encounter some issues with their Brother printers like paper jam, installation or download issue, updates, and many others. Therefore, if your printer works slowly or your work suffers, or another task remains incomplete due to low performance of the printer, instantly, dial the Brother printers customer support phone number and get round the clock assistance from the technical experts.

Share this post


Link to post
Share on other sites
Guest Hp printer support

HP printer  has managed to become a leading manufacturer of laptops, desktops, tablets, printers, and other such products. HP product range is tailored to meet the diverse specifications of small-, medium-, and large-sized businesses. Like the other HP products, its printing range is also satisfying the personal and professional printing requirements of the customers.Thanks for all the tips mentioned in this article! it’s always good to read things you have heard before and are implementing, but from a different perspective, always pick up some extra bits of information.

Share this post


Link to post
Share on other sites
Guest Reckon Support Number

If you are a new user then don’t panic. We will help you to get accustomed with the tool. Dial Reckon support number for assistance and guidance. Our experts and technicians are here to help you 24/7. You can also contact us by live chat.

 

Share this post


Link to post
Share on other sites
Guest Jackpot

If you discover the first-class online lottery in India with the high-quality end result and records so please go to our website. It is a good website for you. Casino

Share this post


Link to post
Share on other sites
Guest download trendmicro
Guest Download Kaspersky
Guest installvipre
Guest installvipre
Guest
You are commenting as a guest. If you have an account, please sign in.
Reply to this topic...

×   Pasted as rich text.   Paste as plain text instead

  Only 75 emoticons maximum are allowed.

×   Your link has been automatically embedded.   Display as a link instead

×   Your previous content has been restored.   Clear editor

×   You cannot paste images directly. Upload or insert images from URL.

Loading...