create account

Coding DIY part 1: Fetching data from a csv file and plotting a graph with it by lifeof.abdul

View this thread on: hive.blogpeakd.comecency.com
· @lifeof.abdul ·
$22.24
Coding DIY part 1: Fetching data from a csv file and plotting a graph with it
<div class="text-justify">

<center>![](https://images.ecency.com/DQmeb68fVa2ro3QUqB7em6wwkxZmUFbYT6Dq6r8K5fW2i1s/online_youtube_facebook_tutorials_channel_mak_made_with_postermywall.jpg)
<sub>Made with postermywall </sub></center>

Good day, friends. Today, I will be exploring how to use the javascript programming language to get data from an external source. At the end of this post, I will plot a graph that shows the global temperature change since 1980 using CSV data from the National Aeronautics and Space Administration (NASA). We will be using the chat.js library and HTML to accomplish this. Let's get started.

>### Step 1: Creating an HTML file to display the graph on the webpage

The first thing we will do is create an HTML index file to display our data on the webpage. Because I will be plotting a graph, I will add the canvas element to my HTML file, and that is what we will use to display the graph. The screenshot below shows our HTML boilerplate to get started. I have included the canvas in a 400 x 800 size. I have also included the chart. Js CDN because that is what I will be using to plot the graph.

<center>![](https://images.ecency.com/DQmTQVjXJ1Qx5BqHF7CvRaMMzFTLABte8ZAxEqVG95fxH2v/temp1.png)</center>

>### Step 2: Getting the CSV data from NASA's  [Goddard Institute for Space Studies](https://www.giss.nasa.gov/).

<center> https://images.ecency.com/DQmYpccUGS7oixdUwEtr3sRJGGBpzNDLmUrF6M7BaUBkfFU/temp2.png
https://images.ecency.com/DQmeFfpxtpbSLi4o9myihKuQs3JxTw1NSowG2nQYhZZaowr/temp7.png
<sub> Viewing the csv data in Visual studio code</sub>
</center>


>### Step 3: Creating a Javascript function to get the data from the CSV file.

I will embed the Javascript code in my HTML file, so I opened a new script inside my HTML to contain the Javascript codes. Here, we create a javascript function named, getData(). In this function, we will be using the Javascript Fetch API to fetch the data from the CSV file, which we can then use for the graph. In Javascript, if you want to get data from a different source, you use the Fetch API. You can also use it to share data between a client and a server. The screenshot below shows the function. The screenshot below shows the code to get the CSV data.


<center>![](https://images.ecency.com/DQmZedx85h1j1gDyfWLWgUEC2UmCayTbBkmAWCiVRCbDXo1/temp3.png)
</center>



Step 4: This is the final stage. where we create another function to plot the graph. In this function, we will be using Chart.js that we have added to our HTML file. This is where all the labels and the graph's customization are added. The code is shown below.

<center> ![](https://images.ecency.com/DQmc9u21xpaSFSue9jrUz8qhwCmZ6MbmSWhb9PR3piAjaXq/temp4.png)
</center>


Finally, the graph is ready. It shows the global average temperature change using the annual zonal means. You can clearly see that there has been an increase in global temperatures since 1980.

<center> ![](https://images.ecency.com/DQmUHWJRCczAT5eKiqc4VSSuitRdMhipNP1Je6n8ARFwZQu/temp5a.png)
</center>


<center>

------------------------------------

```I hope you found this useful. I am Abdul-Salam Issahaku, from Ghana. I am a student web developer and a blockchain enthusiast. I blog about technology and investments. You can follow me to be part of my Hive family. Thank you for your time.```

---------------------------------------------- 

</center>

All images used in this post are screenshots from visual studio code.

 </div>
👍  , , , , , , , , , , , , , , , , , , , , , , , , , , , , , , , , , , , , , , , , , , , , , , , , , , , , , , , , , , , , , , , , and 318 others
properties (23)
authorlifeof.abdul
permlinkcoding-diy-part-1-fetching
categoryhive-189641
json_metadata{"links":["https://www.giss.nasa.gov/"],"image":["https://images.ecency.com/DQmeb68fVa2ro3QUqB7em6wwkxZmUFbYT6Dq6r8K5fW2i1s/online_youtube_facebook_tutorials_channel_mak_made_with_postermywall.jpg","https://images.ecency.com/DQmTQVjXJ1Qx5BqHF7CvRaMMzFTLABte8ZAxEqVG95fxH2v/temp1.png","https://images.ecency.com/DQmYpccUGS7oixdUwEtr3sRJGGBpzNDLmUrF6M7BaUBkfFU/temp2.png","https://images.ecency.com/DQmeFfpxtpbSLi4o9myihKuQs3JxTw1NSowG2nQYhZZaowr/temp7.png","https://images.ecency.com/DQmZedx85h1j1gDyfWLWgUEC2UmCayTbBkmAWCiVRCbDXo1/temp3.png","https://images.ecency.com/DQmc9u21xpaSFSue9jrUz8qhwCmZ6MbmSWhb9PR3piAjaXq/temp4.png","https://images.ecency.com/DQmUHWJRCczAT5eKiqc4VSSuitRdMhipNP1Je6n8ARFwZQu/temp5a.png"],"tags":["hive-189641","programming","coding","diy","neoxian","javascript","diyhub","proofofbrain","ocd"],"description":"","app":"ecency/3.0.30-vision","format":"markdown+html"}
created2023-01-30 21:49:36
last_update2023-01-30 21:49:36
depth0
children8
last_payout2023-02-06 21:49:36
cashout_time1969-12-31 23:59:59
total_payout_value11.166 HBD
curator_payout_value11.077 HBD
pending_payout_value0.000 HBD
promoted0.000 HBD
body_length3,462
author_reputation26,928,429,948,423
root_title"Coding DIY part 1: Fetching data from a csv file and plotting a graph with it"
beneficiaries[]
max_accepted_payout1,000,000.000 HBD
percent_hbd10,000
post_id120,338,763
net_rshares35,560,053,733,303
author_curate_reward""
vote details (382)
@diyhub ·
##### Thank you for sharing this post in the [DIYHUB Community](https://peakd.com/c/hive-189641/created)!
Your content got selected by our fellow curator tibfox & you just received a little thank you upvote from us for your great work! Your post will be featured in one of our recurring compilations which are aiming to offer you a stage to widen your audience within the DIY scene of Hive. Stay creative & HIVE ON!

<center><a href="https://peakd.com/trending/hive-189641"><img src="https://files.peakd.com/file/peakd-hive/diyhub/23tcEcHsXzT1g5V7Ub8pC5vGQzQnrdPURcYsxxVDDtD4atSyyPJufncjzVKchNwCNugoi.png"></a>
<a href="https://hivesigner.com/sign/account-witness-vote?witness=diyhub&approve=1">Please vote for our hive witness <3</a></center>
properties (22)
authordiyhub
permlinkre-coding-diy-part-1-fetching-20230130t233305z
categoryhive-189641
json_metadata"{"app": "beem/0.24.26"}"
created2023-01-30 23:33:06
last_update2023-01-30 23:33:06
depth1
children0
last_payout2023-02-06 23:33:06
cashout_time1969-12-31 23:59:59
total_payout_value0.000 HBD
curator_payout_value0.000 HBD
pending_payout_value0.000 HBD
promoted0.000 HBD
body_length743
author_reputation341,136,000,862,425
root_title"Coding DIY part 1: Fetching data from a csv file and plotting a graph with it"
beneficiaries[]
max_accepted_payout1,000,000.000 HBD
percent_hbd10,000
post_id120,342,708
net_rshares0
@hivebuzz ·
Congratulations @lifeof.abdul! You have completed the following achievement on the Hive blockchain And have been rewarded with New badge(s)

<table><tr><td><img src="https://images.hive.blog/60x70/http://hivebuzz.me/@lifeof.abdul/upvoted.png?202301310341"></td><td>You received more than 1500 upvotes.<br>Your next target is to reach 1750 upvotes.</td></tr>
</table>

<sub>_You can view your badges on [your board](https://hivebuzz.me/@lifeof.abdul) and compare yourself to others in the [Ranking](https://hivebuzz.me/ranking)_</sub>
<sub>_If you no longer want to receive notifications, reply to this comment with the word_ `STOP`</sub>



**Check out our last posts:**
<table><tr><td><a href="/hive-122221/@hivebuzz/pud-202302"><img src="https://images.hive.blog/64x128/https://i.imgur.com/805FIIt.jpg"></a></td><td><a href="/hive-122221/@hivebuzz/pud-202302">Hive Power Up Day - February 1st 2023</a></td></tr><tr><td><a href="/hive-139531/@hivebuzz/proposal-2324"><img src="https://images.hive.blog/64x128/https://i.imgur.com/RNIZ1N6.png"></a></td><td><a href="/hive-139531/@hivebuzz/proposal-2324">The Hive Gamification Proposal</a></td></tr></table>
properties (22)
authorhivebuzz
permlinknotify-lifeofabdul-20230131t035728
categoryhive-189641
json_metadata{"image":["http://hivebuzz.me/notify.t6.png"]}
created2023-01-31 03:57:27
last_update2023-01-31 03:57:27
depth1
children0
last_payout2023-02-07 03:57:27
cashout_time1969-12-31 23:59:59
total_payout_value0.000 HBD
curator_payout_value0.000 HBD
pending_payout_value0.000 HBD
promoted0.000 HBD
body_length1,155
author_reputation369,401,215,269,242
root_title"Coding DIY part 1: Fetching data from a csv file and plotting a graph with it"
beneficiaries[]
max_accepted_payout1,000,000.000 HBD
percent_hbd10,000
post_id120,349,154
net_rshares0
@hivetrending ·
For future posts on this topic, I'd recommend posting to the "Programming & Dev" community. :)
properties (22)
authorhivetrending
permlinkre-lifeofabdul-rpcu9a
categoryhive-189641
json_metadata{"tags":["hive-189641"],"app":"peakd/2023.1.1"}
created2023-01-31 14:44:00
last_update2023-01-31 14:44:00
depth1
children2
last_payout2023-02-07 14:44:00
cashout_time1969-12-31 23:59:59
total_payout_value0.000 HBD
curator_payout_value0.000 HBD
pending_payout_value0.000 HBD
promoted0.000 HBD
body_length94
author_reputation55,829,917,802,958
root_title"Coding DIY part 1: Fetching data from a csv file and plotting a graph with it"
beneficiaries[]
max_accepted_payout1,000,000.000 HBD
percent_hbd10,000
post_id120,361,617
net_rshares0
@leoplaw · (edited)
https://peakd.com/c/hive-169321/
properties (22)
authorleoplaw
permlinkre-hivetrending-rpderu
categoryhive-189641
json_metadata{"tags":["hive-189641"],"app":"peakd/2023.1.1"}
created2023-01-31 22:07:18
last_update2023-01-31 22:15:03
depth2
children0
last_payout2023-02-07 22:07:18
cashout_time1969-12-31 23:59:59
total_payout_value0.000 HBD
curator_payout_value0.000 HBD
pending_payout_value0.000 HBD
promoted0.000 HBD
body_length32
author_reputation180,433,913,600,446
root_title"Coding DIY part 1: Fetching data from a csv file and plotting a graph with it"
beneficiaries[]
max_accepted_payout1,000,000.000 HBD
percent_hbd10,000
post_id120,372,939
net_rshares0
@lifeof.abdul ·
Thank you for the recommdation @hivetrending. I will comply with that in my next post on this topic
properties (22)
authorlifeof.abdul
permlinkre-hivetrending-2023131t204310543z
categoryhive-189641
json_metadata{"tags":["hive-189641"],"app":"ecency/3.0.30-vision","format":"markdown+html"}
created2023-01-31 20:43:21
last_update2023-01-31 20:43:21
depth2
children0
last_payout2023-02-07 20:43:21
cashout_time1969-12-31 23:59:59
total_payout_value0.000 HBD
curator_payout_value0.000 HBD
pending_payout_value0.000 HBD
promoted0.000 HBD
body_length99
author_reputation26,928,429,948,423
root_title"Coding DIY part 1: Fetching data from a csv file and plotting a graph with it"
beneficiaries[]
max_accepted_payout1,000,000.000 HBD
percent_hbd10,000
post_id120,370,708
net_rshares0
@pizzabot ·
<center>🍕 PIZZA !
 @lifeof.abdul! The Hive.Pizza team manually upvoted your post.

<sub>Please <a href="https://vote.hive.uno/@pizza.witness">vote for pizza.witness</a>!</sub></center>
properties (22)
authorpizzabot
permlinkre-coding-diy-part-1-fetching-20230130t232850z
categoryhive-189641
json_metadata"{"app": "beem/0.24.19"}"
created2023-01-30 23:28:51
last_update2023-01-30 23:28:51
depth1
children0
last_payout2023-02-06 23:28:51
cashout_time1969-12-31 23:59:59
total_payout_value0.000 HBD
curator_payout_value0.000 HBD
pending_payout_value0.000 HBD
promoted0.000 HBD
body_length184
author_reputation5,988,305,455,968
root_title"Coding DIY part 1: Fetching data from a csv file and plotting a graph with it"
beneficiaries[]
max_accepted_payout1,000,000.000 HBD
percent_hbd10,000
post_id120,342,570
net_rshares0
@poshtoken ·
https://twitter.com/1194664024421519361/status/1620540344650850304
<sub> The rewards earned on this comment will go directly to the people sharing the post on Twitter as long as they are registered with @poshtoken. Sign up at https://hiveposh.com.</sub>
properties (22)
authorposhtoken
permlinkre-lifeofabdul-coding-diy-part-1-fetching-189510383
categoryhive-189641
json_metadata"{"app":"Poshtoken 0.0.1","payoutToUser":[]}"
created2023-01-31 21:53:57
last_update2023-01-31 21:53:57
depth1
children0
last_payout2023-02-07 21:53:57
cashout_time1969-12-31 23:59:59
total_payout_value0.000 HBD
curator_payout_value0.000 HBD
pending_payout_value0.000 HBD
promoted0.000 HBD
body_length254
author_reputation3,920,364,705,121,933
root_title"Coding DIY part 1: Fetching data from a csv file and plotting a graph with it"
beneficiaries
0.
accountreward.app
weight10,000
max_accepted_payout1,000,000.000 HBD
percent_hbd0
post_id120,372,637
net_rshares0
@stemsocial ·
re-lifeofabdul-coding-diy-part-1-fetching-20230131t030008488z
<div class='text-justify'> <div class='pull-left'>
 <img src='https://stem.openhive.network/images/stemsocialsupport7.png'> </div>

Thanks for your contribution to the <a href='/trending/hive-196387'>STEMsocial community</a>. Feel free to join us on <a href='https://discord.gg/9c7pKVD'>discord</a> to get to know the rest of us!

Please consider delegating to the @stemsocial account (85% of the curation rewards are returned).

You may also include @stemsocial as a beneficiary of the rewards of this post to get a stronger support.&nbsp;<br />&nbsp;<br />
</div>
👍  
properties (23)
authorstemsocial
permlinkre-lifeofabdul-coding-diy-part-1-fetching-20230131t030008488z
categoryhive-189641
json_metadata{"app":"STEMsocial"}
created2023-01-31 03:00:09
last_update2023-01-31 03:00:09
depth1
children0
last_payout2023-02-07 03:00:09
cashout_time1969-12-31 23:59:59
total_payout_value0.000 HBD
curator_payout_value0.000 HBD
pending_payout_value0.000 HBD
promoted0.000 HBD
body_length565
author_reputation22,406,444,000,684
root_title"Coding DIY part 1: Fetching data from a csv file and plotting a graph with it"
beneficiaries[]
max_accepted_payout1,000,000.000 HBD
percent_hbd10,000
post_id120,348,069
net_rshares1,362,897,522
author_curate_reward""
vote details (1)