Articles, Blog

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

February 14, 2020


You Might Also Like

95 Comments

  • Reply Armand Sallé May 17, 2019 at 2:41 pm

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

  • Reply Cyborus May 17, 2019 at 8:04 pm

    … I don't feel like I should be here quite yet. xP Still unlisted!
    EDIT: I've done all three now, and that was quite fun! 😀 Very engaging.

  • Reply MCY VIDEOS May 18, 2019 at 1:20 am

    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.

  • Reply Banjer May 18, 2019 at 9:11 am

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

  • Reply PianoCat May 21, 2019 at 6:11 pm

    (index):18 Uncaught (in promise) TypeError: Chart is not a constructor
    at chartIt
    any clue what's going on here?

  • Reply juan ortiz May 23, 2019 at 2:09 am

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

  • Reply fr3fou May 23, 2019 at 1:35 pm

    instead of .forEach you could've done a .map() and inside it return either an array (tuple) [x, y] or an object {x, y} and then return the result from the .map in the function
    so you can chain it after the .splice(1) 🙂

  • Reply Loïc Bertrand May 23, 2019 at 2:03 pm

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

  • Reply Paulo Schorn May 23, 2019 at 5:13 pm

    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

  • Reply FirstWeCode May 23, 2019 at 5:15 pm

    gotta love this channel for their lovely host

  • Reply Apoorv pandey May 23, 2019 at 5:22 pm

    DINGGGGGG…!!!

  • Reply zlyfer May 23, 2019 at 5:29 pm

    Is there a way to get the "Never forget the This Dot" Sticker you have on your laptop?

  • Reply Poor Man's Life Hacks May 23, 2019 at 5:39 pm

    17 th

  • Reply nagualdesign May 23, 2019 at 6:11 pm

    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!

  • Reply ViRuZzv1 May 23, 2019 at 6:15 pm

    Just to clear things up ° means degrees if u want to display degrees celcius u would want to write: value °C

    https://en.m.wikipedia.org/wiki/Degree_(temperature)

  • Reply Hilko kriel May 23, 2019 at 6:47 pm

    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.

  • Reply Critstix Darkspear May 23, 2019 at 6:49 pm

    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.

  • Reply Breno May 23, 2019 at 6:51 pm

    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!

  • Reply Shubhra Shukla May 23, 2019 at 6:52 pm

    RECAP! WHEN DID YOU GET SOOOOOOOOO ORDERED!!!!!!!!

  • Reply Omar Essilfie-Quaye May 23, 2019 at 7:21 pm

    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 😀

  • Reply Moussa Ibrahem May 23, 2019 at 7:34 pm

    You Are Awesome man i loved how you teach and thinking

  • Reply LapSiLap May 23, 2019 at 8:14 pm

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

  • Reply 刘金玉编程 May 23, 2019 at 9:08 pm

    有用

  • Reply Gilad Sher May 23, 2019 at 9:26 pm

    Hey Daniel! Great videos, really looking forwards to the next ones in the series!
    Could you possibly share your VS code extensions? (: have a great weekend!

  • Reply Austine Declan May 23, 2019 at 9:47 pm

    As a novice programmer, I find these videos really entertaining

  • Reply Coding Carter May 23, 2019 at 9:52 pm

    You should make more chrome extension tutorials like an example with a currency API that calculates USD to pesos or something like that

  • Reply alex bravo May 23, 2019 at 10:57 pm

    could you explain it with json data.

  • Reply MikeOnTheBox May 23, 2019 at 11:11 pm

    Declaring the type of script isn't needed anymore this days?

  • Reply Aayush Pokharel May 23, 2019 at 11:13 pm

    Or you can use p5js 😉

    Right Daniel….right…

    😂😂😂

  • Reply Aayush Pokharel May 23, 2019 at 11:16 pm

    Let's try to make bot using pretrained libraries or make one

  • Reply MikeOnTheBox May 23, 2019 at 11:23 pm

    BTW It is ºC and not Cº

  • Reply Harman Singh Chawla May 24, 2019 at 12:02 am

    I really liked the video! Although, not convinced of your choice. Should have gone with D3 or something more popular.

  • Reply Truth Teller May 24, 2019 at 3:02 am

    I rate this video 9 global warmings out of 10. 🌍🌞😎

  • Reply Daniel Astillero May 24, 2019 at 5:05 am

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

  • Reply Kendeclise May 24, 2019 at 5:58 am

    Hello :v

  • Reply Rishabh Shukla May 24, 2019 at 6:11 am

    This person is the coolest teacher I ever had.

  • Reply Michal May 24, 2019 at 7:31 am

    What extension in VScode do you use for formatting the code? (js or others). I guess Prettier? If yes have you some special configuration for the formatting? thx

  • Reply Paco May 24, 2019 at 9:22 am

    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.

  • Reply 1 2 May 24, 2019 at 10:16 am

    Why nt graphing with d3?

  • Reply Roman Romanishyn May 24, 2019 at 1:27 pm

    Hi! People can someone advice open source library for geo chart?

  • Reply AdamBast May 24, 2019 at 3:37 pm

    In some countries we use comma instead of dot for the decimal. It might cause issues. Like it did for me. Today. All day. Be careful 😀

  • Reply Linus Nadler May 24, 2019 at 4:05 pm

    Why are you able to use push on constants? Shouldn't constants be … well, constant? 🤔

  • Reply Antonio Eduardo May 24, 2019 at 4:36 pm

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

  • Reply Gael Manzanares May 24, 2019 at 4:57 pm

    I love your tutorial.. you are really fun!

  • Reply Vympel May 24, 2019 at 5:29 pm

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

  • Reply Frank Paniagua May 24, 2019 at 9:11 pm

    Hello, thanks for the great videos I have learned from them, but one thing, could you make functions or program a photobook? how would you do it, I have seen that they do it with html5 canvas with several layers, something similar to ShutterFly, please, of course if you have time, I would appreciate it, blessingss

  • Reply Nilesh Gurung May 24, 2019 at 11:52 pm

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

  • Reply Zac Smith May 25, 2019 at 12:24 am

    This is a great series, I am new to chart.js … I have an issue that I cannot seem to resolve. Even if I couple and paste your code, the chart will not adhere to the width and height defined. It takes up the entire screen, and does this even if I copy and paste the chart.js sample … do you have any idea how to resolve? I have been hunting Stack and other places, but no answer.

  • Reply Alisson Damasceno May 25, 2019 at 12:52 am

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

  • Reply AOMO May 25, 2019 at 4:54 am

    Thank you, you are fantastic and great.

  • Reply Dawid Dahl May 25, 2019 at 8:07 pm

    I hope the planet will be habitable long enough for me to land a programming job!

  • Reply Paul Omega May 26, 2019 at 12:35 pm

    The contents you produce is amazing so glad I found this channel.

    Im almost done reading your book btw

  • Reply Pedritox0953 May 26, 2019 at 4:56 pm

    Excellent video series

  • Reply Suta Pinatih May 27, 2019 at 1:35 pm

    Wow 8 economists dislike your chart.

  • Reply Mdmchannel May 27, 2019 at 1:56 pm

    You’re awesome dude!

  • Reply digigoliath May 27, 2019 at 3:14 pm

    WOW. Amazing!!

  • Reply Ryan Johnson May 27, 2019 at 10:39 pm

    Just kicking back and learning JS while I wait for global warming to kill us all. 😀

  • Reply Joshua Kisb May 28, 2019 at 7:41 pm

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

  • Reply Дима Артюхов May 31, 2019 at 3:36 pm

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

  • Reply Elías Burgos June 1, 2019 at 1:04 pm

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

  • Reply Marcos Vinícius Petri June 4, 2019 at 2:27 pm

    Shiffman is like a dog. You love him and you don't even need to ask why.

  • Reply Kirkster June 6, 2019 at 9:23 am

    Hey! How would you have the graph only animate when it is scrolled into view? Thank to anyone who can help! 🙂

  • Reply Cliff Karlsson June 10, 2019 at 9:39 am

    How do I fetch directly from the NASA-site ? I tried the same as in the video but with the full url but I got an error-message that complained about cors. I tried adding the no-cors option to fetch but then I got an error message complaining that the function was not async. My last try was this:

    const text = await fetch(url, { mode: 'no-cors' }).then(response => {

    return response().text();

    });

    But that did not work either

  • Reply rot rose June 13, 2019 at 2:54 pm

    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.

  • Reply Jagannath A June 16, 2019 at 3:50 pm

    if we set the axes origin to 0 the rise looks negligible

  • Reply Jonathan Jimenez June 20, 2019 at 6:35 pm

    Awesome video 🙂

  • Reply Cyrix Lord June 26, 2019 at 2:16 am

    I just want to say that I am enjoying this series. it introduces me to new libraries in JS and even though I use asp.net Core 2 these videos allow me to really appreciate JS. I am already finding the work handy as I develop my own API to process temp and humidity readings from an ESP-32 IOT device

  • Reply Srijan Paul July 3, 2019 at 12:27 pm

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

  • Reply Zein H M July 5, 2019 at 6:16 am

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

  • Reply Wesley Weisel July 22, 2019 at 11:50 am

    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.

  • Reply Kay Ramen August 10, 2019 at 6:53 pm

    🤣

  • Reply gonzalo martinese August 17, 2019 at 5:36 am

    Hi, how are you?
    Very good content, I was looking for some API, which collects data on currencies and crypto currencies, and so I can use it in chart.js
    Do you know any?

  • Reply Angelo A. August 23, 2019 at 7:38 pm

    Como puedo poner otros datos en el mismo grafico?
    Quiero hacer un grafìco con las percentuales de los datos, pero quiero poner encima de la barra el valor absoluto. Muchas gracias

  • Reply ryan brilliant August 23, 2019 at 8:10 pm

    A lot of lesson learned from this video, thanks.

  • Reply Quinsen Joel September 6, 2019 at 5:51 am

    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!

  • Reply karnell schultz October 2, 2019 at 7:57 pm

    Check out Data.gov for more datasets.

  • Reply Trần Ngọc Dũng October 8, 2019 at 10:48 am

    I am an unprofessional, I have watched and followed your video tutorial. I want to customize the graph display time (for example, from 1990 to 2009), how to do it. Can you show me how to find out about this problem? Best regards!

  • Reply Caio Goncalves October 14, 2019 at 8:08 pm

    9:56, my grhaphics disapeared. when I put the await getData()

  • Reply Syed Ali Shan October 23, 2019 at 6:49 pm

    Hey my JS Teacher,
    Really Awesome Content.

  • Reply OYMInternetRadio November 3, 2019 at 10:10 am

    Do you know if chart.js actually cross filters like D3? I cannot find anything saying that it does?

  • Reply nomju November 11, 2019 at 1:40 am

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

  • Reply 101apps.co.za November 12, 2019 at 2:50 pm

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

  • Reply TIK MED November 28, 2019 at 5:47 am

    where can i find the solution for the exercises?
    how can i handle this error "Uncaught (in promise) TypeError: Cannot read property 'getContext' of null"?

  • Reply Robert Menus November 28, 2019 at 6:55 pm

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

  • Reply Corrie Toppin December 1, 2019 at 11:05 am

    What if I what to get the data from image of canvas var canvas online. How am I going to do that? Thanks in advance

  • Reply Chris Calso December 2, 2019 at 3:19 pm

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

  • Reply Chau M. Tran December 4, 2019 at 4:57 am

    I love your positivity and humorous style of teaching!!

  • Reply kajal yadav December 16, 2019 at 1:11 pm

    My graphics disappears when i include the getData function. Can you please help me out with this??

  • Reply of undefined December 27, 2019 at 8:00 pm

    good job bro

  • Reply Mohamed A January 4, 2020 at 7:03 am

    Very very well described video
    Thank you so much

  • Reply umesh soni January 9, 2020 at 9:37 am

    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

  • Reply Wei Cao January 12, 2020 at 2:58 am

    can you make a video to make the http request to API then generate the chart and front-end user can based on some button to generate the chart they want?

  • Reply Stefan K. January 24, 2020 at 11:36 am

    Very good video, very helpful, Thanks

  • Reply Paul Pellom February 9, 2020 at 2:54 am

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

  • Reply Tammy Hoy February 12, 2020 at 3:24 am

    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?

  • Leave a Reply