News and updates for 2021
News, updates and new techniques for both RGraph and also the HTML5 SVG and canvas tags.

Version 6.05 of RGraph is now available
Written by Richard, 14th November 2021
RGraph version 6.05 is now available! In this release, both the SVG and canvas versions of the Semi-circular Progress meter have had some attention and they now both support multiple values and scales. The canvas Line chart angled labels HOWTO has now been added as a core feature (ie it's now part of the Line chart) so it's much easier to implement on your own charts.
You can download the software from the download page:
Version 6.04 of RGraph is now available
Written by Richard, 16th October 2021
Hot on the heels of version 6.03 - version 6.04 is now available! There's only one change in this release - the default tooltip effect for canvas charts has been changed to the new "slide" effect.
As the name suggests, this, like the SVG tooltips, slides the tooltip into position instead of fading in. If showing the first tooltip on the page the sliding motion originates from the top left corner of the page and if this isn't the first tooltip to be shown it will slide into the new position from the position of the previous tooltip.
You can download the software from the download page:
Sliding tooltips on the canvas charts
Written by Richard, 9th October 2021The SVG charts have, since their inception, had sliding tooltips. In my opinion, these look nicer than the standard canvas tooltips - which "jump"to the new location.
Well hold to your hats, because the canvas charts now have - sliding tooltips!
They operate in much the same way as the SVG sliding tooltips and this effect is now the default. That means that if you upgrade your canvas libraries and your chart has tooltips, you'll get the sliding effect instead of the fade effect by default.
If you don't like it then you can just set the
tooltipsEffect
property to fade
in your chart's configuration.
To see an example of the fade effect you can see it on the SVG Bar chart documentation page.
Version 6.03 of RGraph is now available
Written by Richard, 2nd October 2021
Happy release day! Version 6.03 is now available from the RGraph websites download page.
You can read the full list of changes on the changelog page: https://www.rgraph.net/changelog.html
A notable addition to RGraph in this release is the HTML table import utility. This little gem allows you to easily fetch information from an HTML table (that's on the same page). You can then use it to create charts. The documentation page for this is here:
https://www.rgraph.net/canvas/table.html
There are other changes, of course, which you can read about on the changelog page:
https://www.rgraph.net/changelog.html
You can download RGraph as usual from the download page:
https://www.rgraph.net/download.html
A new HTML table import utility for version 6.03
Written by Richard, 15th September 2021
After a suggestion by a user, RGraph now has an import utility that fetches data from an
HTML table (on the same page). This can make getting data into RGraph even easier
than before. All you have to do is give it the id
of the table (the HTML tag
attribute) and RGraph will fetch the table and parse it into a usable form.
Actually, you don't even
have to do that - you can, instead of the id
, give the constructor a string
that contains the table tag and RGraph will turn it into a usable <table>
tag and then provide access to the data contained in it.
Here's an example of the code:
<script>
// Pass the RGraph.HTMLTable constructor the ID (the HTML attribute) of the
// table and a callback function which creates the chart. The callback function
// is passed the RGraph.HTMLTable object as the only argument. You can then use
// the API functions to get to your data.
new RGraph.HTMLTable('myTable', function (table)
{
// Use the column() function to get the labels
// and the two columns of data
var labels = table.column(0, 1), // Column index (starts at zero), start row (starts at zero)
col1 = table.column(1, 1), // Column index (starts at zero), start row (starts at zero)
col2 = table.column(2, 1), // Column index (starts at zero), start row (starts at zero)
numrows = table.numrows, // Number of rows in the table (including headers and footers)
numcols = table.numcols, // Number of columns in the table
data = []; // The data-array-to-be (it will be populated from the col1 and col2 variables)
// Combine the two columns into one data array that
// can be passed to the Bar chart object
for (var i=0; i<col1.length; ++i) {
data.push([col1[i], col2[i]]);
}
// Now, create the chart
var bar = new RGraph.Bar({
id:'cvs',
data: data,
options: {
yaxis: false,
xaxis: false,
xaxisLabels: labels,
marginInner: 5,
marginBottom: 15,
colors: ['#666', '#7CB5EC'],
backgroundGridBorder: false,
backgroundGridHlines: false,
}
}).grow({frames: 45}).responsive([
{maxWidth: null, width: 650, height: 250, options:{textSize: 14},parentCss:{'float':'right'}},
{maxWidth: 750, width: 400, height: 200, options:{textSize: 10}, parentCss:{'float':'none'}}
]);
});
</script>
Version 6.02 of RGraph is now available
Written by Richard, 22nd August 2021
A little earlier than I was planning but Google's update to v4 of the Sheets API has forced my hand. The Sheets connector wasn't working any longer so I had to update it (all three copies!) and there are also a few other minor things that you can read about on the changelog page
You can download RGraph as usual from the download page:
Version 6.01 of RGraph is now available
Written by Richard, 14th July 2021
Happy release day! Version 6.01 is now available from the download page.
You can read the full list of changes on the changelog page. This is a minor release so there are no ground-breaking changes that are worthy of mention. But the changes that are included are definitely worth noting so by all means take a read!
You can download RGraph as usual from the download page:
Apache mod_rewrite? Pah! Rewriting URLs without using mod_rewrite
Written by Richard, 23rd June 2021
If there's anything that strikes fear into many-a-developers heart and turns it to stone,
it's having to face the prospect of writing mod_rewrite
Apache directives.
Actually, it may just be me, but I really don't like it.
So why do it at all? I've just converted the RGraph website to use a different way of doing things that is far more straightforward and easier to handle, particularly if you're comfortable with a server-side scripting language like PHP.
I've been using PHP now for over 20 years and whilst I'm not fully au-fait on recent versions or additions to the language (the last version I used as a fully-paid-up server-side developer was around the version 5.2 era) I'm still very confident with it when you compare it with something like, say, Apache configuration. Particularly my hosting company's version of it which I'm adamant is not a standard implementation.
So imagine my sheer delight when I had the random thought (which I presume others might have had long, long ago) of handling rewrites with PHP. Oh, how wonderful that would be. So that's what I've done with the RGraph website and oh how well it works! It's so much easier to work with from day to day and has the potential to save a lot of time and heartache.
How does it work?
It's very simple to implement and involves a small snippet of Apache configuration (which is not that difficult to understand) and a PHP script (which can be as simple or as complex as you wish).
This small snippet of Apache configuration can go in a .htaccess
file and, in my
case, goes in the .htaccess
file in each directory (I only have a small number
of directories on the website). This example is from the .htaccess
file which
is located in the /blog
directory.
RewriteEngine On RewriteBase /blog RewriteCond %{REQUEST_URI} !-d RewriteCond %{REQUEST_FILENAME} !\.(png|gif|jpg|jpeg|css|js|ttf|xml|bz2|gz|tar|zip|csv)$ RewriteRule .* _router.php [L]
Now, breaking that down, the first line turns on mod_rewrite
, the second line
(which may or may not be required - I'm sure that I've not used it in the past) sets the
directory (this file is located in the /blog
directory remember) and the
third, fourth and fifth lines are the rewrite rules which send everything to the _router.php
PHP
script. Let's break down that rule (RewriteRule .+ _router.php [L]
):
The RewriteRule
is the name of the directive,
the .+
matches the filename (one or more characters in this case - so any filename)
and the _router.php
is the name of a PHP script (located in the /blog
directory) that handles the job of looking
at the request and deciding what to do with it. the [L]
flag tells mod_rewrite
that this is the last rule. It's not really needed in this case as there's nothing else in the
.htaccess
file.
So what happens then? Well, in the _router.php
script, it's a simple matter of
either redirecting to a different URL or, if you want to keep the URL in the navigation bar,
show the correct content. So you can:
-
Redirect by sending the relevant HTTP headers like this:
http_response_code(301); // Send a permanent redirect response code header('Location: ' . '/some/where/else.html'); // Send the new location header exit; // End the PHP script
-
Show the relevant content. In this case, if you want to keep the URL in the address bar,
you can use the
require()
orinclude()
PHP functions to show the correct content like this:$file = basename($_SERVER['REQUEST_URI']); if ($file === 'authors') { require('authors.html'); exit; }
Or alternatively if the file exists on your filesystem you could just show it:$file = basename($_SERVER['REQUEST_URI']); if (file_exists($file) { require($file); exit; }
What happens with subdirectories?
If you have a .htaccess
file and a _router.php
in the /blog
directory (for example) then due to the way that .htaccess
files are handled by Apache,
the /blog/.htaccess
file will be checked even when you're requesting a file in a
subdirectory.
So if you request the file /blog/foo/bar.html
in your browser then the
/blog/.htaccess
will be checked and the /blog/_router.php
file (or
whatever you may have called it) will be called. In that case, the $_SERVER['REQUEST_URI']
PHP variable will contain the full address of the page, which in this example is
/blog/foo/bar.html
.
What if I've turned off override files?
If you've turned off override files (.htaccess
is an override file) then this
method provides an extra advantage. Normally, editing the server configuration files requires
you to restart the server for any changes to be picked up but with this method, you wouldn't be
editing the server configuration files to add a redirect/rewrite. You would add the above
configuration once and then to add a new redirect/rewrite or to modify an existing one you can just
change the _router.php
file and the new change is effective immediately.
Performance considerations
Unless your server is experiencing meltdown
levels of traffic then you're unlikely to notice any difference in performance. The extra
versatility that this method brings (especially if you're comfortable with PHP) compared to
having to struggle with Apache configuration and mod_rewrite
directives is well
worth it in my opinion.
A 3D Line chart demonstration
Written by Richard, 13th June 2021Here's a novel new demonstration of a chart: A 3D Line chart with multiple datasets. This is not a natively supported type of chart though the code to create it, whilst big, is not complicated and it's fully annotated so you should find it easy to follow.
The next release will feature it as part of the demos that come with RGraph which are located
in the demos/
folder and it will be called: demos/line-chart-3d.html
.
Here's an image showing it and you can see the demo in its full glory by following the link
below to a codepen of it.
What's new with RGraph at the moment?
Written by Richard, 5th June 2021It's been a month and a bit since the last release so here's an update on what's been added to RGraph recently. There's not a huge amount - but perhaps that's a sign that RGraph is close to being perfect...? Yes, let's go with that.
-
There are now some pseudo-constants that you might be able to make use of. Obviously
(older) JavaScript implementations don't have constants - so really they're just
variables with an all-capitals naming convention. They are:
RGraph.MONTHS_SHORT
RGraph.MONTHS_LONG
RGraph.DAYS_SHORT
RGraph.DAYS_LONG
RGraph.HOURS24
RGraph.HOURS12
-
Both the Line and Scatter charts can now add a trendline to your data if you wish.
An example of the Line chart using a trendline is shown on
the RGraph Facebook page.
The options that control the trendline are as
follows:
trendline
trendlineColors
trendlineLinewidth
trendlineMargin
trendlineDashed
trendlineDotted
trendlineDashArray
- The Scatter chart now has an explode effect. With this effect, the marks on the chart explode outwards from a point on the chart (top-left, top-center, top-right, center-left, center-center, center-right, bottom-left, bottom-center or bottom-right).
- The RScatter chart also now has an explode effect. Similar to the Scatter chart, with this effect the marks on the chart explode outwards from the center of the chart.
Also, whilst not strictly a change to RGraph, it's definitely worthy of mention that RGraph can now be found on GitHub (the source control website used by many, many developers).
So there you go - not a great deal happening with RGraph at the moment but development is most definitely still occurring, albeit at a somewhat slower pace. I've pegged the next release for July - though if you can't wait you could grab the source code for a particular library from the GitHub repository (link above). If you do then remember that you may also need to get the common core library as well as the chart library that you want.
An attractive new Horizontal Bar chart demo
Written by Richard, 27th April 2021Now that the majority of the demos are no longer online I've stopped making new demos as frequently - but here's a new Horizontal Bar chart demo that can be made with the existing release - version 6 - so you could take the source code that you see below and make your own demo if you wanted to. It's just a normal Horizontal Bar chart but it uses a vertical Bar chart behind it to get the background bars. It's animated, though to see it you need to click the button that's below the chart (because when the page loads the chart is out-of-sight). Here's the chart:
<!-- Load all of the necessary RGraph libraries -->
<script src="RGraph.common.core.js" ></script>
<script src="RGraph.common.dynamic.js" ></script>
<script src="RGraph.common.tooltips.js" ></script>
<script src="RGraph.bar.js" ></script>
<script src="RGraph.hbar.js" ></script>
<!--
The chart itself only requires the canvas. The container <div>
and the button are just there for this website
and the animation.
-->
<div style="text-align: center; margin-top: 50px">
<canvas id="cvs_hbar_fortune_500" width="820" height="250">[No canvas support]</canvas><br />
<button style="font-size: 16pt; cursor: pointer" onclick="hbar_fortune_500.grow({frames: 45})">Animate!</button>
</div>
<script> // This is used for both the tooltips and the Y-axis labels countries = ['US','China','Japan','France','Germany','Britain','Switzerland','Netherlands','South Korea','Canada','Australia','Italy','India','Brazil','Spain','Russia','Taiwan','Sweden']; // The data that's shown on the HBar chart data = [134,103,52,29,28,25,15,12,15,11,8,9,7,7,9,5,7,3]; // The Bar chart is used to get the background vertical bars bar_fortune_500 = new RGraph.Bar({ id: 'cvs_hbar_fortune_500', data:[1,0,1,0,1,0,1], options: { backgroundGrid: false, marginInner: 0, xaxis: false, yaxis: false, yaxisScale: false, marginBottom: 5, marginTop: 5, marginRight: 5, colors: ['#ccc'] } }).draw(); // The HBar configuration hbar_fortune_500 = new RGraph.HBar({ id: 'cvs_hbar_fortune_500', data: data, options: { xaxisLabelsCount: 7, xaxisLabelsSize: 10, xaxisLabelsOffsety: 5, xaxisPosition: 'top', xaxisTitle: 'Number of Fortune 500 company\'s by country', xaxisTitleSize: 16, xaxisScaleMax: 140, yaxisLabels: countries, yaxisLabelsSize: 8, xaxis: false, yaxis: false, backgroundGrid: false, colors: ['black'], marginInner: 1, marginBottom: 5, marginTop: 5, marginRight: 5, // Use tooltip templates to specify the tooltips tooltips: '<i style="font-size: 12pt">July 2019 count:</i><br />%{global:countries[%{dataset}]}: %{global:data[%{dataset}]}', tooltipsPointer: false, tooltipsEvent: 'mousemove', tooltipsEffect: 'none', tooltipsPositionStatic: false, // Add some CSS that's applied to the tooltips tooltipsCss: { paddingTop: 0, backgroundColor: 'rgba(255,255,255,0.9)', color: 'black', border: '2px solid black', fontSize: '20pt', pointerEvents: 'none' } } }).draw() // Add the responsive configuration so that the chart // fits on smaller screens hbar_fortune_500.responsive([ {maxWidth: null, width: 600, height: 250}, {maxWidth: 900, width: 400, height: 150} ]); // Set the bar chart left margin to the same as the hbar. bar_fortune_500.set( 'marginLeft', hbar_fortune_500.get('marginLeft') ); RGraph.redraw(); </script>
Version 6.0 of RGraph is now available
Written by Richard, 10th April 2021
Happy release day! Version 6.0 of RGraph is now available. That's right - a major version increment!
There isn't, however, a bucket-load of breaking changes (I'm sure you'll be glad to hear). The reason for the major version increment is because, from version 6.01, I'll be starting to use features from JavaScript ES6 in the codebase.
I won't be going back and changing the entire codebase, however, I'll be simply making use of the new features as and when the opportunity arises.
You can read the full list of changes on the changelog page and you can download RGraph as usual from the download page:
RGraph is now on GitHub!
Written by Richard, 4th April 2021After years of denial and confusion by it, RGraph is finally available from GitHub. It's far from a complete switch and initially, it will purely be me uploading each new release. But it's a start! Maybe one day my entire working process will be based around GitHub - though that won't happen any time soon.
Currently, my working environment for developing RGraph is tied very closely to my hosting and the RGraph website which is based on a Linux environment. And trying to incorporate Git into that is not going to be a simple task.
But that will change given time I guess and hopefully, it will become more tied to GitHub. But for now, I'll be updating GitHub with each new release - so the next update will be version 6.0.
A new version of RGraph: version 5.28
Written by Richard, 1st March 2021
Happy release day! Both of you! The time has come, after two whole months, to bring out a new version of RGraph - version 5.28.
Not much has changed in this release but there are three new meters available - the Activity meter, the Horseshoe meter, and the Segmented donut. The Activity meter can show multiple values whilst the other two can both show a single value.
All of the new meters have different aesthetics and the Activity meter can be further customised to look how the old Radial Progress meter looked. There's a demo of this in the download archive.
Other changes include the addition of new and renames of existing properties for labels, additions
to the default colors of the Bipolar chart, improvements to tooltip positioning for the Bar,
Bipolar, Horizontal Bar and SVG Bar charts and the addition of a CSS class for the X-axis
labels (this may help when trying to retrieve the label DOM nodes with the API function
document.getElementsByClassName()
).
You can read the full list of changes on the changelog page and you can download RGraph as usual from the download page.
What's next for RGraph? Well - I'm planning to update the version number of RGraph from 5.28 straight up to 6.00 for the next release.
There won't be any ground-breaking changes - it will be a significant version increment because from the next release I plan to start using JavaScript ES6 features in the RGraph code.
This does not mean, however, that I'll be going back through all of the libraries and altering things. I plan to simply start making use of the new language features in new code. Some of the new features of ES6 that look interesting are:
- Array and object destructuring
- Block scoping for variables
- Arrow functions
- Rest parameters
- for/of loops
A new year - a new version of RGraph!
Written by Richard, 3rd January 2021
Happy 2021 everybody! Let's hope that it's a better year than 2020 - but that won't be difficult to achieve, will it?!
Let's start the year with a brand new fresh release of RGraph! So I've released version
5.27. This version features an overhaul of the responsive()
function - changing
it from using the window.onresize
function/event to the newer
window.matchMedia
API. This is a programmatic way to install media queries using
JavaScript.
The other additions and changes in this release are more minor and you can read about them in the changelog.