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

Aug 15, 2023

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:    • 1.4: JSON - Working with Data and API…
🎥 PREVIOUS LESSON:    • 1.2 Tabular Data - Working With Data …
🎥 FULL COURSE:    • Working with Data and APIs in JavaScript

💻https://github.com/CodingTrain/Intro-…
🔗https://www.chartjs.org/

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

🎥 Coding Challenges:    • Coding Challenges
🎥 Intro to Programming:    • Start learning here!

🔗 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-o…

Content

0.269 -> let's review what we did in the previous

2.19 -> video so this video is entirely

3.929 -> dependent this is part two of graphing a

7.7 -> CSV data file so in the previous video

10.71 -> we went and got global world

13.29 -> temperatures the average world

15.15 -> temperature from 1880 to present we got

18.24 -> that as a CSV comma separated values

20.34 -> file from NASA we parsed it using some

24 -> simple string parsing techniques with

25.769 -> the split function now we've a below log

29.22 -> that data but instead of console logging

31.05 -> that data I want to graph it there are

32.88 -> so many different approaches we could

34.26 -> take there are many JavaScript libraries

36.54 -> for doing for making charts they're

40.2 -> probably one of the most famous ones is

41.94 -> d3 a data visualization library for

44.34 -> JavaScript we could also draw our own

46.379 -> chart just by using html5 canvas and

50.129 -> drawing functions or using something

51.719 -> like p5.js which is a creative coding

54.539 -> JavaScript library that I use a ton to

56.94 -> draw all sorts of kinds of interactive

59.01 -> animations and I could draw something

60.57 -> based on the data there but I want to

62.399 -> show you just kind of what might be the

64.08 -> quickest path right now to going from

66.119 -> data to chart in the browser and so a

68.4 -> simple tool a library JavaScript line

70.59 -> for doing this is chart J s chart j s is

73.65 -> a library you can import right there

75.299 -> into your client-side JavaScript with

77.189 -> creating a chart object you can just

79.83 -> configure it you can give it the data

81.33 -> give it some colors tell it where they

83.07 -> want to line our bar chart and poof

84.869 -> you'll see the chart on the webpage in a

88.17 -> canvas so I'm going to show you

89.46 -> step-by-step how to import the library

91.439 -> add a canvas draw the chart and then

94.829 -> draw the chart using your own data so

97.32 -> here we are the chart J s website

99.479 -> there's a lot of examples a lot of

101.88 -> documentation the source code on github

103.68 -> I encourage you to check out more about

105.57 -> the JavaScript library I'm gonna move to

108.27 -> this get started page which will give me

111.869 -> the basic basics techniques for using

114.63 -> chart touch is so first thing is how do

117.03 -> I even import the library and this is

119.159 -> crucial I'm gonna use a chart to ask CDN

121.86 -> so see the N stands for content delivery

124.02 -> network I'm going to load the library

126.149 -> via URL it's hosted somewhere on the

127.74 -> internet so let's click on this and see

130.259 -> where that takes us it takes us to J s

132.569 -> deliver then

134.22 -> I need to do is go down here we can see

136.53 -> this is the most recent version two

139.08 -> point eight point zero of the library if

141.12 -> I click on this let's go up up a new

142.77 -> webpage look that's actually that's the

145.38 -> JavaScript library all the code for the

147 -> JavaScript library itself it's actually

148.26 -> been minified meaning the raw source of

151.77 -> the library has line breaks and big

153.69 -> variable names and all that kind of

154.86 -> stuff but I'm just gonna all I need is

156.6 -> this URL right here I'm gonna go back

158.82 -> into my code I'm gonna go into the

162 -> header and I'm gonna say script I'm

164.07 -> going to say source equals and what I

166.53 -> want is the URL to the JavaScript

168.9 -> library I want to use chart Dutchess

170.43 -> which is now I'm gonna paste that right

172.709 -> in as soon as I close this Visual Studio

175.77 -> code is doing a nice thing for me it's

177.48 -> closing the script tag automatically but

179.37 -> otherwise we're gonna have to type that

180.51 -> in so open script tag source equals this

183.75 -> and the URL and then close script tag so

187.17 -> now I have chart KS loaded the next

190.8 -> thing I need is I need to have a canvas

193.459 -> in my HTML itself so I need to add a

197.88 -> canvas element I'm gonna give it an ID

201.87 -> like chart and I think I also need to

206.07 -> give it a whiff let's just try 400 and a

208.68 -> height 400 and those should be in quotes

210.54 -> Thank You Visual Studio code for

212.16 -> correcting me when I hit save so there

215.22 -> you go so you can now see I've added a

216.81 -> canvas I gave them an ID and I gave it a

219.09 -> width and a height so somehow I need to

222.12 -> tell this data to graph itself on that

226.32 -> canvas let's go back to that getting

228.69 -> started page and look we've got some

231.45 -> cook it's given us some code here this

233.73 -> is code for a some sort of bar chart

236.91 -> with some data so one way that we could

239.549 -> actually start working with this it's

241.44 -> just let's just copy-paste and take this

243.239 -> code so when you're working with a new

244.769 -> library you can try a variety of things

246.81 -> you could read through the documentation

247.95 -> you could find an example for me this

249.87 -> getting started example is gonna be

251.67 -> perfect to work with so I'm just gonna

253.14 -> take this I'm gonna copy it and I'm

256.019 -> gonna paste it here at the top of my

258.51 -> script tag okay so there it is so in

261.359 -> theory when i refresh the page i should

265.68 -> see a chart no

268.45 -> what happened so we've now encountered

270.88 -> something that has to do with the

273.58 -> asynchronous events that happen when you

275.68 -> load a web page so it's saying cannot

277.93 -> read properly get context of null at

280.27 -> index 13 let's go to index line 13

283.62 -> document all okay actually this is a

286 -> different problem I didn't name my

288.19 -> canvas my chart I named it chart so

290.92 -> let's see if this fixes the error that

293.38 -> there's two there is a different error

294.79 -> that I thought was happening but this is

296.14 -> clearly an error the ID of my chart is

298.45 -> just chart not my chart oh there it is

301.18 -> so look there's the chart beautiful yeah

304.3 -> so I have this so I have this chart it's

307.63 -> counting votes for different colors it's

309.85 -> got a scale on the y-axis a scale on the

312.34 -> x-axis and I see my data console.log how

315.76 -> do I get my data onto the chart well

318.82 -> let's look at the code and see if we

320.17 -> could just sort of do some detective

321.61 -> work and figure it out and if we get

323.08 -> stuck we can refer to the chart touch is

324.88 -> documentation so we can see here label

328.9 -> well the label that I want is a global

334.56 -> average temperature and again I might

338.26 -> need to be I'm might need to be a bit

339.94 -> more thoughtful about the accuracy of

341.62 -> that statement what is it truly if I

343.48 -> look at the NASA dataset but global

346.57 -> average temperature will do for now so

348.1 -> let's just change that and we can see

349.69 -> look it's showing us the global average

351.82 -> temperature oh but these labels red blue

354.79 -> yellow where did those come from those

357.58 -> are here labels so what I I don't want

362.68 -> these labels what I want are the years

367 -> to be the labels the years that I'm

369.22 -> parsing to be the labels that go across

370.81 -> the x-axis so what if I were to say

374.37 -> first of all this is this example is

377.02 -> using older JavaScript syntax no time

379.99 -> you're watching this was probably

380.83 -> something different but I'm gonna say

382.84 -> Const instead of var and I'm gonna say

385.21 -> Const here instead of var just to update

388.66 -> my variable declarations if you're

390.64 -> wondering what Const is I have some

391.96 -> other videos about that then I am going

394.9 -> to create another variable that's just

396.94 -> going to call I'm gonna call it X labels

398.47 -> for the x-axis and set it equal to

402.07 -> a blank array and I'm gonna put that

407.19 -> variable referenced here so the actual

411.55 -> labels of my chart are pointing to an

414.61 -> array called X labels and there's no

417.31 -> reason why I couldn't as I'm reading

418.99 -> each year just add each year to that

425.05 -> array X labels so now I have my data

428.02 -> parsing I have my chart creation so what

430.72 -> I want to do is parse all the data and

433.36 -> start adding the labels to the chart

435.16 -> that's in that's being drawn on the

436.9 -> canvas let's see what happens there hmm

439.99 -> okay don't see any labels now I have the

444.19 -> other problem that I was thinking would

445.87 -> happen which is I am making the chart

449.05 -> first and then loading the data so this

452.95 -> is a problem weirdly by the way if I

455.11 -> just kind of like resize the window

456.76 -> suddenly the data appears but that's it

462.79 -> should appear when I first load the page

464.47 -> so I've got to do this in a different

466.63 -> order I have this get data function that

469.57 -> gets the data asynchronously using a

472.93 -> weight fetch a weight response dot text

476.41 -> what I want to do now then is go up and

478.72 -> put the this creation of the chart into

484.06 -> a separate function so I'm gonna say

486.19 -> function chart it and all of that's

492.55 -> going to be in a function now that this

495.52 -> example that was provided on the chart

497.5 -> KS getting started page has a lot of

500.08 -> really useful but for me right now extra

503.14 -> stuff in it so there are a lot of

505.15 -> configuration options how you can have

507.58 -> the chart up here I'm actually gonna

509.65 -> just remove those right now as an

511.93 -> exercise for you that all suggests at

513.55 -> the end is maybe find different ways of

515.469 -> drawing the chart by looking up in the

516.91 -> documentation and then also I'm just

519.25 -> going to stick with one color so I'm

522.969 -> gonna take all of that out right now I

524.68 -> probably could take out the color

525.7 -> entirely I'm gonna hit save so you can

527.56 -> see at least now in my charted function

529.99 -> there's a little bit less stuff going on

532.39 -> so now I could call this charted

534.55 -> function

536.05 -> if we go back this is the same thing

537.79 -> I've got the same problem but X labels

540.339 -> is not defined so I somehow I owe the X

543.73 -> labels variable needs to be a global

545.32 -> variable I actually don't like something

547.269 -> about what I'm doing here so I'm gonna

548.529 -> do some refactoring as we get to the end

550.209 -> to clean up how I'm gonna communicate

552.55 -> communicate between getting the data and

554.769 -> drawing the chart but for right now I'm

556.87 -> gonna make X labels a global variable

559.3 -> I'm gonna call the chart it function and

562.089 -> call to get data function still the same

569.41 -> problem well you would think okay what

571.42 -> if I call get data before chart it still

576.07 -> the same problem because remember get

577.48 -> data is asynchronous so the solution

580.029 -> that I want to employ here is make chart

581.709 -> it an asynchronous function and then

584.079 -> actually call get data at the beginning

586.69 -> of it so if I say oh wait get data now

590.32 -> chart it is going to wait till the data

592.81 -> is done before it does the rest of this

594.55 -> stuff and if we go back we can see there

596.56 -> we go you can see all those labels are

598.959 -> applied there now this is not real data

602.11 -> this is still the data from that's right

605.589 -> here so what I want to do now is let me

608.26 -> do constant Y temps so this is the

610.899 -> temperatures for the y axis and then I'm

613.839 -> going to say under data I'm gonna say Y

619.63 -> temps instead of that dummy data and

622.529 -> then here when I'm reading each

625.029 -> temperature I'm going to say Y temps dot

629.62 -> push temp so now let's take a look at

633.31 -> this

633.61 -> there we go now we see the global

637.45 -> temperature from 1880 all the way to

640.329 -> 2018 now what's going on here negative

643.06 -> point to zero what are these

644.589 -> temperatures remember these are the

646.89 -> difference from the global mean but are

651.43 -> between the period of 1951 to 1980 and

653.709 -> that global mean can be found on this

655.779 -> webpage here it is 14 degrees Celsius so

659.44 -> if I want it to be accurate about what

661.24 -> I'm doing here I'm going to say I want

668.02 -> the temperature

668.86 -> be temp plus 14 right I just want to add

672.01 -> 14 Celsius I think this is gonna cause a

674.17 -> problem let's see what happens here

675.64 -> let's go back to my graph I don't see

680.89 -> anything different here push 10 plus 14

684.33 -> mmm-hmm well I think this this is I

687.37 -> think what's going on here if I'm right

689.35 -> we'll find out in a second is that any

692.23 -> time you're doing parsing from a text

694.18 -> file your stuff is still text it's a

696.13 -> string it doesn't know how to add 14 to

699.07 -> a string I can actually use a function

701.02 -> called parse float which is a global

704.88 -> JavaScript function that's available

706.48 -> that takes a string and turns it into a

709.48 -> number so now I can actually add the

712.12 -> number 14 to the number attempt so now

715.39 -> we should see there we go

717.04 -> we can see this is the actual average

720.03 -> temperature from 1880 to 2018 this is a

724.3 -> bar chart I don't think the bar chart is

726.22 -> the best way to describe this it's also

727.93 -> kind of funny to me that the only this

729.97 -> one is colored differently I think

731.26 -> that's because I remove the color thing

733.83 -> so let's see if we can fix that so I

736.81 -> have a feeling that if I get rid of the

738.31 -> I'm just guessing but I have a feeling

740.32 -> the eight the chart ogs works if I get

742.36 -> rid of the color as an API as an array

745.18 -> yes it applies the color to everything

747.42 -> and then I can also change this from

752.98 -> type 2 bar to line and there we go now I

756.07 -> don't necessarily want the fill below it

758.17 -> this is a good example of where I need

759.94 -> to look up in the documentation because

761.41 -> I have no idea how to turn the fill

763.66 -> below the line off it's probably some

766.18 -> parameter than either goes and options

767.59 -> or with the data set let's see if I can

769.39 -> find that on the chart Digest website

771.15 -> here along the side is all of the

774.19 -> different things I think I imagine if I

775.84 -> go into line it's showing me line

779.08 -> example usage data set properties fill

781.96 -> there we go

782.89 -> fill these are all these different

784.39 -> things I could try fill boolean or

787.75 -> string default is true so I think that

790.63 -> means if I add fill false here as

794.43 -> another option in the data sets object

797.79 -> then if I go back here we can say yes no

802.31 -> Phil that looks great I probably want to

805.129 -> think about what this label is to be

807.23 -> more accurate this is pretty important

809.269 -> so how about I say exactly what the data

812.3 -> is so here's the exact data I got the

815.839 -> zonal annual means the combined land

817.519 -> service air and sea water surface

818.87 -> temperature so land ocean temperature

822.649 -> index so let's do but let's let's change

826.37 -> the label to this in Celsius and then I

832.85 -> have to type that degrees symbols we

834.589 -> know how to take the degree it's simple

836.379 -> apparently it's option shift 8 to type

839.389 -> the degree symbol I have not actually

840.649 -> tried this let's see if it works yes

842.66 -> there we go we've got the Celsius and

846.339 -> let me go back and we can see there we

848.449 -> go so now I have my label up there what

851.42 -> I wanted to let me refactor this code a

853.009 -> little bit so I don't really love the

854.779 -> use of these global variables here I

856.639 -> think what would make more sense and

858.649 -> there's so many different ways we could

860.72 -> do this but let me just do one way to

863.66 -> make it a little simple simpler let me

865.579 -> actually have a local variable here

867.47 -> which are both I'm gonna call these X's

870.41 -> and Y's so I'm gonna and then I'm just

874.279 -> gonna push the X's here push the Y's

878.24 -> here and then when this is done I'm

880.879 -> gonna return an object with X's and Y's

883.61 -> in it so the get data function is

886.309 -> actually going to return an object with

888.019 -> both of those arrays and so then what I

890.72 -> can say here is I can say the data

894.259 -> equals a weight get data and then here

897.62 -> under labels I want data X's and here

900.92 -> under y under under the data set I want

903.8 -> data wise so again I'm not sure this is

907.04 -> the best solution but at least now the

909.8 -> chart it function and the get data

912.35 -> function kind of operate independently

914.089 -> without sort of sharing a global

915.529 -> variable which could cause some problems

917.12 -> later down the road and we can see this

919.91 -> still works just fine it might be nice

923.36 -> to also just add the degree symbol here

926.24 -> I have no idea if that's possible it's

928.22 -> making these labels automatically so

930.62 -> looking again at the documentation and I

932.72 -> did just take a little break to find

934.429 -> this in advance

935.39 -> but under here under axes under labeling

940.64 -> is what I want to do I want to change

942.17 -> the way the labeling of the acts acts

944.75 -> the y-axis works so if I click here we

948.29 -> can see there are and that we can see

951.29 -> these are all the possibilities but

953.029 -> actually this is what I want custom tick

955.579 -> format so each one of these labels on

960.98 -> the left is a tick like tick tick tick

964.01 -> tick like that and so what I want to do

966.92 -> is I need to add these options back this

971.24 -> is something I removed earlier so let me

973.16 -> add the options back under y-axes under

978.14 -> ticks this is a callback function this

981.529 -> is kind of crazy so this is this is an

983.36 -> example for including a dollar sign it's

985.04 -> basically saying here's a function that

986.69 -> defines how to label the y-axis take the

990.56 -> value and turn it into dollar sign plus

993.86 -> the value so what I want to do is take

995.899 -> the value and turn it into value plus

1001.32 -> degrees and I don't get rid of this

1003.61 -> comment and now I have that configured

1006.04 -> as part of my chart and here we are look

1009.49 -> there you go now you can see the degree

1010.959 -> symbol is there so let me just spread

1013.089 -> this back out again I feel like this

1014.589 -> whole the canvas size is weird so I'm

1017.589 -> gonna make this like 800 by 480 the

1021.19 -> console and voila we have our finished

1024.339 -> chart that shows the combined land

1027.52 -> surface air and sea surface water

1028.929 -> temperature in Celsius average from 1880

1032.98 -> all the way to 2018 and you can see here

1036.22 -> by the way it's a very very good

1038.949 -> evidence that the earth is warming the

1041.26 -> average temperature over time since 1882

1044.38 -> now is going up to recap we have seen

1047.89 -> how to load tabular data in the form of

1051.58 -> a comma separated values file we've seen

1054.1 -> a little bit about how to parse that

1055.63 -> file manually although ultimately we

1057.64 -> might want to use a parsing engine

1059.65 -> that's going to be able to handle all

1061.179 -> sorts of errors or things that might

1062.83 -> come up once we have that data we've

1065.53 -> seen how to repackage that data for a

1067.36 -> different

1067.89 -> in this case chart is to apply a chart

1071.37 -> with that data to the canvas and we've

1073.38 -> seen how to adjust a little bit of the

1076.26 -> sort of styles and full layout and

1078.63 -> format of that chart so what should you

1081.51 -> do here so you've been a number of

1082.77 -> couple of different options one exercise

1084.9 -> is just do exactly the same thing as I

1086.91 -> have here but do it with your own data

1088.98 -> what is some what are some see it what's

1090.93 -> some CSV data that you can find another

1093.54 -> thing that might be fun to try is go and

1095.7 -> get p5 to p5.js library could you draw

1098.31 -> your own line graph without chart.js but

1100.83 -> using this raw drawing functionality of

1103.35 -> p5.js i will include a solution to that

1106.2 -> in this video's description another

1107.88 -> exercise that you might try is actually

1109.5 -> graph multiple lines on the same chart

1111.9 -> I've many cases you want to look at data

1114 -> and good paracin to other data so for

1115.86 -> example in that same data file you get

1117.93 -> the average temperatures for the

1119.01 -> Northern Hemisphere and for the southern

1120.9 -> hemisphere so you could graph all three

1123.18 -> the global temperature northern

1124.77 -> hemisphere southern hemisphere all

1125.91 -> together on that chart with different

1127.62 -> colors for each line and I'll include a

1129.39 -> solution to that also as an exercise so

1131.37 -> thank you for watching this video this

1132.84 -> concludes the second part of the first

1134.85 -> module we've learned about the fetch

1136.83 -> function with images and now we've

1138.45 -> learned about the fetch function with

1139.95 -> CSVs and also graphing the data with

1143.4 -> chart on Chasse in the next project

1145.14 -> we're going to look at how to get data

1147.54 -> from a web api something that's not a

1150.15 -> local file and data that changes every

1153.18 -> so often and the data set that example

1155.13 -> that only uses little is the location

1156.84 -> latitude and longitude of the

1158.91 -> international space station where it is

1160.41 -> above the earth then I'm going to show

1162.18 -> you how to draw its location on a map

1164.34 -> and refresh its location every so often

1168.06 -> so that it moves in real time so that's

1170.79 -> the last part of this first module of

1173.31 -> working with data and api's and I'll see

1174.9 -> you in that video thanks very much

1180 -> [Music]

Source: https://www.youtube.com/watch?v=5-ptp9tRApM