{"id":6113,"date":"2020-04-09T19:52:52","date_gmt":"2020-04-09T19:52:52","guid":{"rendered":"https:\/\/max-drake.cc\/?p=6113"},"modified":"2020-04-17T12:48:56","modified_gmt":"2020-04-17T12:48:56","slug":"api-tutorial-with-covid-data-postman-javascript-to-webpage","status":"publish","type":"post","link":"https:\/\/max-drake.cc\/?p=6113","title":{"rendered":"API tutorial with Covid data, Postman &#038; JavaScript to webpage"},"content":{"rendered":"\n<p>I want to play with 1\/ Covid Data &amp; 2\/ API&#8217;s. I&#8217;ve done some bits with Postman &amp; API&#8217;s before but not very successfully. So this time I&#8217;m watching the following video:<\/p>\n\n\n\n<figure class=\"wp-block-embed-youtube wp-block-embed is-type-video is-provider-youtube wp-embed-aspect-4-3 wp-has-aspect-ratio\"><div class=\"wp-block-embed__wrapper\">\n<iframe title=\"COVID-19 Visualizer: Postman live stream on Twitch\" width=\"678\" height=\"509\" data-src=\"https:\/\/www.youtube.com\/embed\/a8qDhFBQlWc?feature=oembed\" frameborder=\"0\" allow=\"accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture\" allowfullscreen src=\"data:image\/svg+xml;base64,PHN2ZyB3aWR0aD0iMSIgaGVpZ2h0PSIxIiB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciPjwvc3ZnPg==\" class=\"lazyload\" data-load-mode=\"1\"><\/iframe>\n<\/div><\/figure>\n\n\n\n<p>It is pulling in the Postman scripts for the API calls and I want to follow on with what they are doing. <\/p>\n\n\n\n<p>After opening Postman, new template and searched for Covid, then got list of Covid sites, these do not need an Authorisation code so you can just grab the data. <\/p>\n\n\n\n<p>I&#8217;m using a GET request on <strong> https:\/\/covidapi.info\/api\/v1\/country\/USA <\/strong> which is John Hopkins series on USA historical data from 22 Jan to 6 April re Confirmed, deaths &amp; recoveries. <\/p>\n\n\n\n<figure class=\"wp-block-image size-large\"><img decoding=\"async\" width=\"1024\" height=\"461\" data-src=\"https:\/\/max-drake.cc\/wp-content\/uploads\/2020\/04\/2020-04-08-15_32_34-Postman-1024x461.jpg\" alt=\"\" class=\"wp-image-6115 lazyload\" data-srcset=\"https:\/\/max-drake.cc\/wp-content\/uploads\/2020\/04\/2020-04-08-15_32_34-Postman-1024x461.jpg 1024w, https:\/\/max-drake.cc\/wp-content\/uploads\/2020\/04\/2020-04-08-15_32_34-Postman-300x135.jpg 300w, https:\/\/max-drake.cc\/wp-content\/uploads\/2020\/04\/2020-04-08-15_32_34-Postman-768x346.jpg 768w, https:\/\/max-drake.cc\/wp-content\/uploads\/2020\/04\/2020-04-08-15_32_34-Postman-1536x691.jpg 1536w, https:\/\/max-drake.cc\/wp-content\/uploads\/2020\/04\/2020-04-08-15_32_34-Postman-2048x921.jpg 2048w, https:\/\/max-drake.cc\/wp-content\/uploads\/2020\/04\/2020-04-08-15_32_34-Postman-50x22.jpg 50w, https:\/\/max-drake.cc\/wp-content\/uploads\/2020\/04\/2020-04-08-15_32_34-Postman-111x50.jpg 111w, https:\/\/max-drake.cc\/wp-content\/uploads\/2020\/04\/2020-04-08-15_32_34-Postman-100x45.jpg 100w, https:\/\/max-drake.cc\/wp-content\/uploads\/2020\/04\/2020-04-08-15_32_34-Postman-222x100.jpg 222w, https:\/\/max-drake.cc\/wp-content\/uploads\/2020\/04\/2020-04-08-15_32_34-Postman-1423x640.jpg 1423w, https:\/\/max-drake.cc\/wp-content\/uploads\/2020\/04\/2020-04-08-15_32_34-Postman-640x288.jpg 640w, https:\/\/max-drake.cc\/wp-content\/uploads\/2020\/04\/2020-04-08-15_32_34-Postman-1707x768.jpg 1707w, https:\/\/max-drake.cc\/wp-content\/uploads\/2020\/04\/2020-04-08-15_32_34-Postman-1920x864.jpg 1920w\" data-sizes=\"(max-width: 1024px) 100vw, 1024px\" src=\"data:image\/svg+xml;base64,PHN2ZyB3aWR0aD0iMSIgaGVpZ2h0PSIxIiB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciPjwvc3ZnPg==\" style=\"--smush-placeholder-width: 1024px; --smush-placeholder-aspect-ratio: 1024\/461;\" \/><\/figure>\n\n\n\n<p>After getting the data pulled in, you can now visualise it inside postman, see the video below:<\/p>\n\n\n\n<figure class=\"wp-block-embed-youtube wp-block-embed is-type-video is-provider-youtube wp-embed-aspect-16-9 wp-has-aspect-ratio\"><div class=\"wp-block-embed__wrapper\">\n<iframe title=\"Postman Visualizer Demo\" width=\"678\" height=\"381\" data-src=\"https:\/\/www.youtube.com\/embed\/i1jU-kivApg?start=104&#038;feature=oembed\" frameborder=\"0\" allow=\"accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture\" allowfullscreen src=\"data:image\/svg+xml;base64,PHN2ZyB3aWR0aD0iMSIgaGVpZ2h0PSIxIiB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciPjwvc3ZnPg==\" class=\"lazyload\" data-load-mode=\"1\"><\/iframe>\n<\/div><\/figure>\n\n\n\n<h4 class=\"wp-block-heading\">Results at end of day 1 with postman &amp; API<\/h4>\n\n\n\n<p>I had a bit of trouble, my code did not visualise as per the top video, although I got part of it showing with hard coded data. Also after playing with it, I thought I could transfer the code straight across to my web page and use it there, not so. <strong><span style=\"color:#cf2e2e\" class=\"color\">Oh bugger<\/span><\/strong>. So I sort of had to start again to look at a way of making an API call and displaying data in a chart on a web page. Postman tested the API and I could look at what was returned. I need to do more to get it on a web page<\/p>\n\n\n\n<h3 class=\"wp-block-heading\">Day 2 , JavaScript Fetch() <\/h3>\n\n\n\n<p>I went to Mr U tube and found this series of coding for what I was interested in Series 1, client side basics (<em>I didn&#8217;t want to get into JQuery and the rest, just something simple<\/em>) , a really good series and it got me started doing the infomation that I wanted but not quite my situation:<\/p>\n\n\n\n<figure class=\"wp-block-embed-youtube wp-block-embed is-type-video is-provider-youtube wp-embed-aspect-16-9 wp-has-aspect-ratio\"><div class=\"wp-block-embed__wrapper\">\n<iframe title=\"Working with Data and APIs in JavaScript\" width=\"678\" height=\"381\" data-src=\"https:\/\/www.youtube.com\/embed\/videoseries?list=PLRqwX-V7Uu6YxDKpFzf_2D84p0cyk4T7X\" frameborder=\"0\" allow=\"accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture\" allowfullscreen src=\"data:image\/svg+xml;base64,PHN2ZyB3aWR0aD0iMSIgaGVpZ2h0PSIxIiB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciPjwvc3ZnPg==\" class=\"lazyload\" data-load-mode=\"1\"><\/iframe>\n<\/div><\/figure>\n\n\n\n<p>Specifically, 1.3 was good as it used Charts.js , exactly what I wanted, but he was parsing CSV data from a file, I wanted to call an API:<\/p>\n\n\n\n<figure class=\"wp-block-embed-youtube wp-block-embed is-type-video is-provider-youtube wp-embed-aspect-16-9 wp-has-aspect-ratio\"><div class=\"wp-block-embed__wrapper\">\n<iframe title=\"1.3: Graphing with Chart.js - Working With Data &amp; APIs in JavaScript\" width=\"678\" height=\"381\" data-src=\"https:\/\/www.youtube.com\/embed\/5-ptp9tRApM?list=PLRqwX-V7Uu6YxDKpFzf_2D84p0cyk4T7X\" frameborder=\"0\" allow=\"accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture\" allowfullscreen src=\"data:image\/svg+xml;base64,PHN2ZyB3aWR0aD0iMSIgaGVpZ2h0PSIxIiB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciPjwvc3ZnPg==\" class=\"lazyload\" data-load-mode=\"1\"><\/iframe>\n<\/div><\/figure>\n\n\n\n<p>So after watching the series a couple of times I ended up watching lots of videos  because I could use the FETCH command on this api endpoint: const <strong><span style=\"color:#cf2e2e\" class=\"color\">api_url =&#8221; https:\/\/covidapi.info\/api\/v1\/country\/NZL&#8221;<\/span><\/strong> and it would return the whole JSON file :<\/p>\n\n\n\n<figure class=\"wp-block-image size-large\"><img decoding=\"async\" width=\"611\" height=\"266\" data-src=\"https:\/\/max-drake.cc\/wp-content\/uploads\/2020\/04\/2020-04-10-11_07_42-Fetch-JSON-from-API.jpg\" alt=\"\" class=\"wp-image-6117 lazyload\" data-srcset=\"https:\/\/max-drake.cc\/wp-content\/uploads\/2020\/04\/2020-04-10-11_07_42-Fetch-JSON-from-API.jpg 611w, https:\/\/max-drake.cc\/wp-content\/uploads\/2020\/04\/2020-04-10-11_07_42-Fetch-JSON-from-API-300x131.jpg 300w, https:\/\/max-drake.cc\/wp-content\/uploads\/2020\/04\/2020-04-10-11_07_42-Fetch-JSON-from-API-50x22.jpg 50w, https:\/\/max-drake.cc\/wp-content\/uploads\/2020\/04\/2020-04-10-11_07_42-Fetch-JSON-from-API-115x50.jpg 115w, https:\/\/max-drake.cc\/wp-content\/uploads\/2020\/04\/2020-04-10-11_07_42-Fetch-JSON-from-API-100x44.jpg 100w, https:\/\/max-drake.cc\/wp-content\/uploads\/2020\/04\/2020-04-10-11_07_42-Fetch-JSON-from-API-230x100.jpg 230w\" data-sizes=\"(max-width: 611px) 100vw, 611px\" src=\"data:image\/svg+xml;base64,PHN2ZyB3aWR0aD0iMSIgaGVpZ2h0PSIxIiB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciPjwvc3ZnPg==\" style=\"--smush-placeholder-width: 611px; --smush-placeholder-aspect-ratio: 611\/266;\" \/><\/figure>\n\n\n\n<p>With 78 lines, a data.count which in console.log(  data.count ) gave the correct answer, and if I did  console.log(  data.result)   it would spit out the Array for the result above, but if I then tried different combinations of  data.result[0] or  data.result[0] .deaths and any variations with square brackets trying to call items in the array I just got UNDEFINED. So after wasting a lot of time doing that I finally went back to the API itself and looked at the docs. So <strong><span style=\"color:#cf2e2e\" class=\"color\">https:\/\/covidapi.info\/ <\/span><\/strong>sent me to <strong><span style=\"color:#cf2e2e\" class=\"color\">https:\/\/github.com\/backtrackbaba\/covid-api<\/span><\/strong> which gave several variations on the endpoints: <\/p>\n\n\n\n<h4 class=\"wp-block-heading\"><em>Examples<\/em><\/h4>\n\n\n\n<ol class=\"wp-block-list\"><li><em> How do I get the global data on any given day? You could use the <a href=\"https:\/\/covidapi.info\/api\/v1\/global\/2020-03-15\"><code>\/api\/v1\/global\/2020-03-15<\/code><\/a> endpoint <\/em><\/li><li><em> How do I get the data for a country in a date-range? Ex: To get the data for India between 10th and 19th March 2020, you could use <a href=\"https:\/\/covidapi.info\/api\/v1\/country\/IND\/timeseries\/2020-03-10\/2020-03-19\"><code>\/api\/v1\/country\/IND\/timeseries\/2020-03-10\/2020-03-19<\/code><\/a> <\/em><\/li><li><em> How do I get the data for the last record for a country? Ex: You&#8217;ll need to get the last date for any country by hitting the <a href=\"https:\/\/covidapi.info\/api\/v1\/latest-date\"><code>\/api\/v1\/latest-date<\/code><\/a> endpoint and then use that date to query the country endpoint like this <a href=\"https:\/\/covidapi.info\/api\/v1\/country\/IND\/2020-03-15\"><code>\/api\/v1\/country\/IND\/2020-03-15<\/code><\/a> <\/em><\/li><\/ol>\n\n\n\n<p>So I modified my endpoint to <strong><span style=\"color:#cf2e2e\" class=\"color\">https:\/\/covidapi.info\/api\/v1\/country\/USA\/timeseries\/2020-02-28\/2020-04-09<\/span><\/strong> and then when I started to do :<\/p>\n\n\n\n<p><em>var data1 = data.result;<br>    \/\/ console.log(data1[i].<strong>date<\/strong>);<br>     \/\/console.log(data1[i].confirmed);<br>     \/\/console.log(data1[i].deaths);<br>     \/\/console.log(data1[i].recovered);<\/em><\/p>\n\n\n\n<p>I could reach in and get specific items in the array. <em>Huray hurray, what a wonderful day!<\/em> I could use DATE to grab the date information, I guessed at that, but when I went back to original API endpoint and tried data.result.date[0] that didn&#8217;t work. Anyway, I have something working and I wanted to get a chart on my web page. <\/p>\n\n\n\n<p>I can now iterate through the data to be able to put it on a chart. I did have trouble getting the string to be able to put the required code in <strong><span style=\"color:#cf2e2e\" class=\"color\">label:   &amp; data:<\/span><\/strong> in the code below, but finally came up with a solution after the code below:<\/p>\n\n\n\n<p>var ctx = document.getElementById(&#8216;myChart&#8217;).getContext(&#8216;2d&#8217;);<br>\nvar chart = new Chart(ctx, {<br>\n    \/\/ The type of chart we want to create<br>\n    type: &#8216;line&#8217;,<\/p>\n\n\n\n<pre class=\"wp-block-code\"><code>\/\/ The data for our dataset\ndata: {\n\n    labels: document.getElementById(\"demo\").innerHTML = dates,\/\/['January', 'February', 'March', 'April', 'May', 'June', 'July'],\/\/data1[i].date,\/\/\n    datasets: [{\n        label: 'My First dataset',\n        fill: false, \n        backgroundColor: 'rgb(255, 99, 132)',\n        borderColor: 'rgb(255, 99, 132)',\n        data: document.getElementById(\"demo\").innerHTML = death    \/\/[0, 10, 5, 2, 20, 30, 45]\/\/ document.getElementById(\"demo\").innerHTML = car\n\n    },<\/code><\/pre>\n\n\n\n<p>So, I pinched a bit of code from somewhere and made it work, I was on the  W3Schools.com and there was an array demo <strong><span style=\"color:#cf2e2e\" class=\"color\">https:\/\/www.w3schools.com\/js\/tryit.asp?filename=tryjs_array<\/span><\/strong> that I took the code from to display the  Label : and Line points. A bit of a hack, but it works. <\/p>\n\n\n\n<p>Then, after that I wanted to look at using multilines with Charts.js  and got that working too at a basic level. So at end of day image below is as far as I got. I didn&#8217;t realise the pain it would take to get that far. <\/p>\n\n\n\n<figure class=\"wp-block-image size-large\"><img decoding=\"async\" width=\"1024\" height=\"538\" data-src=\"https:\/\/max-drake.cc\/wp-content\/uploads\/2020\/04\/2020-04-10-11_18_38-Fetch-JSON-from-API-1024x538.jpg\" alt=\"\" class=\"wp-image-6118 lazyload\" data-srcset=\"https:\/\/max-drake.cc\/wp-content\/uploads\/2020\/04\/2020-04-10-11_18_38-Fetch-JSON-from-API-1024x538.jpg 1024w, https:\/\/max-drake.cc\/wp-content\/uploads\/2020\/04\/2020-04-10-11_18_38-Fetch-JSON-from-API-300x158.jpg 300w, https:\/\/max-drake.cc\/wp-content\/uploads\/2020\/04\/2020-04-10-11_18_38-Fetch-JSON-from-API-768x403.jpg 768w, https:\/\/max-drake.cc\/wp-content\/uploads\/2020\/04\/2020-04-10-11_18_38-Fetch-JSON-from-API-1536x807.jpg 1536w, https:\/\/max-drake.cc\/wp-content\/uploads\/2020\/04\/2020-04-10-11_18_38-Fetch-JSON-from-API-2048x1076.jpg 2048w, https:\/\/max-drake.cc\/wp-content\/uploads\/2020\/04\/2020-04-10-11_18_38-Fetch-JSON-from-API-50x26.jpg 50w, https:\/\/max-drake.cc\/wp-content\/uploads\/2020\/04\/2020-04-10-11_18_38-Fetch-JSON-from-API-95x50.jpg 95w, https:\/\/max-drake.cc\/wp-content\/uploads\/2020\/04\/2020-04-10-11_18_38-Fetch-JSON-from-API-100x53.jpg 100w, https:\/\/max-drake.cc\/wp-content\/uploads\/2020\/04\/2020-04-10-11_18_38-Fetch-JSON-from-API-190x100.jpg 190w, https:\/\/max-drake.cc\/wp-content\/uploads\/2020\/04\/2020-04-10-11_18_38-Fetch-JSON-from-API-1218x640.jpg 1218w, https:\/\/max-drake.cc\/wp-content\/uploads\/2020\/04\/2020-04-10-11_18_38-Fetch-JSON-from-API-640x336.jpg 640w, https:\/\/max-drake.cc\/wp-content\/uploads\/2020\/04\/2020-04-10-11_18_38-Fetch-JSON-from-API-1462x768.jpg 1462w, https:\/\/max-drake.cc\/wp-content\/uploads\/2020\/04\/2020-04-10-11_18_38-Fetch-JSON-from-API-1920x1009.jpg 1920w\" data-sizes=\"(max-width: 1024px) 100vw, 1024px\" src=\"data:image\/svg+xml;base64,PHN2ZyB3aWR0aD0iMSIgaGVpZ2h0PSIxIiB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciPjwvc3ZnPg==\" style=\"--smush-placeholder-width: 1024px; --smush-placeholder-aspect-ratio: 1024\/538;\" \/><\/figure>\n\n\n\n<p>This is generally messy code I end up with, using JS but, at present, it works. <\/p>\n\n\n\n<p>So, I can call a country, using an ISO 3 letter country code and put some dates in and it will graph them. <\/p>\n\n\n\n<h3 class=\"wp-block-heading\">End comment at end of day 2 <\/h3>\n\n\n\n<p>So, in summary, I can, from my web page, make a call to an API on Covid Data, pull that data across and display it in a Chart on my web page. <\/p>\n\n\n\n<h3 class=\"wp-block-heading\">Day 3, Data Structure and what I want to display. <\/h3>\n\n\n\n<p>I have the basic data from the API which is &#8220;cumulative&#8221; information on how many people are either &#8220;confirmed&#8221; infected with covid, have &#8220;died&#8221; from ot or have &#8220;recovered&#8221; form it. So generally there is just exponential curves going up as there are more, day by day. There are a lot of charts doing that, but what <strong><span style=\"color:#cf2e2e\" class=\"color\">I want is to show the daily increace\/decrease in these figures<\/span><\/strong>.  And later, I may want to do comparisons between different countries, but for present my covid map is of NZ only. <\/p>\n\n\n\n<h4 class=\"wp-block-heading\">Chart into dashboard. Issues about structuring Data and how\/where to get it<\/h4>\n\n\n\n<p>One thing I need to do is put the chart data on the overall Covid Dashboard:<\/p>\n\n\n\n<figure class=\"wp-block-image size-large\"><img decoding=\"async\" width=\"1024\" height=\"404\" data-src=\"https:\/\/max-drake.cc\/wp-content\/uploads\/2020\/04\/2020-04-10-12_31_15-Transmission-Type-1024x404.jpg\" alt=\"\" class=\"wp-image-6125 lazyload\" data-srcset=\"https:\/\/max-drake.cc\/wp-content\/uploads\/2020\/04\/2020-04-10-12_31_15-Transmission-Type-1024x404.jpg 1024w, https:\/\/max-drake.cc\/wp-content\/uploads\/2020\/04\/2020-04-10-12_31_15-Transmission-Type-300x118.jpg 300w, https:\/\/max-drake.cc\/wp-content\/uploads\/2020\/04\/2020-04-10-12_31_15-Transmission-Type-768x303.jpg 768w, https:\/\/max-drake.cc\/wp-content\/uploads\/2020\/04\/2020-04-10-12_31_15-Transmission-Type-1536x606.jpg 1536w, https:\/\/max-drake.cc\/wp-content\/uploads\/2020\/04\/2020-04-10-12_31_15-Transmission-Type-2048x807.jpg 2048w, https:\/\/max-drake.cc\/wp-content\/uploads\/2020\/04\/2020-04-10-12_31_15-Transmission-Type-50x20.jpg 50w, https:\/\/max-drake.cc\/wp-content\/uploads\/2020\/04\/2020-04-10-12_31_15-Transmission-Type-127x50.jpg 127w, https:\/\/max-drake.cc\/wp-content\/uploads\/2020\/04\/2020-04-10-12_31_15-Transmission-Type-100x39.jpg 100w, https:\/\/max-drake.cc\/wp-content\/uploads\/2020\/04\/2020-04-10-12_31_15-Transmission-Type-254x100.jpg 254w, https:\/\/max-drake.cc\/wp-content\/uploads\/2020\/04\/2020-04-10-12_31_15-Transmission-Type-1624x640.jpg 1624w, https:\/\/max-drake.cc\/wp-content\/uploads\/2020\/04\/2020-04-10-12_31_15-Transmission-Type-640x252.jpg 640w, https:\/\/max-drake.cc\/wp-content\/uploads\/2020\/04\/2020-04-10-12_31_15-Transmission-Type-1948x768.jpg 1948w, https:\/\/max-drake.cc\/wp-content\/uploads\/2020\/04\/2020-04-10-12_31_15-Transmission-Type-1920x757.jpg 1920w\" data-sizes=\"(max-width: 1024px) 100vw, 1024px\" src=\"data:image\/svg+xml;base64,PHN2ZyB3aWR0aD0iMSIgaGVpZ2h0PSIxIiB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciPjwvc3ZnPg==\" style=\"--smush-placeholder-width: 1024px; --smush-placeholder-aspect-ratio: 1024\/404;\" \/><\/figure>\n\n\n\n<p>And it fits on the page in the first &lt;DIV&gt;<\/p>\n\n\n\n<p>This is now an issue. I am getting data from MoH via a Web scrape, and getting daily data from an API call, so coding 2 seperate sources of data. <\/p>\n\n\n\n<p>Going forward, do I try and build the api call and chart into the Excel file, or do I do a link? <\/p>\n\n\n\n<p>As this is a learning exercise, starting with basics HTML and map and Excel and then exploring getting information via an API, I think what I need to do is accept that if I want an elegant solution it would require a rebild of what I&#8217;ve done so far. <\/p>\n\n\n\n<p> With that in mind, the way forward is to put a static chart image on the Excel generated coded site and link through to another page that is doing the API call. That way I can look at one page , all Excel web scrape, and another page all API calls. <\/p>\n\n\n\n<p>This may be the way to do that, have a button that takes you to the chart page:<strong><span style=\"color:#cf2e2e\" class=\"color\"> https:\/\/www.w3schools.com\/howto\/tryit.asp?filename=tryhow_js_redirect_webpage<\/span><\/strong><\/p>\n\n\n\n<p>This has been done for the 2 pages. <\/p>\n\n\n\n<h4 class=\"wp-block-heading\">Json data for Chart from API<\/h4>\n\n\n\n<p>So , I have a JSON file giving me cumulative figures in an ARRAY format, I need to do some JavaScript manipulation of that data to be able to subtract todays figure from yesterdays figure, Eg X- (X -1). <\/p>\n\n\n\n<p>As JavaScript gives me so much pain I&#8217;m taking it really slowly today. Overcoding like mad, but hopefully it will pay off. <\/p>\n\n\n\n<p>Doing an array subtract will break as there is a null at one end or the other of one of the arrays. So I have to copy the original Array of data and then remove the last item from one array and the first item from the 2nd array and then I can subtract one from the other to get daily increase\/decrease, but you have to use Array.slice() to clone an array, as if you just make ArrayA=A , then A does exactly what ARRAYA does. Also use A.pop() to remove lat item in array &amp; A.shft() to remove first item in Array. <\/p>\n\n\n\n<pre class=\"wp-block-code\"><code>&lt;!DOCTYPE html>\n&lt;html>\n&lt;head>\n&lt;meta charset=\"utf-8\">\n&lt;h1> Test Subtract Arrays  &lt;\/h1>\n&lt;\/head>\n&lt;body>\n&lt;script>\n\/\/var a= new Array(1,2,3,4,5);\nvar a= [1,2,3,4,7];\nvar minusLast=a.slice(0);\nvar minusFirst=a.slice(0);\nconsole.log(a);\nconsole.log(minusLast);\nconsole.log(minusFirst);\nminusLast.pop();\nconsole.log(minusLast);\nminusFirst.shift();\nconsole.log(minusFirst);\nconsole.log(a);\n\nvar dailyChange = minusFirst.map(function(item, index) {\n  \/\/ In this case item correspond to currentValue of array a, \n  \/\/ using index to get value from array b\n  return item - minusLast[index];\n})\nconsole.log(x);\n&lt;\/script>\n&lt;\/body><\/code><\/pre>\n\n\n\n<p>The results are as below , so Array x is correct. I need to make another for the Date and remove the first item in the array.<\/p>\n\n\n\n<figure class=\"wp-block-image size-large\"><img decoding=\"async\" width=\"250\" height=\"187\" data-src=\"https:\/\/max-drake.cc\/wp-content\/uploads\/2020\/04\/2020-04-10-11_57_46-Mozilla-Firefox.jpg\" alt=\"\" class=\"wp-image-6121 lazyload\" data-srcset=\"https:\/\/max-drake.cc\/wp-content\/uploads\/2020\/04\/2020-04-10-11_57_46-Mozilla-Firefox.jpg 250w, https:\/\/max-drake.cc\/wp-content\/uploads\/2020\/04\/2020-04-10-11_57_46-Mozilla-Firefox-50x37.jpg 50w, https:\/\/max-drake.cc\/wp-content\/uploads\/2020\/04\/2020-04-10-11_57_46-Mozilla-Firefox-67x50.jpg 67w, https:\/\/max-drake.cc\/wp-content\/uploads\/2020\/04\/2020-04-10-11_57_46-Mozilla-Firefox-100x75.jpg 100w, https:\/\/max-drake.cc\/wp-content\/uploads\/2020\/04\/2020-04-10-11_57_46-Mozilla-Firefox-134x100.jpg 134w, https:\/\/max-drake.cc\/wp-content\/uploads\/2020\/04\/2020-04-10-11_57_46-Mozilla-Firefox-300x225.jpg 300w, https:\/\/max-drake.cc\/wp-content\/uploads\/2020\/04\/2020-04-10-11_57_46-Mozilla-Firefox-1024x768.jpg 1024w\" data-sizes=\"(max-width: 250px) 100vw, 250px\" src=\"data:image\/svg+xml;base64,PHN2ZyB3aWR0aD0iMSIgaGVpZ2h0PSIxIiB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciPjwvc3ZnPg==\" style=\"--smush-placeholder-width: 250px; --smush-placeholder-aspect-ratio: 250\/187;\" \/><\/figure>\n\n\n\n<p>So concept works with some hard coding on a basic array, I now have to add this to my code for the chart. Also, maybe a bar chart is better than a line chart. <\/p>\n\n\n\n<p>After playing around with it I got it working for all 3 series, see below. There is a string of numbers (deaths) that is showing up, I think its the last array and the numbers are bleeding out via <strong><span style=\"color:#cf2e2e\" class=\"color\">data: document.getElementById(&#8220;demo&#8221;).innerHTML = dailyDeadChange<\/span><\/strong><\/p>\n\n\n\n<p>as the last series in JavaScriptdoesn&#8217;t have a comma at the end I think, and its going back up to the ElementById (&#8220;demo&#8221;) and writing it inside the &lt;p&gt; brackets. The principal is sound, just a bit fuzzy on the execution. <\/p>\n\n\n\n<figure class=\"wp-block-image size-large\"><img decoding=\"async\" width=\"846\" height=\"621\" data-src=\"https:\/\/max-drake.cc\/wp-content\/uploads\/2020\/04\/2020-04-10-19_01_55-Chart-from-API.jpg\" alt=\"\" class=\"wp-image-6127 lazyload\" data-srcset=\"https:\/\/max-drake.cc\/wp-content\/uploads\/2020\/04\/2020-04-10-19_01_55-Chart-from-API.jpg 846w, https:\/\/max-drake.cc\/wp-content\/uploads\/2020\/04\/2020-04-10-19_01_55-Chart-from-API-300x220.jpg 300w, https:\/\/max-drake.cc\/wp-content\/uploads\/2020\/04\/2020-04-10-19_01_55-Chart-from-API-768x564.jpg 768w, https:\/\/max-drake.cc\/wp-content\/uploads\/2020\/04\/2020-04-10-19_01_55-Chart-from-API-50x37.jpg 50w, https:\/\/max-drake.cc\/wp-content\/uploads\/2020\/04\/2020-04-10-19_01_55-Chart-from-API-68x50.jpg 68w, https:\/\/max-drake.cc\/wp-content\/uploads\/2020\/04\/2020-04-10-19_01_55-Chart-from-API-100x73.jpg 100w, https:\/\/max-drake.cc\/wp-content\/uploads\/2020\/04\/2020-04-10-19_01_55-Chart-from-API-136x100.jpg 136w, https:\/\/max-drake.cc\/wp-content\/uploads\/2020\/04\/2020-04-10-19_01_55-Chart-from-API-640x470.jpg 640w\" data-sizes=\"(max-width: 846px) 100vw, 846px\" src=\"data:image\/svg+xml;base64,PHN2ZyB3aWR0aD0iMSIgaGVpZ2h0PSIxIiB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciPjwvc3ZnPg==\" style=\"--smush-placeholder-width: 846px; --smush-placeholder-aspect-ratio: 846\/621;\" \/><\/figure>\n\n\n\n<h4 class=\"wp-block-heading\">End comment day 3 <\/h4>\n\n\n\n<p>This went pretty well, not too many curly issues with JS, but I used  a lot of console.log() to check the output as I went, also the code is verbose, but it works. <\/p>\n\n\n\n<p>It took a lot of messing around to split Excel stuff with API call onto 2 different pages. But as this is a learning exercise that is fine, but high maintenance going forward.<\/p>\n\n\n\n<p>I ended up taking a bit of time with the Excel import from Web as the imported tables shifted and I had to do a bit of tidying up to get them right. That will be an ongoing thing with using that process.  Hopefully the API call will need far less maintenance.<\/p>\n\n\n\n<p> I&#8217;m wondering about exploring API&#8217;s as far as building one to store the data in, then calling it as I need it in a JSON format. That might be an interesting project. <\/p>\n\n\n\n<p>So far, this is specific to NZ, I&#8217;m interested in making a more general API call  to be able to chage Country via a pull down list and choose dates too. <\/p>\n\n\n\n<p>Also, I&#8217;m keen to explore using JS Template literals too. <\/p>\n","protected":false},"excerpt":{"rendered":"<p>I want to play with 1\/ Covid Data &amp; 2\/ API&#8217;s. I&#8217;ve done some bits with Postman &amp; API&#8217;s before but not very successfully. So this time I&#8217;m watching the following video: It is pulling in the Postman scripts for the API calls and I want to follow on with what they are doing. After [&hellip;]<\/p>\n","protected":false},"author":1,"featured_media":6115,"comment_status":"closed","ping_status":"open","sticky":false,"template":"","format":"standard","meta":{"footnotes":""},"categories":[35,12,29],"tags":[],"class_list":["post-6113","post","type-post","status-publish","format-standard","has-post-thumbnail","hentry","category-api_json","category-visualisation","category-web"],"featured_image_src":"https:\/\/max-drake.cc\/wp-content\/uploads\/2020\/04\/2020-04-08-15_32_34-Postman.jpg","featured_image_src_square":"https:\/\/max-drake.cc\/wp-content\/uploads\/2020\/04\/2020-04-08-15_32_34-Postman.jpg","author_info":{"display_name":"Max Drake","author_link":"https:\/\/max-drake.cc\/?author=1"},"_links":{"self":[{"href":"https:\/\/max-drake.cc\/index.php?rest_route=\/wp\/v2\/posts\/6113","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/max-drake.cc\/index.php?rest_route=\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/max-drake.cc\/index.php?rest_route=\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/max-drake.cc\/index.php?rest_route=\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"https:\/\/max-drake.cc\/index.php?rest_route=%2Fwp%2Fv2%2Fcomments&post=6113"}],"version-history":[{"count":0,"href":"https:\/\/max-drake.cc\/index.php?rest_route=\/wp\/v2\/posts\/6113\/revisions"}],"wp:featuredmedia":[{"embeddable":true,"href":"https:\/\/max-drake.cc\/index.php?rest_route=\/wp\/v2\/media\/6115"}],"wp:attachment":[{"href":"https:\/\/max-drake.cc\/index.php?rest_route=%2Fwp%2Fv2%2Fmedia&parent=6113"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/max-drake.cc\/index.php?rest_route=%2Fwp%2Fv2%2Fcategories&post=6113"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/max-drake.cc\/index.php?rest_route=%2Fwp%2Fv2%2Ftags&post=6113"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}