Want to improve this question? Update the question so it focuses on one problem only by editing this post.
Closed 4 years ago.
I've also been looking at charting solutions that will blend well with Angular.JS directives. I came across a few but got really confused. Does anyone have any suggestions for how to create interactive charts that are integrated with Angular.JS modules?
angular-charts is a library I wrote for creating charts with angular and D3.
It encapsulates basic charts that can be created using D3 in one angular directive. Also it offers features such as
- One click chart change;
- Auto tooltips;
- Auto adjustment to containers;
- Legends;
- Simple data format: only define what you on x and what you need on y;
There is a angular-charts demo available.
I've seen some nice AngularJS charting solutions that make use of Highcharts. There's a highcharts-ng directive on GitHub to make AngularJS integration easier, and some examples on JSFiddle to give you a quick taste of what's possible.
You set up the chart on the JS side like this:
$scope.chart = {
options: {
chart: {
type: 'bar'
}
},
series: [{
data: [10, 15, 12, 8, 7]
}],
title: {
text: 'Hello'
},
loading: false
}
And then refer to it in the HTML like this:
<highchart id="chart1" config="chart"></highchart>
Usage/licensing warning: Highcharts is available for free under the Creative Commons license for non-commercial use. If you're looking for charting options in a for-profit/commercial scenario, you'll need to buy the product or look elsewhere.
The ZingChart library has an AngularJS directive that was built in-house. Features include:
- Full access to the entire ZingChart library (all charts, maps, and features)
- Takes advantage of Angular's 2-way data binding, making data and chart elements easy to update
Support from the development team
...
$scope.myJson = {
type : 'line',
series : [
{ values : [54,23,34,23,43] },{ values : [10,15,16,20,40] }
]
};
...
<zingchart id="myChart" zc-json="myJson" zc-height=500 zc-width=600></zingchart>
There is a full demo with code examples available.
Did you try D3.js? Here is a good example.
I've created an angular directive for xCharts which is a nice js chart library http://tenxer.github.io/xcharts/. You can install it using bower, quite easy:
https://github.com/radu-cigmaian/ng-xCharts
Highcharts is also a solution, but it is not free for comercial use.
To collect more useful resources here:
As mentioned before D3.js is definitely the best visualization library for charts. To use it in AngularJS I developed angular-chart. It is an easy to use directive which connects D3.js with the AngularJS 2-Way-DataBinding. This way the chart gets automatically updated whenever you change the configuration options and at the same time the charts saves its state (zoom level, ...) to make it available in the AngularJS world.
Check out the examples to get convinced.
AngularJS charting plugin along with FusionCharts library to add interactive JavaScript graphs and charts to your web/mobile applications - with just a single directive. Link: http://www.fusioncharts.com/angularjs-charts/#/demos/ex1
