Using D3 charts with AngularJS

Knoldus

In this blog, we will learn using D3 chart with AngularJS. We will use D3 by injecting it in our angular application.

Introduction of D3 Chart:- D3.js is a JavaScript library for manipulating documents based on data. D3 helps you bring data to life using HTML, SVG, and CSS. D3’s emphasis on web standards gives you the full capabilities of modern browsers without tying yourself to a proprietary framework, combining powerful visualization components and a data-driven approach to DOM manipulation.

For more details click here

Step 1: Create index.html, directive.js, controller.js, app.js files

First of all we need to understand the role of all file.

  • index.html is needed for rendering chart.
  • app.js is needed for using angular application.
  • controller.js is for angular controller.
  • directive.js is for angular directive.

Once we have created all files, we need to use it in index.html.

http://../js/Angular.min.js
//Here Angular.min.js is used for AngularJs.
http://../js/app.jshttp://../js/controllers/controller.js

View original post 419 more words

Advertisements

Leave a Reply

Fill in your details below or click an icon to log in:

WordPress.com Logo

You are commenting using your WordPress.com account. Log Out / Change )

Twitter picture

You are commenting using your Twitter account. Log Out / Change )

Facebook photo

You are commenting using your Facebook account. Log Out / Change )

Google+ photo

You are commenting using your Google+ account. Log Out / Change )

Connecting to %s