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

Подписаться 1,7 млн

Просмотров 425 тыс.

50% 1

The lesson continues working with tabular data (CSV) and examines how to graph the data in an HTML5 canvas with Chart.js.
🎥 NEXT LESSON: • 1.4: JSON - Working wi...
🎥 PREVIOUS LESSON: • 1.2 Tabular Data - Wor...
🎥 FULL COURSE: • Working with Data and ...
💻github.com/CodingTrain/Intro-...
🔗www.chartjs.org/
🚂 Website: thecodingtrain.com/
💖 Patreon: / codingtrain
🛒 Store: www.designbyhumans.com/shop/c...
📚 Books: www.amazon.com/shop/thecoding...
🎥 Coding Challenges: • Coding Challenges
🎥 Intro to Programming: • Start learning here!
🔗 p5.js: p5js.org
🔗 Processing: processing.org
Welcome to Working with Data and APIs in JavaScript!
This course is for aspiring developers who want to learn how to work with data in web applications. How do you retrieve, collect, and store data? The course will be taught through a series of creating three data projects.
📄 Code of Conduct: github.com/CodingTrain/Code-o...

Опубликовано:

22 май 2019

Ссылка:

Скачать:

Готовим ссылку...

Добавить в:

Мой плейлист

Посмотреть позже

Комментарии : 257

@critstixdarkspear5375 5 лет назад

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 5 лет назад

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 5 лет назад

😸😸😸

@ranikheir5272 4 года назад

Feel the same way!

@rvssvedavyas921 4 года назад

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

@pahittatnamn 2 года назад

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!

@ridz4912 3 года назад

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 3 года назад

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.

@3duFernandes 5 лет назад

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 RU-vid videos that just copy and paste the perfect code on the screen... You make it simple and real.

@katem9185 4 года назад

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.

@Cornellie 5 лет назад

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

@Qjoel6398 4 года назад

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!

@miquelmarti6537 2 года назад

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!)

@pablovillaverde679 3 года назад

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!!

@ShoSho-cq7ct 4 года назад

I love your positivity and humorous style of teaching!!

@Annehbui 4 года назад

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

@JuanOrtiz-qm9wy 5 лет назад

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 :).

@rotrose7531 5 лет назад

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.

@CodyPellom 4 года назад

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

@hilkokriel5659 5 лет назад

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.

@patrickboehme4556 4 года назад

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

@wesleyweisel134 5 лет назад

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.

@pliniojr95 2 года назад

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.

@asyncFlex 2 года назад

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

@heimizhou2261 3 года назад

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

@nomju6411 4 года назад

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

@nileshgurung9437 5 лет назад

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

@deviloflove195 4 года назад

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.

@SigmaSixSoftware Год назад

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

@austinedeclan10 5 лет назад

As a novice programmer, I find these videos really entertaining

@oeq57 5 лет назад

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

@fooboobear 5 лет назад

This person is the coolest teacher I ever had.

5 лет назад

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

@ronicard 3 года назад

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!

@alissondamasceno2010 5 лет назад

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

@RobertMenus 4 года назад

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!!

@armandsalle8447 5 лет назад

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

@codeforest9027 5 лет назад

6 days ago?

@iminni3459 5 лет назад

@@codeforest9027 Some people get early access I think.

@Banjer 5 лет назад

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

@JoshuaKisb 5 лет назад

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

@heksqer1022 5 лет назад

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

@vympel2732 5 лет назад

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

@djthedev 2 года назад

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

@varshakapil8224 4 года назад

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

@101appsCoZa 4 года назад

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

@loic.bertrand 5 лет назад

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

@bradtking 2 года назад

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

@phanta5m 4 года назад

A lot of lesson learned from this video, thanks.

@morhaham6609 3 года назад

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 3 года назад

You're a blessing.

@grainfrizz 5 лет назад

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

@herberdth 3 года назад

This is SO good material! Thanks!

@ugonnadi6732 3 года назад

the way I love how this guy teaches cannot be explained

@rotrose7531 4 года назад

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.

@BrenoLuna 5 лет назад

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!

@moussaibrahem9 5 лет назад

You Are Awesome man i loved how you teach and thinking

@graphiics 5 лет назад

I love your tutorial.. you are really fun!

@videovideoguy 3 года назад

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

@braindance1627 3 года назад

this video helped me. thank you so much

@juanpablogavilanes7036 3 года назад

Very nice video, looking forward to review the full course

@sebastienserra1064 Год назад

Thank you so much! Really helpful!

@zeinhm7250 5 лет назад

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

@saxenavedant61 4 года назад

love your tutorial videos ❤

@ichbindiego19 4 года назад

Muchas gracias, justo tenía un problema con esa librería y lo resolviste. Thank you.

@DannyM255 4 года назад

Very cool and very educational. Thank you.

@TheDima23 2 года назад

Amazing video! thank you so much for this !

@blackswann9555 3 года назад

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

@NetMistro 2 года назад

Such a great video 👍 thank you

@syedalishan4986 4 года назад

Hey my JS Teacher, Really Awesome Content.

@sodiqayilara1519 2 года назад

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 5 лет назад

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.

@yogeshwarbirangal 4 года назад

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

@mcyvideos68 5 лет назад

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 4 года назад

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 3 года назад

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

@Pedritox0953 5 лет назад

Excellent video series

@mohdotnet 4 года назад

Very very well described video Thank you so much

@neddev2990 2 года назад

Awesome stuff, thanks!

@cheshtagupta7491 3 года назад

Great great explanation😍😍😍

@chriscalso4699 4 года назад

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

@stefank.4345 4 года назад

Very good video, very helpful, Thanks

@ndiayemouhamadou4920 4 года назад

you are amazing you helped me a lot

@mohannedalademi5229 4 года назад

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

@AksCodeCafe 4 года назад

i love it super help full content

@aldogarciavaldez998 4 года назад

Grandes contenidos saludos de México

@parsa3611 3 года назад

That was useful. Thanks

@NuNaKri 4 года назад

Thank you so much for your cool videos :D

@Martin-jq8th 3 года назад

6:30 made my night 🌙

@khanparwez2009 4 года назад

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 ?

@deepamrai2107 3 года назад

Learning should be like this! Damn nice

@timotuomas9091 Год назад

Super man !! thank you !!

@lollilolli4582 2 года назад

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

@narshah4806 4 года назад

I owe you so much man

@digigoliath 5 лет назад

WOW. Amazing!!

@LittleAlienIsIn 4 года назад

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?

@raprobot6039 4 года назад

you are just amazing

@nagualdesign 5 лет назад

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 5 лет назад

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

@nagualdesign 5 лет назад

@@TheCodingTrain Cheers, Dan.

@letung9255 2 года назад

the beauty of teaching as the brain want to study.

@luciferkhusrao 2 года назад

Professor is teaching codes! Bella Ciao!!

@chrisdietrich1533 2 года назад

great video!

@chuckf5540 4 года назад

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.