d3-angularjs-donut-chart

Reusable donut chart module (D3js + AngularJS)

Homepage

Added by: Sam Deering

GitHub

Repository

iuriistavnichuk/d3-angularjs-donut-chart

Stats

Stars: 0

Watchers: 0

Forks: 0

Module Description

##D3 driven animated and reusable donut chart wrapper into AngularJS directive - live demo.

Since the data is retrieved from the external JSON file the developer does not need to worry about generating data within the program. This makes the module more flexible and maintainable so this approach allows us to place uncountable amount of these charts on the page in the neat way without polluting your HTML.

How to install

  • Copy donutChart.js wherever you want
  • Reference it in your index.html file
  • Reference the module in your app file : angular.module('MainWebApp', ['donutChart'])

How to use

A donut chart is called using this syntax :

<donut-chart path-to-json = "'json/donut-chart.json'"></donut-chart>

The pie chart directive attribute : path-to-json.

path-to-json

Your data must be JSON object.

{
    "Results":
        [
            {"Title":"Funds Received",
                "CurrencySymbol":"$",
                "Amount":106.52,
                "TotalAmount":400,
                "CurrencyAbbreviation":"USD",
                "Unit":null,
                "TimeInterval":"/month"
            }
        ]
}

Module stats last updated: 2015-04-19 02:20:44

Disclaimer: Some data on this page may have been gathered from the authors GitHub respository. If you see any mistakes or outdated information please let us know. Thanks!