RGraph news and updates

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

A new version of RGraph is now available - version 5.22

Written by Richard Heyes, 3rd March 2020

A new version of RGraph has been released

Only a month after the last new version I've just released a new version of RGraph - version 5.22. This release adds the exciting new feature that is formatted tooltips. "What are these?" I hear you ask! Well, my friend, this new feature is going to save you a lot of time (perhaps) by allowing you to reduce your tooltips array to a simple string containing "macros" which RGraph will replace with the relevant value. So you can have just one string that will accommodate all of your tooltips. They look like this:

new RGraph.Bar({
    id: 'cvs',
    data: [[5,3],[9,1],[6,6],[5,9],[5,5],[4,3],[5,9]],
    options: {
        colors: ['Gradient(#faa:red)','Gradient(#aaf:blue)'],
        xaxisLabels: ['Monday','Tuesday','Wednesday','Thursday','Friday','Saturday','Sunday'],
        xaxis: false,
        yaxis: false,
        backgroundGridBorder: false,
        backgroundGridVlines: false,

        // A custom property that's used in the tooltips
        myNames: ['Dave','Richard'],
        
        // Some CSS that is applied to this charts tooltips
        tooltipsCss: {
            'background-color': '#000',
            color: 'white',
            'box-shadow': 'none',
            fontWeight: 'bold',
            fontSize: '16pt',
            textAlign: 'left'
        },
        
        // The tooltip string containing the template macros
        tooltips: '<span style="font-style: italic; font-size:10pt">Score for %{property:myNames[%{index}]}</span><br />%{property:xaxisLabels[%{group}]}: %{value}kg'
    }
}).draw();
[No canvas support]

As you can see from the above code there are macros that you can use to add the value to the tooltip and you can also reference the configuration properties (custom or otherwise) and use those in your tooltips too. The full documentation for formatted tooltips is here.

Other changes include the addition of trend lines for the Scatter chart , internally the RGraph.path() function has been updated - so it now looks like this:

this.path(
    'lw % b r % % % % s black f red',
    linewidth,
    x, y, width, height
);

A canvas version of an existing SVG demo has been added. You can see this demo in the demos/ folder of the download archive. Unlike the SVG version this demo traces each dataset sequentially.

Other changes can be seen on the changelog page and you can download the latest version from the download page.

A new version of RGraph is now available - version 5.21 - the "we're no longer in Europe" release(!)

Written by Richard Heyes, 1st February 2020

A new version of RGraph has been released

This release doesn't contain a large amount of changes - not visible changes at least. What it does contain is some significant under-the-hood changes to charts that use X and Y axes. That means that the Bar, Gantt, Horizontal Bar, Line, Scatter and Waterfall charts are all affected - in that they all now use the same code to draw the X and Y axes.

This change only affects these chart types but does so in quite a fundamental way and the end result is that any code to render axes has been removed. So if you happen to include two or more of the mentioned libraries you'll end up including less JavaScript code in your page. So it will be faster!

Other changes can be viewed on the changelog and one of them is that a significant bug in 3D Donut charts has been remedied. This bug didn't prevent their display but did make them look different to what they should. You can see a demo of a large 3D donut chart in the download and you can download the new version of RGraph on the download page.

What's coming in the next version?

A feature that should prove to be extremely useful - formatted tooltips. What this means is that you'll be able to significantly reduce the amount of code that you write to implement tooltips. Consider the following:

...
tooltips: 'Sales on %{property:xaxisLabels[index]}: %{value_formatted}}',
...

Instead of an array of hard-coded strings, what you have here is a single string which can have certain "macros" embedded which RGraph will then substitute for the relevant bit of text.

So less code for you to write and maintain. You can see an example page that shows this forthcoming feature in the demo page bar-tooltip-templates.html in the download archive.

And as for the subtitle - please forgive us Europe...

What's happening with RGraph at the moment?

Written by Richard Heyes, 24th December 2019

It's Happy Christmas day (more or less)! So I think now would be a good time to let you know what's happening with RGraph.

For the last three weeks I've been gradually converting the Bar, Gantt, Horizontal Bar, Line, Scatter and Waterfall to all use a single function to draw the X axis and another function to draw the Y axis.

This means for fewer bugs (hopefully) and simpler code that draws the axes (though the functions are rather large). And because the code is centralised in the common core library the various libraries can have their own axes drawing code removed and thus leading to a smaller set of libraries.

So have a Happy Christmas, a good new Year and look forward to the next version of RGraph. Let's hope that 2020 will be the year of RGraph!

 

A new version of RGraph is now available - version 5.20

Written by Richard Heyes, 8th December 2019

A new version of RGraph has been released

This announcement is a little late coming - but a new version of RGraph has been released - 5.20.

This release contains a number of changes and they can be found on the changelog page.

One thing that I'm happy to announce is the addition of the start of a common X axis function for the canvas libraries. This means that the charts that use an X axis (but just the Bar chart at the moment) will have their axis drawing code removed and will use this common function instead.

Overall this will lead to lower page weights and more centralised axis drawing.

Other changes can be viewed on the changelog and you can download the new version on the download page.

 

A new version of RGraph is now available - version 5.11

Written by Richard Heyes, 12th October 2019

A new version of RGraph has been released

Today is a day to rejoice - a new version of RGraph is available! This version - 5.11 - has the main addition of the responsive() function.

` Responsiveness is something that's been somewhat lacking in RGraph thus far - you could do it (for example by setting the CSS width and height properties on your canvas tag but now RGraph has a much better way - the responsive() method.

This new function allows you to set the canvas (or SVG) tag width, and height and update the chart properties as you need in order to accommodate smaller screens.

For example you could reduce the size of your chart from 650x300 to 400x200 and then change the options which have been set on the chart.

There's also an easy way to update the CSS properties of the canvas/SVG tag and its parent tag. And you can also specify a callback function to run after the chart has been redrawn.

Other changes can be viewed on the changelog and you can download the new version on the download page.

 

A new version of RGraph is now available - version 5.02

Written by Richard Heyes, 1st August 2019

A new version of RGraph has been released

Today I've released a new version of RGraph - version 5.02. This is a minor release with no massive or really significant changes. Here's a list of the more significant changes - for the full list then you can visit the changelog.

 

Plans for version 5.1 of RGraph

Written by Richard Heyes, 29th July 2019

Update on the next version of RGraph

For the next version of RGraph - version 5.1 - I think I'm going to remove a lot of redundant legacy code. Some of the code in RGraph has been there for over a decade in order to preserve backwards compatibility.

But because it's so old and the current configuration style has been in place for some time it's no longer necessary and is only taking up space (like myself some would say...)!

So the current JSON based configuration is the only one that will be available but it's the best so there's no great loss.

Here's a short list of what's going to be taken out. It doesn't look like a lot but there will be a lot of testing that will be necessary and a lot of documentation pages will need updating because behind the scenes they use an older configuration style.

This will be the main focus of version 5.1 - possibly the only thing that's in the release (though a few other minor things may sneak in). If you have any other suggestions then let me know what they are using the contact form .

 

Version 5.01 of RGraph has been released

Written by Richard Heyes, 27th May 2019

A new version of RGraph has been released

It's been four months and feels like longer but version 5.01 of RGraph has finally been released. This version is not nearly as comprehensive as version 5.00 was - naturally. It also "finishes things off" that I missed in the long road to version 5.00.

So what has changed? For that you should consult the RGraph changelog. This release also has a few backwards-compatibility changes so you'll also want to consult the backwards-compatibility notices and advisories page too - particularly if you're upgrading from a past version.

Some of the changes include:

 

The RGraph Google Sheets connector has been upgraded

Written by Richard Heyes, 13th May 2019

Google Sheets logo

Previously the Google Sheets connector supported fetching rows, columns and cells by using the get() method. This method has now been updated to also support the fetching of a matrix of cells.

So whereas previously you could fetch individual rows, columns and cells - you can now fetch multiple rows of information in a single operation. For example:

var matrix = sheet.get('A2:E13');

You can see this in action by viewing the example chart on the Google Sheets documentation page.

Also new recently is the PHP version of the Google Sheets connector. So now there are versions available for the canvas and SVG libraries - and now one for PHP too.

You may ask why a PHP version is relevant - there are a couple of reasons that come to mind immediately:

If you don't use PHP then it shouldn't be too difficult for you to take this code and convert it into whatever language that you do use - PHP isn't exactly difficult to read and understand!

So now that's three libraries for Google Sheets - two of which are essentially the same and another for when you're looking to access your spreadsheet from PHP.

If you don't already use Google Sheets then it's well worth a look. It's essentially a web-based Excel.

It doesn't have all of the features of Excel but if your usage isn't too intense then it could save you a lot of money (since Google Sheets is basically free).

Availability

The PHP version of the tool is available immediately - and you can download the source-code here. The canvas and SVG JavaScript versions will however be available with the next version of RGraph when it's released (version 5.01).

 

Version 5.00 of RGraph now available!

Written by Richard Heyes, 20th January 2019

A new version of RGraph has been released

Version 5 of RGraph is now available to download. You can get it from the download page:

https://www.rgraph.net/download.html

Obviously this is a major upgrade so you should definitely read the changelog.

The main changes with this release include the improvement of property names for all chart types (for example gutterLeft has been changed to marginLeft) and the implementation of new text configuration properties (ie font/size/color/bold/italic for all bits of text).

So if you choose to upgrade you will definitely have to consult the API documentation for your chart type(s) to determine the correct property names you need to use from now on.

On a separate note - I've removed the demos from the website so they're now just available in the download. Meaning that the website is down to just 375ish pages - about 355 of which are indexed.

This led to a stint at position 15 on Google. However yesterday, mid-morning, it dropped 5 places immediately down to 20. And now it's 24 (ie on page 3).

So it's clear (to me) that some sort of penalty is in place. What else would cause a 5 place drop like that? I just don't know what the penalty is or why I have it.

 

A new stable version of RGraph is now available - 4.68

Written by Richard Heyes, 26th October 2018

A new version of RGraph has been released

Well I've finally got through my TODO list so I've released a new version of RGraph - version 4.68. Woo! You can see all of the changes that went into this release by looking through the changelog ( https://www.rgraph.net/changelog.html ).

Some of the changes in this release include:

Looking towards the next version I'll be looking to devise a way to bring some order to the canvas property names. So they look more like the way the SVG properties do.

Eg backgroundGridAutofitNumhlines would become backgroundGridHlinesCount. Some of the property names really need this.

 

Finally! A new version of RGraph is now available.

Written by Richard Heyes, 14th August 2018

A new version of RGraph has been released

That time has come - I've dusted off the release script - tidied up the download section - and finally gone through with it and released a new version of RGraph.

Woo! Yes calm down people (all 2 of you...) - version 4.67 is now available for download from the website. There's nothing particularly massive in it but there are bug fixes to the canvas Bipolar chart, new documentation for getting RGraph charts through PhantomJS (ie via the command line), a new SVG Gauge chart, the Google Sheets import utility can now be used without the rest of RGraph (ie standalone in your own apps) and angled X axis text for SVG charts.

You can read the changelog and download the new version with these links:

 

A spotlight on the CSV connector

Written by Richard Heyes, 26th July 2018

CSV logo

This news article is the last in the series of the 'Spotlight on...' posts and it concentrates on the dedicated CSV import object. This object is more comprehensive than the basic RGraph.AJAX.getCSV() AJAX function.

Think of getCSV() as a quick and dirty function whereas the CSV import object is more comprehensive and versatile.

If you have your own CSV import facility then by all means use that - you shouldn't have any trouble using it with RGraph.

 

A spotlight on the AJAX connector functions

Written by Richard Heyes, 24th July 2018

AJAX logo

A continuation of yesterday's spotlight on the Google Sheets connector and this one focuses on the AJAX functionality that RGraph comes with. There are two separate sets of AJAX functions - one for SVG and one for canvas.

They do anything from fetch a single number to fetching and parsing a JSON file. There's also a general AJAX fetch function so you can get hold of any page you wish to.

When using RGraph you're not limited to the AJAX functions that come with RGraph - you can quite happily use your own (or the jQuery AJAX functions for example).

 

A spotlight on the Google Sheets connector

Written by Richard Heyes, 23rd July 2018

Google Sheets logo

This news article shines a spotlight on the SVG Google Sheets connector (there's one for canvas too). Using this you can connect the charts that are displayed on your website directly to a spreadsheet in the online Google Sheets application - without any intervention on your part or having to export it first.

This way you can update a value in your spreadsheet and your website is updated immediately.

Initially the Google Sheets connector was created for use with RGraph but it's designed so that there are few dependencies - only a few functions in the RGraph core library and for the next release this will be removed from both the canvas and the SVG versions of the library.

So if you want to use this connector with your own code then you can - and it's going to be easier as of the next release.

 

A new stable release of RGraph

Written by Richard Heyes, 27th August 2017

A new version of RGraph has been released

The time has finally come!

Yes finally I've added version 4.63 to the website so you can download it from the download page (www.rgraph.net/download.html) if you want to.

Since the gap between this and version 4.62 has been approximately 3 months there's a little bit more in this release than there previously has been so the full list of changes is on the changelog page if you want to read it (www.rgraph.net/changelog.html).

Because the gap has been so long there may well be things that I've overlooked or forgotten to check so if you find anything - please let me know.

Worthy of note though, I think, is the fact that I've used the Xenu Link Sleuth tool (home.snafu.de/tilman/xenulink.html) to try to find as many broken links on the site as I can and clean them (and there were a lot!).

So maybe Google now will see my site as higher quality and move me up the rankings... Or perhaps I'm just destined to rot at the bottom of page 2 for ever. Hopefully it's the former though!

 

10 example charts to get you started with RGraph

Written by Richard Heyes, 5th June 2017

Here's 10 examples of SVG charts that you can make with RGraph to get you started and up and running. With these you can take the code and add your own configuration as required to help you cut the time required to get your charts looking the way you want.

There's Bar, Line and Pie charts amongst others, so like the demos that are in the download, feel free to take the code, adapt it (or don't!) and use it yourself.

 

New stable version of RGraph

Written by Richard Heyes, 10th May 2017

A new version of RGraph has been released

On Sunday I added the latest version (4.62 stable) of RGraph to the website. You can download it from the download page (www.rgraph.net/download.html#stable).

There's a new SVG Rose chart which has four distinct modes, various fixes to the SVG libraries. You can read the full changelog here: www.rgraph.net/changelog.html

 

A new stable release of RGraph is now available

Written by Richard Heyes, 18th February 2017

A new version of RGraph has been released

I've just released a new version of RGraph - version 4.61. You can read the changelog by clicking on the link.

This release adds a new SVG based Scatter chart and Waterfall chart. To go with the Scatter chart there's a new RGraph.SVG.parseDate() function that accepts a wide variety of formats eg 2012-01-06 12:14:12 6 Jan 2012 12:14 31st January 2012 12:14:12 31st January 2012 31st January January 31 2012 January 31

You can read the full list of changes on the changelog.

 

The JavaScript object model

Written by Richard Heyes, 19th December 2015

A new article is available that explores the JavaScript object model and explains the various options that you have when using it.

It only talks about the ES5, functional style of object-oriented programming and does not explain the new ES6 classes that are now available.

How does this apply to RGraph?

In order to keep compatibility with older browsers that may not support newer JavaScript features (ie the newer syntax for defining classes) all of the RGraph objects are defined using this style of object definition.

So understanding how JavaScript objects are defined and used will help you when you're working with RGraph.

 

SVG style paths for canvas with the RGraph path() function

Written by Richard Heyes, 3rd September 2015

As stated elsewhere canvas paths are (unnecessarily) verbose. The W3C has attempted to aid the issue by introducing support for SVG paths in the new Path2D object.

This new object, however, is not currently widely supported. So RGraph provides a work-around using the RGraph.path() function.

This is a description of that function and a version of it that has been extracted from the RGraph code and works standalone.

 

9 Good looking charts that you can find in the demos

Written by Richard Heyes, 16th August 2015

Creating good looking charts isn't terribly difficult - for some people. If like me you're rather limited in graphical abilities then creating attractive charts is not always as straight-forward as it sounds.

If you have a graphical designer on hand it can be easy - simply ask them for a mock-up that you can copy the graphical styling from or present them with a chart and say "Make it look pretty!".

But if you're not fortunate enough to have a graphical designer to hand then you're on your own. Almost, (by the way, on a completely unrelated side-note did you know that Google Image Search is a very good tool).

Just thought I would throw that in to the mix.