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



The lesson continues working with tabular data (CSV) and examines how to graph the data in an HTML5 canvas with Chart.js.

🎥 NEXT LESSON: https://youtu.be/uxf0–uiX0I
🎥 PREVIOUS LESSON: https://youtu.be/RfMkdvN-23o
🎥 FULL COURSE: https://www.youtube.com/playlist?list=PLRqwX-V7Uu6YxDKpFzf_2D84p0cyk4T7X

💻https://github.com/CodingTrain/Intro-to-Data-APIs-JS
🔗https://www.chartjs.org/

🚂 Website: http://thecodingtrain.com/
💖 Patreon: https://patreon.com/codingtrain
🛒 Store: https://www.designbyhumans.com/shop/codingtrain/
📚 Books: https://www.amazon.com/shop/thecodingtrain

🎥 Coding Challenges: https://www.youtube.com/playlist?list=PLRqwX-V7Uu6ZiZxtDDRCi6uhfTH4FilpH
🎥 Intro to Programming: https://www.youtube.com/playlist?list=PLRqwX-V7Uu6Zy51Q-x9tMWIv9cueOFTFA

🔗 p5.js: https://p5js.org
🔗 Processing: https://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: https://github.com/CodingTrain/Code-of-Conduct

Original source

29 thoughts on “1.3: Graphing with Chart.js – Working With Data & APIs in JavaScript

  • May 14, 2020 at 08:48
    Permalink

    17:15 To the best of my knowledge, nobody denies there is "evidence" of the Earth rising temperatures. Rather, the debate is about THE EXTENT to which these raises in temperature are purely anthropogenic (ie. HUMAN made) or a combination of both NATURAL and man-made activities. There is no such thing as "climate change deniers". When this energetic, skillful but politically askew teacher runs the ".push(leftist-propaganda)" function into his videos, he takes away from the incredible value his content provides. Sad 🙁

  • May 14, 2020 at 08:48
    Permalink

    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.

  • May 14, 2020 at 08:48
    Permalink

    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 ?

  • May 14, 2020 at 08:48
    Permalink

    lemme ask you a thing: When you wrote the variable labels using const, why shouldn't you used let instead? Because const vars can't be mutate…

  • May 14, 2020 at 08:48
    Permalink

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

  • May 14, 2020 at 08:48
    Permalink

    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.

  • May 14, 2020 at 08:48
    Permalink

    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

  • May 14, 2020 at 08:48
    Permalink

    Hi there, would you be interested in doing a video about using RGraph? It's another JavaScript charting library that's licensed using the MIT license and it uses both canvas and SVG. It supports lots of different chart types and is very easy to use. The URL is https://www.rgraph.net Cheers

  • May 14, 2020 at 08:48
    Permalink

    I dont see any point of this video. You need to show how the fetch function works … not play around like we already know it. waste of time …

  • May 14, 2020 at 08:48
    Permalink

    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?

  • May 14, 2020 at 08:48
    Permalink

    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?

  • May 14, 2020 at 08:48
    Permalink

    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

Leave a Reply