I now have something that I can show regarding this graph project and provide some more explanations about it. The graph below is being dynamically created and demonstrates posting a dynamic updating graph into a third party location (this forum post).
Any one who wants can make use of the graph by hitting this SVG graph link. Then just hit the refresh button on your browser when you want to check for an updated graph.
There are some caveats to keep in mind when currently using these graphs though. These graphs will be quite slow as they are actually being rendered on my development laptop using a secure tunnel connection with a mobile data connection to the internet. There is also fairly aggressive caching used on the proxy server and the data from the Stellar network is only updated once per 10 minutes. The mobile internet connection to the development laptop may come and go also.
It is the not intended that these PNG, PDF, SVG, etc graphs try and replace the graphs made with javascript libraries, only to offer another option in addition to them. Some may prefer interactive graphs that can be zoomed and are made with javascript libraries instead of the type of graphs shown here. I don't think it should be seen as a battle between the two types graphs and there can only be one winner. Both types have their strengths and weaknesses for different uses. The graphs shown here only offer another an additional option that can only increase the total of available possibilities for creating graphs. It would be a disservice to limit ourselves to only one type of graphs.
The SVG graph shown on this page could also be made interactive. "Buy" and "Sell" buttons could be drawn at the desired positions within the SVG graph using the SVG DOM similar to using the HTML DOM for a web page. Or HTML buttons can be inserted using a foreignObject element at the desired position. The current buying or selling price could be requested from Horizon and shown in the respective button. Then just attach events to the buttons and act accordingly. Other chart trading operations could be done using similar techniques.
Just throwing some crazy ideas around a graph of the "XLM vs CNY" could be placed inside a "Buy" HTML button using CSS like this background: url("https://lumag.solutions/graph.svg"); also setting the desired width and height properties of the button. Then make a "Sell" button made using an opposing "CNY vs XLM" graph. This would still load very fast and be responsive even on lowly mobile devices.
Another technique to implement chart trading would be to use an overlay image with a transparent background that has buttons or what have you drawn on it. Then act accordingly when mouse or tap events happen at the known locations where the buttons were drawn. These overlays could be applied when the graph is rendered and delivered as a single graph.
The rendered code for the SVG is fairly clean and toolable compared to the SVG created by some other graphics systems. The SVG graph linked to on this page only requires about 5 KB in bandwidth after it is compressed and sent to the client, this can be seen in developer tools under the network tab after loading the SVG graph. My development laptop from 2012 is able to render about 10 SVG graphs per second. A modern server should be able to deliver pages full of many different graphs in a fraction of a second.
Many of the unbanked people of the world don't have a computer in their house, but do have a smartphone or two. The graphs described on this page would be well suited for mobile devices and could serve them well.
It is currently possible to create these graphs using any time period intervals (examples: 47 minutes 10 seconds, 36 hours 8 minutes 23 seconds and etc). This is a powerful innovative feature and I have not seen any other services or trading platforms anywhere that can create graphs using any desired 1 second resolution time period interval. This would make it possible to create a unique custom view into the price history of an asset, coin, etc.
