Search the Community

Showing results for tags 'angular charts'.

More search options

  • Search By Tags

    Type tags separated by commas.
  • Search By Author

Content Type


  • Company Forums
    • Company News
  • Product Forums
    • FusionCharts XT
    • FusionWidgets XT
    • PowerCharts XT
    • FusionMaps XT
    • Collabion Charts for SharePoint
    • jQuery Plugin for FusionCharts
    • AngularJS plugin
    • ReactJS plugin
  • General Forums
    • FusionCharts Jobs and Consultation
    • FusionLounge

Found 1 result

  1. Creating Charts in AngularJS

    I have divided the complete process into the following four easy-to-understand steps: Include the required JavaScript files Create the AngularJS app Define the chart controller Render the chart Step 1: Include the required JavaScript files We need the following three JavaScript dependencies to render our chart: AngularJS Library FusionCharts core package JS files FusionCharts Angular charts plugin We will include all the above files using the <script> tag, as shown in the code below: <html> <head> <!-- including AngularJS library --> <script type="text/javascript" src="path/to/angular.min.js"></script> <!-- including FusionCharts core package files --> <script type="text/javascript" src="path/to/fusioncharts.js"></script> <script type="text/javascript" src="path/to/fusioncharts.charts.js"></script> <!-- including FusionChart Angular charts plugin --> <script type="text/javascript" src="path/to/angular-fusioncharts.min.js"></script> </head> </html> Step 2: Create the AngularJS app Next, we need to create the Angular app and inject the ng-fusioncharts module, which is provided by the plugin that we have included in the previous step. This is how we do it: var app = angular.module('myChartApp', ['ng-fusioncharts']); Step 3: Define Chart Controller In this step, we will define a controller for our app. To achieve this, we will augment the controller scope with the dataSource and the chart configurations: app.controller('chartController', function($scope) { // chart datasource $scope.dataSource = { "chart": { // caption configuration "caption": "Highest Paid Actors", "captionFontBold": "0", "captionFontSize": "20", // more chart properties - explained later }, "data": [{ "label": "Leonardo", "value": "1" }, //more chart data ] }; }); Step 4: Render the Chart We are almost done now. To render the chart, we will add the fusioncharts directive inside the <div> tag where chart will be rendered. This is how we will do it: <div ng-controller="chartController"> <fusioncharts width= "100%" height= "400" type= "bar2d" dataFormat= "json" dataSource= "{{dataSource}}"> </fusioncharts> </div> When you’ve executed the above code, you should be seeing a live bar 2D chart. If your chart didn’t render, or you want to see the source code, check out this JSFiddle example. If you’d like to know know more about creating charts with AngularJS, you can refer to this developer documentation page.