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

Поделиться
HTML-код
  • Опубликовано: 25 окт 2024

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

  • @critstixdarkspear5375
    @critstixdarkspear5375 5 лет назад +184

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

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

      😸😸😸

    • @ranikheir5272
      @ranikheir5272 5 лет назад

      Feel the same way!

    • @rvssvedavyas921
      @rvssvedavyas921 5 лет назад

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

  • @ridz4912
    @ridz4912 4 года назад +12

    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
      @yourfriendlyneighborhood5547 3 года назад +2

      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
    @pahittatnamn 3 года назад +8

    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
    @ShoSho-cq7ct 4 года назад +3

    I love your positivity and humorous style of teaching!!

  • @3duFernandes
    @3duFernandes 5 лет назад +6

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

  • @asyncFlex
    @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

  • @miquelmarti6537
    @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!)

  • @wesleyweisel134
    @wesleyweisel134 5 лет назад +3

    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.

  • @Qjoel6398
    @Qjoel6398 5 лет назад +1

    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!

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

    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
    @SigmaSixSoftware Год назад

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

  • @katem9185
    @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.

  • @armandsalle8447
    @armandsalle8447 5 лет назад +27

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

    • @codeforest9027
      @codeforest9027 5 лет назад

      6 days ago?

    • @iminni3459
      @iminni3459 5 лет назад

      @@codeforest9027 Some people get early access I think.

  • @pablovillaverde679
    @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!!

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

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

  •  5 лет назад +2

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

  • @heimizhou2261
    @heimizhou2261 4 года назад +1

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

  • @mcyvideos68
    @mcyvideos68 5 лет назад +47

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

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

  • @Cornellie
    @Cornellie 5 лет назад +10

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

  • @CodyPellom
    @CodyPellom 4 года назад +3

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

  • @varshakapil8224
    @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

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

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

  • @rotrose7531
    @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.

  • @fooboobear
    @fooboobear 5 лет назад +1

    This person is the coolest teacher I ever had.

  • @nomju6411
    @nomju6411 5 лет назад +8

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

  • @pliniojr95
    @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.

  • @oeq57
    @oeq57 5 лет назад +1

    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

  • @ronicard
    @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!

  • @nileshgurung9437
    @nileshgurung9437 5 лет назад +3

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

  • @videovideoguy
    @videovideoguy 3 года назад +1

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

  • @grainfrizz
    @grainfrizz 5 лет назад

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

  • @hilkokriel5659
    @hilkokriel5659 5 лет назад +2

    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.

  • @austinedeclan10
    @austinedeclan10 5 лет назад +2

    As a novice programmer, I find these videos really entertaining

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

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

  • @alissondamasceno2010
    @alissondamasceno2010 5 лет назад

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

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

    Very nice video, looking forward to review the full course

  • @heksqer1022
    @heksqer1022 5 лет назад

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

  • @deviloflove195
    @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.

  • @101appsCoZa
    @101appsCoZa 5 лет назад

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

  • @RobertMenus
    @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!!

  • @sodiqayilara1519
    @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.

  • @BrenoLuna
    @BrenoLuna 5 лет назад +4

    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!

  • @morhaham6609
    @morhaham6609 4 года назад +2

    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
      @00el04 3 года назад +1

      You're a blessing.

  • @ugonnadi6732
    @ugonnadi6732 3 года назад +2

    the way I love how this guy teaches cannot be explained

  • @mayaahmed
    @mayaahmed 3 месяца назад

    Such fun. Best videos on the topic.

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

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

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

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

  • @Banjer
    @Banjer 5 лет назад +1

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

  • @nagualdesign
    @nagualdesign 5 лет назад +3

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

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

    • @nagualdesign
      @nagualdesign 5 лет назад +1

      @@TheCodingTrain Cheers, Dan.

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

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

  • @phanta5m
    @phanta5m 5 лет назад

    A lot of lesson learned from this video, thanks.

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

    This is SO good material! Thanks!

  • @luciferkhusrao
    @luciferkhusrao 3 года назад

    Professor is teaching codes! Bella Ciao!!

  • @paco3447
    @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.

  • @vympel2732
    @vympel2732 5 лет назад +2

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

  • @YolkBytes
    @YolkBytes 4 года назад

    Very cool and very educational. Thank you.

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

    Very very well described video
    Thank you so much

  • @raphaelvsantos
    @raphaelvsantos 3 года назад

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

  • @Martin-jq8th
    @Martin-jq8th 4 года назад +1

    6:30 made my night 🌙

  • @sebastienserra1064
    @sebastienserra1064 Год назад

    Thank you so much! Really helpful!

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

    this video helped me. thank you so much

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

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

  • @rotrose7531
    @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.

  • @lollilolli4582
    @lollilolli4582 3 года назад

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

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

    Great great explanation😍😍😍

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

    Such a great video 👍 thank you

  • @syedalishan4986
    @syedalishan4986 5 лет назад

    Hey my JS Teacher,
    Really Awesome Content.

  • @graphiics
    @graphiics 5 лет назад +1

    I love your tutorial.. you are really fun!

  • @ssimona7317
    @ssimona7317 Год назад

    The background is so cute !⭐

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

    love your tutorial videos ❤

  • @neddev2990
    @neddev2990 3 года назад

    Awesome stuff, thanks!

  • @toastyPredicament
    @toastyPredicament 2 года назад

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

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

    Very good video, very helpful, Thanks

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

    Amazing video! thank you so much for this !

  • @JoshuaKisb
    @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. :)

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

    Grandes contenidos saludos de México

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

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

  • @brucedordway
    @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.

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

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

  • @Pedritox0953
    @Pedritox0953 5 лет назад

    Excellent video series

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

    Learning should be like this! Damn nice

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

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

  • @moussaibrahem9
    @moussaibrahem9 5 лет назад

    You Are Awesome man i loved how you teach and thinking

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

    the beauty of teaching as the brain want to study.

  • @chuckf5540
    @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.

  • @zeinhm7250
    @zeinhm7250 5 лет назад

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

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

    i love it super help full content

  • @jakubkurdziel2407
    @jakubkurdziel2407 4 года назад

    Best teacher

  • @thaanu
    @thaanu 10 месяцев назад

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

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

    That was useful. Thanks

  • @timotuomas9091
    @timotuomas9091 Год назад

    Super man !! thank you !!

  • @contentprogramming
    @contentprogramming 4 года назад +1

    good job bro

  • @eng.khartoum47
    @eng.khartoum47 3 года назад

    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?

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

    I owe you so much man

  • @khanparwez2009
    @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 ?

  • @ViRuZzv1
    @ViRuZzv1 5 лет назад

    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)

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

    Thank you so much for your cool videos :D

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

    great video!

  • @soniumesh2011
    @soniumesh2011 4 года назад

    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