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 - 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:

A new year - a new version of RGraph!

Written by Richard, 3rd January 2021

Happy 2021 everybody! Lets 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. You can download RGraph as usual from the download page .

An under-the-hood change to the responsive function

Written by Richard, 23rd December 2020

For the version 5.27 release there has been an under-the-hood change to the responsive() function.

Currently this function makes use of the window.onresize event in order to be notified of changes to the window size (as well as being triggered initially by RGraph itself to correctly configure the view to start with).

Using this event is suboptimal as it can fire many times per second when the screen or browser window is being resized therefore slowing down the whole page and any JavaScript that is running at the time.

Now, however, the responsive() function has been changed to use dynamically created media queries by way of the Window.matchMedia() function. These are available in all of the browsers that RGraph works with except for Internet Explorer 9 - whose market share is negligible. The code to add a media query to your page using standard JavaScript looks like this:

var mediaQuery = window.matchMedia('screen and (min-width: 600px) and (max-width: 950px)');
mediaQuery.addListener(function (e)
    if (e.matches) {
        // ...

Obviously what RGraph does is a little different in order to integrate it into the RGraph code but it's largely the same. You can see the media query on the first line in red - normally with CSS media queries the minimum screen width wouldn't need to be specified but here it does. RGraph handles this for you though so you just need to give the maximum screen size.

Then, after having been created, a listener function is added for when this query is matched. This function is what takes care of resizing and reconfiguring the chart in the page.

Are there any changes to the usage of the responsive() function?

The usage of the responsive() function hasn't changed so in terms of making use of the new code there's nothing that you have to do differently (technically that's not true - the order of the screen sizes should be reordered from largest to smallest however RGraph will do this for you so you don't have to change your code).

Examples of using the responsive() function can be found in the demos . Remember that there's no change from your point-of-view so you won't see any difference when version 5.27 is released. You can read more about the responsive() function on the documentation page.

The RGraph support forum is back!

Written by Richard, 28th November 2020

After going on its holidays for over two and a half years the RGraph forum is back! It's been completely rewritten to be far nicer (from a coding and maintenance point-of-view) but from your point-of-view it's almost exactly the same. It's still moderated so it won't get clogged up with junk and there might be initial teething issues of course so bear with it!

Visit the forum

A new version of RGraph: Version 5.26

Written by Richard, 3rd October 2020

It's been only five weeks this time since version 5.25 and here's a new version: 5.26. There's nothing particularly ground-breaking in this release and you can see exactly what is in this release by looking through the changelog.

Changes and additions include:

There a few other things that you can read about on the the changelog but these are the main things. You can download the release from the download page.

A new version of RGraph: Version 5.25

Written by Richard, 22nd August 2020

After nearly 3 whole months (!) a new version (5.25) of RGraph is now available. This version introduces changes to tooltips. It changes both the default appearance to white on black, adds static positioning (so no matter where you click on a shape the tooltip always appears in the same place) and adds a little pointer that points to the shape that was clicked on. If the tooltips extend off the left or right of the screen they'll be shifted left or right to try and avoid this. You can see an example of the new tooltips style on this demo page.

The date/time library Moment.js is now included with RGraph. This library allows for far greater manipulation of dates and times than the RGraph.parseDate() API function. You can read about the Moment.js library and its documentation on its website:

There's now a new macro for tooltips: %{table} which allows you to easily show a table of data in your tooltips. To configure the table there are two new properties: tooltipsFormattedTableHeaders and tooltipsFormattedTableData and you can configure how the table looks by using CSS in your pages. There are demos of the new table macro in the download demos.

The full changelog is here: The RGraph changelog and you can get the latest zip file on the download page .

Resurrected news articles

Written by Richard, 15th August 2020

Here are some old news articles that I originally wrote some time ago. For whatever reason they were removed from the site but the information in them is still valid so I've decided to resurrect them.

Examples of dotted and dashed lines Read all about dotted and dashed lines here
This is an article that I originally wrote in 2013 and is all about the then new dotted and dashed lines feature of the canvas tag. It's possible to create dotted and dashed lines even without this setting but it's very clunky and curved lines aren't possible. So native dotted and dashed lines are definitely the way to go if you have the choice.

Read about drag and drop between two canvas tags here
This article is also from 2013 and is an example of creating drag and drop between two canvas tags. Normally you might think that dragging between canvas tags isn't possible but it is if you add a bit of JavaScript magic!

How to measure the text height with the canvas tag
Also from 2013 is this article about measuring text height when you're working with canvas. When you use the measureText() function you aren't given the text height - however this article details a method that will allow you to get both the width and the height of your text.

The new features of the canvas v5 specification
Back in 2012 this was an article about the then new features of the canvas v5 specification. Such new features include things like a new Path object, Hit Regions and more. Now, 8 years on, a lot of the features still haven't been implemented (some have though). The Path object for example would be very useful but still hasn't been implemented - however RGraph has an alternative that can be used which is detailed here.

A description of Path2D objects
From early 2014 this article goes into the then new Path2d object that had been added to the canvas v5 specification. It details the API and gives you examples of its use. RGraph has its own pathing function which turns paths into a single string (like SVG paths). So you will see things similar to this in the RGraph codebase:

    'lw % b m % % l % % s %',
    x, y, width, height,

Why using semi-colons in JavaScript can lead to better minified code
You don't always have to use semi-colons at the end of lines in JavaScript, but doing so can lead to better minified code. This article explains why.

Fixed tooltip position

Written by Richard, 22nd July 2020

Image of RGraph chart using the new property tooltipsPositionStatic Here's an image of a nice looking Bar chart that shows a new option that has been added for version 5.25 - the tooltipsPositionStatic property. The tooltip also has a pointer that is indicating the relevant bar and that's enabled by using the new tooltipsPointer option.

Notice also that the tooltip key color blobs have a white border around them. CSS for the key color blobs can be stipulated by using the tooltipsFormattedKeyColorsCss.

And finally there's also a tooltipsPointerCss option - you probably won't need this though.

Adding a CSS border to your canvas tag

Also, on an entirely different note, here's a tip that you may or may not know. If you want a border around your chart then you can do that easily with CSS. However if you use tooltips as well then the extra width of the border can throw the calculations of the correct positions out.

Fortunately you easily circumvent this by wrapping your <canvas> tag in a <div> tag and applying any border that you want to that instead. For example:

<div style="border: 100px solid gray; display: inline-block">
    <canvas id="cvs" width="600" height="250">[No canvas support]</canvas>

RGraph 5.25 to include Moment.js

Written by Richard, 22nd July 2020

From version 5.25 RGraph will bundle the moment.js library with it. This library gives you far greater control over dates and times than the RGraph library provides. It can be used like this:

new RGraph.Scatter({
    id: 'cvs',
    data: data,
    options: {
        tickmarksSize: 10,
        xaxisTickmarksCount: 7,
        xaxisScaleMin: moment('2020-01-01'),
        xaxisScaleMax: moment('2020-01-01').add(1, 'year'),
        backgroundGridVlines: false,
        marginRight: 100

There are many more possibilities than this of course - some complicated and some not. You can read about moment.js and its documentation at the website:

Infographic examples that can be made with RGraph

Written by Richard, 22nd July 2020

I first penned (typed) this in December 2019 so it's little old - I just never got around to publishing it. But now I have and here it is. It's seven examples of infographic style charts that you can make using RGraph. They're all made with the standard chart types along with a smattering of customisation. Here's the link: Infographic charts created with RGraph

A new version of RGraph is available - version 5.24

Written by Richard, 14th June 2020

A new version of RGraph has been released

This announcement is coming a little late (two weeks late!) - at the end of May I released a new version of RGraph - version 5.24. This is a bugfix release that doesn't contain a whole lot of changes. The few changes that have been made 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.23

Written by Richard, 30th April 2020

A new version of RGraph has been released

It's been not quite two months since version 5.22 was released so it's about time that I released 5.23 - so that's what I've done!

A notable change is that you can now use (certain) tooltip substitutions in the tooltipsCss values as well as in the tooltips themselves. This makes it even easier to customise how your tooltips look. So you could set the CSS like this:

// Some colors used by the chart
colors: ['red','green','blue'],

// A custom property
tooltipBackgroundColors: [

// Some CSS values for the tooltips that use substitutions
tooltipsCss: {
    fontSize: '24pt',
    border: '3px solid %{property:colors[%{dataset}]}',
    backgroundColor: '%{property:tooltipBackgroundColors[%{dataset}]}'

The Line chart has had dataset tooltips added. These are just like regular tooltips but allow you to click anywhere on a line and get a tooltip. You can have one for every dataset that's on the chart. This feature uses the newer canvas function isPointInStroke() so there are a few really old browsers (for example Internet Explorer 11) that don't support this function or feature.

Various charts have had the highlightStyle invert option added. Using this in conjunction with the highlightFill option to specify the color you can have the charts fade out the non-selected shapes instead of highlighting the focused bar. For an example of this you can see it on this demo page.

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.22

Written by Richard, 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'
[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:

    'lw % b r % % % % s black f red',
    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, 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, 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, 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, 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, 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, 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 support forum .


Version 5.01 of RGraph has been released

Written by Richard, 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, 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).


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, 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:

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, 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 ( ).

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, 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, 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, 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, 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, 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 ( 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 (

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 ( 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, 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, 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 (

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:


A new stable release of RGraph is now available

Written by Richard, 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, 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, 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, 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.