cuong nguyen
cuong nguyen

Reputation: 229

Using chart with angularjs

I'm in a php project which need to show the chart. I intend to use Morrisjs to show which use Jquery. But I find out the angularjs is more interesting. Is there person can show me how can I use chart on angularjs with Ajax with data from php return.

Upvotes: 1

Views: 1029

Answers (4)

VBMali
VBMali

Reputation: 1380

If you are using angularjs, no need to use jquery ajax. Use everything with the help of angularjs.

This is all for charts , Just follow it. First play with dummy data (don't retrive from DB).

Try to implement.

Upvotes: 0

Max Klenk
Max Klenk

Reputation: 46

After receiving the data as Arthur described the next step is to bind this data to a directive which visualizes your data. angular-chart does this job for you.

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.

Upvotes: 0

JQuery Guru
JQuery Guru

Reputation: 6963

Below the link for Google Chart Tools Directive Module for AngularJS

https://github.com/bouil/angular-google-chart

http://gavindraper.com/2013/07/30/google-charts-in-angularjs/

Upvotes: 1

Arthur Kovacs
Arthur Kovacs

Reputation: 1740

First you have to create a service to get your data.

Take a look at this plnkr http://plnkr.co/edit/KbBg67

    $http.get('posts.json').success(function(data) {

instead of posts.json get your data

Below that you can see how we push the data to an array, the file is well commented.

And now, from a controller you can access that said data.

Now you have to create a directive to render the charts.

Here is a really good example that could be adapted to what you want. http://eric-schaefer.com/blog/2013/07/26/rendering-flot-charts-through-angular-js/

Upvotes: 0

Related Questions