Nicer charts with RGraph

For quite some time my website contains a chart with the current number of hits and views. In the past I have used a static image, generated by a server side script. Now I changed the chart to use RGraph, a JavaScript library which creates charts using the canvas element of HTML5 and also provides interactive elements.

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

Indeed RGraph requires JavaScript and support for HTML5 – but this applies to literally all current browers, also those on mobile systems like iOS or Android.

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.

Leave a public comment

Your email address will not be published. This is not a contact form! If you want to send me a personal message, use my e-mail address in the imprint.

You can use the following HTML tags in the comment:
<a href="" title=""> <abbr title=""> <acronym title=""> <b> <blockquote cite=""> <cite> <code> <del datetime=""> <em> <i> <q cite=""> <s> <strike> <strong>