Creating charts with angular

Question

I also look at graphical solutions that work well with Angular.JS directives. I came across a few, but very confused. Does anyone have any suggestions for creating interactive diagrams integrated with Angular.JS modules?

Answer 1

angular-charts is a library that I wrote to create diagrams with angular and D3 .

It encapsulates the basic diagrams that can be created using D3 in a single angular directive. It also offers features such as

• Change one click;
• Auto prompts;
• Automatic configuration on containers;
• Legends
• Simple data format: just determine that you are at x and what you need at y;

There is angular -charts demo .

Answer 2

I have seen some good AngularJS graphics solutions that use Highcharts . There, the highcharts-ng GitHub directive simplifies integration with AngularJS and several on JSFiddle to give you a quick taste of what's possible.

You have configured the diagram on the JS side as follows:

$scope.chart = { options: { chart: { type: 'bar' } }, series: [{ data: [10, 15, 12, 8, 7] }], title: { text: 'Hello' }, loading: false } 

And then access it in HTML format as follows:

 <highchart id="chart1" config="chart"></highchart> 

Use / Licensing Warning: Highcharts is available free of charge under a Creative Commons license for non-commercial use. If you are looking for options for building diagrams in a commercial / commercial scenario, you need to buy a product or look elsewhere.

Answer 3

The ZingChart library has an AngularJS directive that was built internally. Features include:

• Full access to the entire ZingChart library (all diagrams, maps, and functions)
• Uses Angular two-way data binding, making it easy to update data and chart elements.

• Development team support

   ... $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 complete demo with code examples .

Answer 4

Have you tried D3.js? Here is a good example .

Answer 5

I created the angular directive for xCharts, which is a good js chart library http://tenxer.imtqy.com/xcharts/ . You can install it using the gazebo, quite simply: https://github.com/radu-cigmaian/ng-xCharts

Highcharts is also a solution, but it is not free for commercial use.

Answer 6

To collect more useful resources here:

As mentioned earlier, D3.js is definitely the best visualization library for diagrams. To use it in AngularJS, I developed angular-chart . This is an easy-to-use directive that connects D3.js to AngularJS 2-Way-DataBinding. Thus, the chart is automatically updated when configuration settings are changed, and at the same time, the charts retain their state (zoom level, ...) to make it available in the AngularJS world.

Check out the examples to make sure.

Answer 7

The AngularJS chart plugin along with the FusionCharts library for adding interactive charts and JavaScript charts to your web or mobile applications - with just one directive. Link: http://www.fusioncharts.com/angularjs-charts/#/demos/ex1