AngularJS FusionCharts
-
Adds a chart using just one single directive.
-
Auto-updates the chart object when the data source is modified.
-
Allows you to enable interactivity between Javascript charts
-
Adds a chart from a JSON URL, from a XML URL, or using props Binding.
In your HTML, include
fusioncharts library,
angularjs core file, and
angularjs-fusioncharts directive :
ng-fusioncharts in your module
In the app, include
ng-fusioncharts as a dependency. If you looking for where to add the dependency, look
for the call to
angular.module in your code.
fusioncharts directive
In your HTML, find the section where you wish to add the chart and add a
<div> with the
fusioncharts directive. We are assuming it's inside a controller called
MyController which would change based on your usage.
In the previous code, we are binding to a scope variable myDataSource, but that hasn't been defined yet. In your controller, set the DataSource as you would for a regular FusionCharts JSON format DataSource (see this tutorial for a general introduction to this format).
And your chart should display when you load the page.
In the app, include
ng-fusioncharts as a dependency. If you looking for where to add the dependency, look
for the call to
angular.module in your code.
If you've included angular-fusioncharts.js and fusioncharts in your html then add the following script tag:
In your index.html
In your script.js
Use a bundler like browserify to bundle the script
See the installation docs here
Again in your index.html
React-FusionCharts module is licensed under open-source, distributed under the terms of the MIT/X11 License. You will still need to include FusionCharts in your page, as this project provides no direct functionality. You can download a free evaluation version here. To use in a commercial environment, please purchase a FusionCharts license.
© 2002-2018 InfoSoft Global Private Limited. All Rights Reserved.