News and updates for 2020

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

2021  2020  2019  2018  2017  2015

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
A new version of RGraph has been released

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.

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


A new version of RGraph: Version 5.25

Written by Richard, 22nd August 2020
A new version of RGraph has been released

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: https://momentjs.com/

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.

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

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:

this.path(
    'lw % b m % % l % % s %',
    linewidth,
    x, y, width, height,
    color
);

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>
</div>

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
    }
}).draw();
    

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: https://momentjs.com

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.

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

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: [
    'rgb(255,239,239)',
    'rgb(239,255,239)',
    'rgb(239,239,255)'
],

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

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

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'
    }
}).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.

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

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

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

2021  2020  2019  2018  2017  2015