CODEWITHSUNDEEP
javascriptangularjsfusioncharts
Shweta M
Shweta M

Reputation: 146

Not able to render the fusion charts in angularjs

I am trying to use the angular fusion charts , below is my code

 <div class="col-md-8">
    <fc-chart fc-chart-type="Bar2D" fc-data="{{myDataSource}}"></fc-chart>
 </div>

and in controller

      $scope.myDataSource = {
        chart: {
            caption: "Harry's SuperMart",
            subCaption: "Top 5 stores in last month by revenue",
            numberPrefix: "$",
            theme: "fint"
        },
        data: [{
            label: "Bakersfield Central",
            value: "880000"
        }, {
            label: "Garden Groove harbour",
            value: "730000"
        }, {
            label: "Los Angeles Topanga",
            value: "590000"
        }, {
            label: "Compton-Rancho Dom",
            value: "520000"
        }, {
            label: "Daly City Serramonte",
            value: "330000"
        }]
    };

I have added fusioncharts.js file , angular.js file and angular-fusioncharts.js file in order. But still not able to render the fusionchart on the browser.

Upvotes: 2

Views: 3536

Answers (4)

Surojit Jana
Surojit Jana

Reputation: 101

In the app, include ng-fusioncharts as a dependency. 

angular.module("myApp", ["ng-fusioncharts"])

Upvotes: 0

P&#229;l R
P&#229;l R

Reputation: 56

Be aware that some of the examples out there misses a reference.

Be sure to add both of these files!

    <!-- FusionCharts library-->
    <script type="text/javascript" src="fusioncharts.js"></script>
    <script type="text/javascript" src="fusioncharts.charts.js"></script>

Here is a link to an article that helped me: https://davidwalsh.name/angular-charts

Upvotes: 1

Trupti
Trupti

Reputation: 21

First initialize $scope.myDataSource using following way and then assign acual datasource. It should work.

$scope.myDataSource = {};

Upvotes: 0

Ayan Pal
Ayan Pal

Reputation: 99

Please refer to http://jsfiddle.net/ayanonly1/fvwtkjv9/ for a working sample.

HTML code:

<div >
 <fusioncharts  id="mychartcontainer"  chartid="mychart" width="400"  height="200" type="column2d" datasource="{{myDataSource}}" ></fusioncharts>
</div>

JS Code:

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

app.controller('MyController', function ($scope) {
    $scope.myDataSource = {
        chart: {
            caption: "Harry's SuperMart",
            subCaption: "Top 5 stores in last month by revenue",
            numberPrefix: "$"
        },
        data: [{
            label: "Bakersfield Central",
            value: "880000"
        }, {
            label: "Garden Groove harbour",
            value: "730000"
        }, {
            label: "Los Angeles Topanga",
            value: "590000"
        }, {
            label: "Compton-Rancho Dom",
            value: "520000"
        }, {
            label: "Daly City Serramonte",
            value: "330000"
        }]
    };

});

For the official repository and the documents you can refer https://github.com/fusioncharts/angular-fusioncharts.

Upvotes: 1

Related Questions