1.3: Graphing with Chart.js - Working With Data & APIs in JavaScript

[@critstixdarkspear5375]

I’m enthusiastic about learning to code already, but your infectious enthusiasm and pure joy personality makes me do chair dances every time you post. I love you because you bring the world joy in learning. Every teacher of any subject could learn a lot from you and 3blue1brown.

[@prschorn]

I work with JS for about 6 years, and still i'm watching this video. This is how this channel is able to entertain me, even when I'm watching tutorials about topics that I already know

[@stevewu9372]

😸😸😸

[@ranikheir5272]

Feel the same way!

[@rvssvedavyas921]

could u help me how can i visualize audio . select a part of the audio and play it using javascript?

[@ridz4912]

OMG !! WHERE WAS THIS GUY ALL THESE YEARS ??? SERIOUSLY ?? JUST WATCHING HIM ..HE JUST EXPLAINS IT IN SUCH A FUN WAY. TBH NEVER SEEN ANYONE EXPLAINING IN DEPTH MIXED WITH SUCH A CRAZY INTERACTIVE WAY !

[@yourfriendlyneighborhood5547]

Yeahh the same here bruh. I almost wasted a year and now finally found this guy. Wish I could've found this gem a year back.

[@pahittatnamn]

I really love that your videos are longwinded enough to showcase lots of small "issues" one could encounter along the way of making something while still being consise enough to just get help "getting it done". I prefer this format much more compared to a fully prepared -these are the exact steps you should take video- and they never hit the same roadblocks you yourself get. Keep on making awesome content!

[@ShoSho-cq7ct]

I love your positivity and humorous style of teaching!!

[@asyncFlex]

i speak spanish but i'm learning english, im so happy to find this chanel, u teaching with a lot of passion, i never found it something like that. a lot of thanks

[@3duFernandes]

This is the first video I watched from your channel. Excellent material, man! As a beginner, I like the way you code on the fly. I can see how a real developer solves errors and refactors the code, it's not like tons of other KZbin videos that just copy and paste the perfect code on the screen... You make it simple and real.

[@miquelmarti6537]

I'm a programmer with 20 yrs of experience in backend and database administration. I love your channel. You make coding look funny (and it is!)

[@nomju6411]

This video makes me feel excited about what I'm learning as well as depressed about what's happening to the Earth.

[@fooboobear]

This person is the coolest teacher I ever had.

[@pablovillaverde679]

I just finished working on a webpage that displays data on airline incidents reṕorted by the NSA from 1980 to 2014. The chart I created shows 56 airlines, their incident total, and fatal accidents during that period of time. I wouldn't have been able to do that without your amazing videos. Thanks a lot!!

[@grainfrizz]

The world doesn't deserve people like Dan Shiffman. You're godsent.

[@JuanOrtiz-qm9wy]

This tutorial is so amazing!, I can see how do you solve any problem and try it on my own. And the projects are so engaging that you want to do the full course in one day. Greetings from Mexico :).

[@SigmaSixSoftware]

I’ve been working with JS for years and you just helped me find a bug in my code thanks

[@Qjoel6398]

Hey man I gotta say. Watching you write code one way to get it done and then refactoring it afterwards brings a whole nother level to the learning here. great work - I'm hooked!

[@katem9185]

I have a project coming up at work where I will be creating visualizations with Chart.js. This tutorial put me at ease and now I'm less stressed out about learning this new tool. Also, just wanted to say that your teaching style is so informative, easy to follow and engaging. It's helpful to watch you work through how you solve a coding problem and when you come across errors how you figure them out. Great tutorial! I'm looking forward to watching more of your videos.

[@armandsalle8447]

it's a very good idea to offer exercises ! It is important to learn and understand well

[@codeforest9027]

6 days ago?

[@iminni3459]

@@codeforest9027 Some people get early access I think.

[@austinedeclan10]

As a novice programmer, I find these videos really entertaining

Thanks for adding subtitles to the videos, the KZbin translator works better and better. : D greetings from Argentina

[@wesleyweisel134]

Why am I salivating the beginning of each video? Wait! The bell. Classical conditioning. I'm onto you, Daniel! Keep up the good work. I always love your videos and this is the first full class I am taking. Thanks.

[@rotrose7531]

it is hardly to think one can learn these valuable stuff for free. Thank you very much, you style of instant coding inspires and helps me a lot.

[@heimizhou2261]

This is best JS training video I've watched! thank you!

[@CodyPellom]

All aboard! I'm on the coding train for life I love this dude.

[@patrickboehme4556]

OMG you are amazing! Thank you so much!!!! Your videos on "Working With Data & APIs in JavaScript" have been a god send.

[@Annehbui]

I'm new to this coding industry and your videos really enlightened my interest in this field. Really enjoy your work!

[@mcyvideos68]

Very good video, very helpful. It look like Chart.js is a lot easier than D3. Just a little observation: the Celsius degree symbol is °C.

[@Annehbui]

I think D3 is more for designer to start everything from scratch - I would stick with charting libraries like this one chart.js or Plotly for graphing purposes.

[@Martin-jq8th]

he stated that in the chart description (datasets.label)

[@alissondamasceno2010]

So I open KZbin to search for Chart.js tutorials and your video pops up before searching for anything. Nice!

[@ugonnadi6732]

the way I love how this guy teaches cannot be explained

[@Cornellie]

The contents you produce is amazing so glad I found this channel. Im almost done reading your book btw

[@oeq57]

Dan, you are psychic I feel like every idea I have you have already made. Thanks for creating such amazing videos with lots of great information in them :D

[@pliniojr95]

Once again, thank you, teacher for this class! It was my first time using a JS library, and your way of teaching is catchy. I'm really looking forward to the next classes.

[@ronicard]

Great video and a really nice little tip about making the function async and calling the getData with an await is a really elegant and clean little solution. Major props for a well put-together video!

[@varshakapil8224]

We love you...love love love u....i love your energy...u can make boring things interesting... man this should be on Netflix!!! Love u dude...love the coding now cause of u

[@BrenoLuna]

Awesome content! I'm definitely experimenting with the charting library on my projects. Please, in order to improve the viewers' productivity, kindly provide a tutorial video for preparing the concoction that yields such energetic demeanour towards coding. Cheers!

[@videovideoguy]

Your video is much better than mine. It is very nice and clear. Thank you

[@nileshgurung9437]

This is exactly what i needed. Thank you for these awesome tuts. Love from India🤗

[@vympel2732]

I love when you said that VS Code automatically corrects your errors when you save and you saved literally every line you wrote

[@morhaham6609]

At 9:38, a more elegant solution is to just call a "then" for the "getData" in order to chart the graph after the data is resolved, like this: getData() .then(() => { chartIt(); }) .catch((error) => console.log(error.message));

[@00el04]

You're a blessing.

[@hilkokriel5659]

Another brilliant video!! Thank you so much for all the effort you put into your content. I’ve been using Google’s Chart Services for similar projects, but now I know how to use another API!! Wooohooo. Much love from South Africa.

[@rotrose7531]

Your tutorials unfailingly fascinate me, Thank you MILLIONS! I have a small request if possible, regarding this temperature toturial, could you make one more to cover some user interaction, for example, two input field to accept user input, which were then returned in form of year, then we only graph the temperature of that period specified by user? To be honest, based on the learning from you, I made a similar one, but I failed to extend it to feature some user interaction. I believe many other people want to see it too.

[@deviloflove195]

This has been a really entertaining and educative video to watch. Thank you!! I also like how you would actually refactor your codes near the end to make everything even more clean.

[@101appsCoZa]

great tutorial. chart.js is now easier than i thought thanks to you!

[@sodiqayilara1519]

I program daily, I watch this video to always remember to have fun,because goddamn coding is fun if you can just hang on enough to learn how it works.

[@paco3447]

As data is data, you won’t stop there. You could preprocess the input series and perform linear regressions, trends, averages, gaussian, time window predictions and forecasting, etc. vía custom functions and math helpers and plot with ChartJs. By the way, chartjs allows to use callbacks and hooks to perform advanced stuff.

[@djthedev]

You are such a gem!! Thank you so much for making these

[@heksqer1022]

Loved this video. It explained Chart.js beautifully ! Also looking at the global average temperature rise was really scary.

[@phanta5m]

A lot of lesson learned from this video, thanks.

[@lollilolli4582]

When I find a developer job , I will come back and thank you again !

[@nagualdesign]

The editing of these videos continues to improve. Am I right to assume that this is Matthaus' (sp?) handiwork? If so, he really ought to be credited in the video description. Whoever it is, they're doing a great job!

[@TheCodingTrain]

Yes, it's Mathieu Blanchette! I agree about the credit and will add!

[@nagualdesign]

@@TheCodingTrain Cheers, Dan.

[@RobertMenus]

Thank you very much, man! Your video really helped me and solved great coding problem. I was f*king for two days, trying to understand how to add data to this chart. And you example showed exactle what I wanted. You are awesome!!

[@Banjer]

Great!!! I can't wait for the next module!!

[@mohannedalademi5229]

man the way he explains stuff makes me wanna watch more, wish you were by elder brother

[@bradtking]

I am so thankful for you. Thank you for making this so much fun to learn.

[@mayaahmed]

Such fun. Best videos on the topic.

[@Martin-jq8th]

6:30 made my night 🌙

[@juanpablogavilanes7036]

Very nice video, looking forward to review the full course

[@herberdth]

This is SO good material! Thanks!

[@loic.bertrand]

That's such a cool and clear video, bravo!

[@letung9255]

the beauty of teaching as the brain want to study.

[@yogeshwarbirangal]

Thank you from 2020 It helped in building my district corona virus tracker.

[@chuckf5540]

Awesome. Great tutorial! I'm using node-js and wonder what the difference is in creating that page using template node? I plan to use a financial model candlestick to plot temperature by time (hour, day, week, month) by Open temp, Low temp, High temp and close temp.

[@City__Walker]

in 2022 year Chart.Js change self code, not removing "options" and write in field "beginAtZero: false" for correct drawing "options: scales: { y: { beginAtZero: false } } }"

[@fastlearner9993]

JUST THE COMMENT I NEEDED !!! THE LAST PIECE TO MY PUZZLE .... THANK YOU !!!!!!

[@khanparwez2009]

This is a great video, really helped me pick the concept fast. I was wondering if you can prepare some video where you can show timeseries data being aggregated from csv and display graph for a time period like , show graph for last 30 minutes or previous day something like that ?

[@chriscalso4699]

I thought I was watching a kids learning channel like blues clues for a second :) It's a good chart.js tutorial.

[@toastyPredicament]

I feel sick I will do a nap for today's courses

[@luciferkhusrao]

Professor is teaching codes! Bella Ciao!!

[@raphaelvsantos]

What a nice way to learn JS AND be conscious about the climate change! Awesome!

[@JoshuaKisb]

i already knew this stuff but the video was still fun to watch. makes me feel like making my own tutorials for coding. :)

[@YolkBytes]

Very cool and very educational. Thank you.

[@ABrushWithNature]

Really loving your tutorial here. So much appreciated! You talked about trimming blank lines at the end of the csv file. Can you share the code for that?

[@blackswann9555]

wow, I love you. so many questions answered for me!!!! Subscribed!

[@thaanu]

Great tutorial. I was using ChartJS on a project. Is there a way generate dynamic charts with realtime data? Like a dashboard.

[@syedalishan4986]

Hey my JS Teacher, Really Awesome Content.

[@mohdotnet]

Very very well described video Thank you so much

[@graphiics]

I love your tutorial.. you are really fun!

[@sebastienserra1064]

Thank you so much! Really helpful!

[@saxenavedant61]

love your tutorial videos ❤

[@moussaibrahem9]

You Are Awesome man i loved how you teach and thinking

[@brucedordway]

Nice series, thanks. Just one thing I've run into that I haven't figured out yet. From VSCode I can send my page to Live server and the chart displays one set of data columns from 1880 to 2019. However, when I activate the console in the browser, the data columns are auto duplicated - e.g. 1880 thru 2019, then 1880 thru 2019 repeated. I am assuming that activating the console is somehow triggering CSV data being appended to my existing data object - instead of clearing it first.

[@deepamrai2107]

Learning should be like this! Damn nice

[@cheshtagupta7491]

Great great explanation😍😍😍

[@narshah4806]

I owe you so much man

[@Pedritox0953]

Excellent video series

[@ssimona7317]

The background is so cute !⭐

[@TheDima23]

Amazing video! thank you so much for this !

[@jakubkurdziel2407]

Best teacher

[@neddev2990]

Awesome stuff, thanks!

[@NetMistro]

Such a great video 👍 thank you

[@soniumesh2011]

Hi .Its good that you have show about chart.js using csv file .can you show how to do it using external json file calling.I mean by calling json url link.please inform me

[@yanhualiu2191]

Can it do two data series samples on two different time intervals? Really Appreciate your comments

[@zeinhm7250]

lol i love how you explain and the live coding is cool ! auto subscribe !

[@ViRuZzv1]

Just to clear things up ° means degrees if u want to display degrees celcius u would want to write: value °C en.m.wikipedia.org/wiki/Degree_(temperature)

[@TheCodingTrain]

Yes, thank you for this correction!!

[@stefank.4345]

Very good video, very helpful, Thanks

[@eng.khartoum47]

Hi, Thanks for this tutorial. I have a question about the background color. If I want to inject the data with it the random background color. Like if there's a new content give it a specific color. Can you show how to do that?

[@saatfj]

Great charts. Can you do this in Processing 4? If so please link to a tutorial. Thanks

[@ДимаАртюхов-э6щ]

I really want to see how to draw charts on pure (vanilla) JS, that would be interesting to watch. I am challenging you ; )

[@MiaMW1]

index.html:22 Uncaught ReferenceError: Chart is not defined at index.html:22 I get this error for line - const myChart = new Chart(ctx, { type: 'bar',

[@ndiayemouhamadou4920]

you are amazing you helped me a lot

[@aldogarciavaldez998]

Grandes contenidos saludos de México

[@LapSiLap]

Instead of { foo: foo } you can just do { foo }. And the way you did year and temp could have been done like this: const [year, temp] = row.split(','). Edit oh nvm about the first one now I see labels: xlabels.. Thought it was the same..