creating charts with angularjs [closed]

Question

Closed. This question needs to be more focused. It is not currently accepting answers.

---

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?

Answer 1

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.

Answer 2

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

Answer 3

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.

Answer 4

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.

Answer 5

Did you try D3.js? Here is a good example.

Answer 6

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.