AngularJS Live Example

by Moonmi Sonowal

HTML

<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.3.14/angular.min.js"></script>
<script src="http://static.fusioncharts.com/code/latest/fusioncharts.js"></script>
<script src="http://fusioncharts.github.io/angular-fusioncharts/demos/js/angular-fusioncharts.min.js"></script>
<html ng-app="HelloApp">
<body ng-controller="MyController">

<div style="background-color:#00FF00">
 <fusioncharts 
    id="mychartcontainer"
    chartid="mychart"
    width="400" 
    height="300"
    type="column2d"
   dataSource="{{dataSource}}"
   config="{{chartoptions}}"
   
    ></fusioncharts>

</div>
</body>
</html>

JavaScript

var app = angular.module('HelloApp', ["ng-fusioncharts"])
app.controller('MyController', function ($scope) {
    $scope.chartoptions = {
        "containerBackgroundColor": "#FF0000",
        "containerBackgroundOpacity": "0"
    };
    $scope.dataSource = {
                "chart": {
                    "caption": "Annual Sales Summary (2010-2013)",
                    "subcaption": "Click on a column to drill-down",
                    "numberprefix": "$",
                    "showvalues": "0",
                    "bgcolor": "FFFFFF",
                    "xaxisname": "Year",
                    "plotgradientcolor": "",
                    "showalternatehgridcolor": "0",
                    "showplotborder": "0",
                    "divlinecolor": "CCCCCC",
                    "canvasborderalpha": "0"
                },
                "data": [
                    {
                        "label": "2010",
                        "value": "1161000",
                        "link": "newchart-xml-2010Quarters",
                        "color": "008ee4"
                    },
                    {
                        "label": "2011",
                        "value": "1043000",
                        "link": "newchart-xml-2011Quarters",
                        "color": "6baa01"
                    },
                    {
                        "label": "2012",
                        "value": "1017000",
                        "link": "newchart-xml-2012Quarters",
                        "color": "f8bd19"
                    },
                    {
                        "label": "2013",
                        "value": "1156000",
                        "link": "newchart-xml-2013Quarters",
                        "color": "e44a00"
                    }
                ],
                "linkeddata": [
                    {
                        "id": "2010Quarters",
                        "linkedchart": {
                            "chart": {
       ...