Implementing RGraph and improving the performance of your charts

Share RGraph:  

Summary
These pages tell you how to go about installing RGraph, optimising it and integrating it into your website.

  • Benefits of RGraph
    A description of the benefits of using RGraph to show charts on your website. Benefits include things such financial savings, increased website performance and it gives you the ability to create attractive charts!

  • Browser support for RGraph
    Information about browser support for RGraph. For years now browser support for canvas and SVG has been good with the vast majority of both desktop and mobile browsers being able to display them.

    • HTML5 canvas & Internet Explorer
      Details of MSIE support. More modern versions of MSIE have had excellent support for both canvas and SVG, since version 9.

    • Other devices
      Details of support for other devices. Typically the newer a device (eg a phone or tablet) then the more likely it is to have support for the canvas and SVG tags. In fact you'll be hard pressed to find a device that doesn't have support these days (2017).

    • Creating your charts without a browser
      How you can create your charts without a browser by using PhantomJS. This is just a note with a link to the PhantomJS website. In doing this you can create charts from automatically initiated scripts, such as cron tasks.

  • Getting started with RGraph
    How to start out with RGraph - a basic implementation. This bit of information is an easy way in to how RGraph works and how it can be implemented on your website.

    • Suggested structure for RGraph
      A suggested layout for the RGraph libraries. How you go about structuring the RGraph files is best done at the start of your project as changes that are done later can be prone to bugs and unforeseen effects.

    • Alternative structure for RGraph
      An alternative layout for the RGraph libraries that could also be used. This method incorporates dates in the filenames and as a result can make upgrading to a newer RGraph release quickers and easier.

    • The $p() and $a() functions
      RGraph has a few useful debug functions that you can make use of whilst building your charts. These functions can make debugging problems with your code much easier. So much so in fact that you may want to add them to your own codebase!

  • Integration with server side scripting
    Learn how to integrate RGraph with your server-side scripts. This page has examples of using the PHP MySQL, MySQLi and PDO extensions, how to make AJAX requests, saving your (canvas) charts as images and how to read CSV data.

    • Integration with PHP and MySQL using the MySQL extension
      Information about integrating RGraph with the older PHP MySQL extension. The older MySQL extension in PHP has been deprecated for some time now but is still in use and is a very easy way to interface with the database.

    • Integration with PHP and MySQL using the MySQLi extension
      Information about integrating RGraph with the PHP MySQLi extension. The MYSQLi extension is a newer way that PHP has available to communicate with the MySQL database server.

    • Integration with PHP and MySQL using the PDO extension
      Information about integrating RGraph with the PHP PDO extension. Like the MySQLi extension PDO is a newer way to fetch information from your database server, but PDO is more of an abstraction interface that can connect to database servers other than MySQL.

    • Making AJAX requests
      Information about making AJAX requests in conjunction with RGraph. RGraph has dedicated AJAX libraries that are available to both SVG and canvas libraries that make it much easier to fetch data via AJAX. If they're not sufficient for your needs though you can always use other AJAX libraries or functions such as the jQuery $.ajax() function.

    • Saving the chart as an image on the server
      How you can save your charts as an image on the server. Like all (client-side) JavaScript RGraph runs in the browser. One very convenient way of fetching data from your server is to use AJAX. In some cases this can actually improve performance too as the amount of information that's transferred by the server is reduced.

  • Improving the performance of your charts
    Hints and tips on how to improve the speed of both your charts and your entire website. The tips here are primarily aimed towards increasing the speed of your RGraph usage but many can be applied across your entire site (eg using Gzip compression) further giving your website and your charts a speed boost. Studies have shown that having a faster website can make your users happier and can subsequently lead on to bigger sales figures and turnover!

    • A reasonable performance strategy
      What's a reasonable approach to improving the speed of your charts? Well not every preformance tip or tweak needs to be employed so this is what you should consider implementing first as these tips give the best-by-far return-on-investment.

    • General website performance tools
      Links to a few useful more general website performance tools that can be used to measure your performance tweaks and optimisations. These tools can be used to increase the performance of your entire website - not just your RGraph pages. You'll find that the PageSpeed tool in particular is very useful.

    • Note about performance and HTTP/2
      A note about how HTTP/2 can negate some of the performance tweaks that are listed here. The main thing to remember with HTTP/2 is that it takes place over a single connection (per server) so keep that in mind when planning your performance strategy.