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 :
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.
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.