Integrating Chart.js with Angular 5 with Data from an API

The github repo for this project:

- - - - - - - - - - - - - - - - - - - - - -

Subscribe for NEW VIDEOS weekly!

^-Chat with me and others

- - - - - - - - - - - - - - - - - - - - - -

Come to my discord server or add me on social media and say Hi!

[stark]

New updated from future
If you using Rxjs and Angular versions above of 5 then syntax has changed so you might get errors..

first change: importing rxjs add operator
solution: import { map } from 'rxjs/operators';

2nd change: we now cannot directly use map operator with Observable<Object> so
Solution: instead of using .get('----url---').map(...) you can use something like below

[plainlyeclectic]

This doesn't really work anymore, but you can still get things figured out (though you may need to use a new api service). Here are some key changes since this video was published:

You need to wrap the .map around a .pipe function. So it would be ` .pipe(map(result => result)); ` instead of what's in the video.

You also need to import map from "rxjs/operators" rather than importing the "rxjs/add/operators/map" like is shown.


In the appModule you also need to import HttpClientModule in the same line as the HttpClient

[SLM]

you just a helped a lost guy in Tunisia

thx

[chiarato]

Thank you for the awesome tutorial, I just have a quick question. What is the benefit of installing Chart.js and importing in the application vs using ng2-chart?

[sokhomhuy]

best teacher i love every your tutorials

[barbarazavaleta]

Loved this video, you're an angel who saves lifes, thank you <3

[uwspstar]

Great job. How could I miss this one before. Thanks!

[mtcindianutube]

Simple and systemic progression. Great tutorial.

[JayPerf]

Fantastic tutorial - I was able to get it to work after registering for my own API key and adding endpoints to my previously existing API. The sample link provided caused a CORS error for me initially

[gelliravikumar]

Instead of the weather URL, if we have *.json data files stored in the assets folder as a local storage then can you show the required changes to the code. Thanks and always appreciated your efforts and valuable time.

[priyars]

best teaching. superrrbbbb.. i love all ur every tutorials.. awesome. its very help ful to me for my carrier. thanks a lot...

[chineduekeneokpala]

having error Failed to create chart: can't acquire context from the given item

[fbellod]

has been blocked by CORS policy: Response to preflight request doesn't pass access control check: No 'Access-Control-Allow-Origin' header is present on the requested resource.

[aayushgoyal]

Love the tutorial! Could you make a tutorial on developing PWA using Angular?

[nicky]

Very clear and straight forward tutorial. One question: in 7:56, you add 'ngOnInit' life cycle, without adding the 'implements OnInit' interface to the class. I could not move forward without it (using PHPStorm editor on Linux)

[playlistAF]

Such a great tuts ! Thanks a lot dude !

[AndresMorelos]

HI, can you tell me the way to destroy or update the chart?, I try to use the method .destroy(), but this return an error 'this is not a function'.

[surendrabhati]

Thanks,
always awesome tutorials ☺👌

[siliverunirmal]

thank you for the awesome tutorial sir. please make a video on how to create reports in angular

[ImalHasaranga]

Is this the correct way of doing this ? because using ids, classes to access a dom elemnent is a sin in angular as per I know... so the correct way shluld be wrapping the chart drawing section only to a separate component and then use that component within the main component by passing the dataset received from the service isnt it ?

by the way I really like your videos they are super clear and to the point