The static image generally served its purpose but it was not optimal:
- The image is a bitmap with a fixed size which can not be reduced or enlarged without a loss of quality
- For the labels a font is used on the server which does not provide the same type face and size as the other text on the website
- It is quite elaborate to integrate interactive elements
Using RGraph the chart automatically uses the available horizontal space and exactly the same font as the website. It also provides interactive tool tips to display the exact data values.
Current status, March 2018
Since I’ve been using a 4K display with high pixel density I noticed a number of problems with graphics in browsers which are caused by the fact that browsers will no longer treat the unit “pixel” as multiple pixels depening on the DPI scaling of the display. Therefore I changed to Chart.js which also supports displays with a scaled view.