Shares Data 3. Get request from API to Graph on web page
After Stock Data 2. Graph in Excel from Web and Graph from API to web page I had got the Excel Graph working but had fudged the API to Graph process.
So, back to the interwongle, and this time I asked Mr YouTube. I got a bit of a lead on using Chartist.js to display the graph on a web page.This video gave me a way forward:
The gentleman uses Flask and then a get request, I just went straight to the Get request part of the process.
Instead of downloading Chartist.js I just linked to CDN’s for the JS & CSS files. A good way to test, and if it works, then it may be worth downloading the programme.
Here is a good article about Chartist.js.
The Line Graph below has Share Prices for AAPL shares for daily “Open”, “Close”, “High”, “Low”
So the chart above is calling the API and showing the output.
The graph itself is not that great compared to the responsiveness of Chart.JS. It does not have a legend, you don't know which line is which and the X and Y axes are not labelled, nor is there a title.
But, those are refinements. This is a success as it automates the process of pulling the data straight from the API :
https://api.iextrading.com/1.0/stock/AAPL/batch?types=chart
and displaying it on the chart. If you do a refresh on the browser page then the chart will be updated to the latest data. You could also change the Share Code from AAPL above to say GOOG to see what Googles shares are doing.
I did play around with the Line Style/color on the graphs. This calls a minified .css file for styles and you can overwrite these in a style block.
Link to File
You can click the link ChartistLineGraphFromAPI.html and it will open in the browser, if you right-click on the page and choose VIEW SOURCE you can get code for the Get request & Graph.
Image of graph below as LinkedIn doesn't seem to render the Javascript code.
End comment
I am pleased to get the API to graph working. Now I can explore using different Graph Libraries and API's. I may even revisit the Chart.js package and see if I can get that running.
Further iterations could be pull down menu's to choose different Shares/Stocks etc. Also having different graphs to display the data in different ways. I do like the Tabs display of the Stock Picker Website. Quite an elegant solution.
After getting the Data to the graph, the next part is fiddling to get the look that you want.
I will comment that in the WordPress site I have here it gets a bit temperamental with my code and inserts <span.....> data in the most inconvenient places that I need to clean out to run the code. I usually have to do it a few times before it settles down. A real nuisance.
WordPress also seems to want to gobble up my CSS file link, I've had to replace it about 3 times. It seems WordPress does not play well with CSS links. So I cut/pasted the minified CSS file into the page. Not elegant but it works.
I am happy to take this process this far. I may look at trying to make the code a bit more robust.
Looking on YouTube a lot of people are using Node.JS, Angular, Flask and other server type processes to smooth the process. Maybe those types of packages need some more exploration. Also JQuery, but that's just a nicer style of JavaScript form what I have seen.
