javascript - Not able to render the fusion charts in angularjs -
i trying use angular fusion charts , below 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 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 , angular-fusioncharts.js file in order. still not able render fusionchart on browser.
please refer http://jsfiddle.net/ayanonly1/fvwtkjv9/ 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 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 official repository , documents can refer https://github.com/fusioncharts/angular-fusioncharts.
Comments
Post a Comment