News and updates for 2022

2022  2021  2020  2019  2018  2017  2015 

All charts on the RGraph website have been switched to canvas-based text

Written by Richard, 15th June 2022

Perhaps you're aware of the RGraph websites' utterly dire performance on Google. Just google "javascript charts" (no quotes) and you will see. If you're in the UK the site may be on page 3 or 4 and if you're elsewhere in the world then you'll probably see it even lower.

This has been a constant cause of pain for me over the past ten (!) years. I'm frequently doing various things to try and increase the ranking - nothing ever works.

My latest attempt has been to switch all of the charts on the website from using accessible text to use canvas-based text. The default hasn't changed, however, so if you use RGraph your charts will be unaffected and your site is also unlikely to be affected this. This website however has many, many pages which show charts(100-200) so the setting might well be having an effect.

It will take time for everything to be re-indexed and maybe even more time for the relevant Google algorithm to run and reassess the website so this change will take time to have an effect - if it has one at all!

AJAX image uploads now available for forum posts

Written by Richard, 6th May 2022
AJAX file uploads for new forum posts

It seems to be quite the rage at the moment - AJAX file uploads for forms. So now you can attach up to three images (each of which can be up to 100k in size) to your forum posts (not replies though). If it gets abused I'll have to review it's use - but I think it should be fine. Famous last words... I've also implemented deep anchors - so instead of just linking to the page and then having to find the reply that may interest you - you can link directly to it. See it in action on the forum:

Visit the RGraph forum

Version 6.07 of RGraph now available

Written by Richard, 10th April 2022
A new version of RGraph has been released

Version 6.07 of RGraph is now available to download from the RGraph website. This is another minor release with no huge changes though there are a couple of new functions that will help you with creating dual color (Line) charts (an example of which is shown below) . There are other bug fixes and minor changes. You can download RGraph from the download page: https://www.rgraph.net/download.html#stable

SVG Bipolar updated to support uneven data

Written by Richard, 1st April 2022 A Bipolar chart with uneven data

This isn't an April Fools joke I promise (!) - the SVG Bipolar chart has been updated to support uneven data. What does this mean? Well just take a look at the image shown here - you can now mix regular and grouped/stacked sets of bars on the same chart and it won't explode! Which is nice.

New clipping functions

Written by Richard, 28th March 2022

Following on from the previous dual-color Line chart demo here's another example of that sort of chart. The difference with this one is that it uses two new functions that have been added to RGraph: RGraph.ClipTo.start() and RGraph.clipTo.end() These functions will be available from version 6.07 and make clipping the canvas easier. The documentation for them will be part of the API docs (it will only be there after version 6.07 has been released).

The beforedraw and draw RGraph events are still used to set up and remove clipping, but the RGraph functions make doing this far clearer and easier to understand.


[No canvas support] 


// This is the first chart and draws the green,
// top half of the chart
line1 = new RGraph.Line({
    id: 'cvs',
    data: data = [
        4,8,6,3,2,4,-5,-4,5,6,-1,-9,1,2,-3,-5,-7,-4,-2,-2,6,2,3,4,
        4,8,6,2,3,5,1,4,9,5,6,4,3,8,7,5,6,4,5,1,2,3,4,6
    ],
    options: {
        textSize: 15,
        xaxisPosition: 'center',
        yaxis: false,
        backgroundGridHlinesCount: 10,
        backgroundGridVlines: false,
        backgroundGridBorder: false,
        shadow: false,
        linewidth: 0.5,
        colors: ['green'],
        filled: true,
        filledColors:['rgba(0,255,128,0.25)'],
        marginInner: 15,
        spline: true,
        xaxisLabels: ['Jan','Feb','Mar','Apr','May','Jun','Jul','Aug','Sep','Oct','Nov','Dec'],
        xaxisTickmarksCount: 12,
        textAccessible: false
    }
}).on('beforedraw', function (obj)
{
    // This is the new function that makes clipping the
    // canvas much easier. It can take a multitude of different
    // arguments. In this case, it simply clips to the top half
    // of the canvas (and then the other chart clips to the
    // bottom half). You can read about all of the different
    // ways that you can call this function in the API documentation
    // ( https://www.rgraph.net/canvas/api.html#functions.clipping )
    // and there's four examples that use it in the demos in
    // the download archive.
    RGraph.clipTo.start(obj, 'tophalf');

}).on('draw', function (obj)
{
    // This complements the above RGraph.clip.start() function and
    // ends clipping - returning the canvas to a neutral state.
    RGraph.clipTo.end(obj);
}).trace();



// And this is the second, red Line chart that's shown on the
// lower half of the chart.
line2 = new RGraph.Line({
    id: 'cvs',
    data: line1.data,
    
    // Set the options for the second chart. The ES6 "spread" operator (...)
    // is used here to reuse the options that were set in the first
    // object. Further options are then set in order to distinguish
    // it from the first chart.
    options: {
        ...line1.properties,
        colors: ['red'],
        filledColors: ['rgba(255,128,128,0.25)'],
        yaxisLabels: false,
        xaxisLabels: ['Jan','Feb','Mar','Apr','May','Jun','Jul','Aug','Sep','Oct','Nov','Dec'],
        textAccessible: false
    }
}).on('beforedraw', function (obj)
{
    // Start clipping the canvas - this time to the lower half of
    // the canvas.
    RGraph.clipTo.start(obj, 'bottomhalf');

}).on('draw', function (obj)
{
    // End clipping
    RGraph.clipTo.end(obj);
}).trace();

New dual-color Line chart added to the download archive

Written by Richard, 20th March 2022
[No canvas support]

I've just added a new demo to the RGraph download archive which shows a dual-color Line chart - one color for positive values and another color for negative values. The demo code is shown below and it should function correctly with version 6.06 of RGraph (the current version). It will be included in the next available download archive (version 6.07) whenever that is available.

The chart uses the beforedraw and draw events in order to install and remove clipping - which facilitates using two separate colors for positive and negative values.

Note also that the second chart uses the ES6 spread operator so if you're using a particularly old browser then this demo may not function correctly. 

// The first line chart is clipped to the top half of the
// canvas so you only see the top half of the chart. The
// clipping is installed by the beforedraw event and then
// removed by the draw event. As a result you only see the
// top half of the chart (which is red)
new RGraph.Line({
    id: 'cvs',
    data: data = [
        4,8,6,3,2,4,-5,-4,5,6,-1,-9,1,2,-3,-5,-7,-4,-2,-2,6,2,3,4,
        4,8,6,2,3,5,1,4,9,5,6,4,3,8,7,5,6,4,5,1,2,3,4,6
    ],
    options: opt = {
        textSize: 15,
        xaxisPosition: 'center',
        yaxis: false,
        backgroundGridHlinesCount: 10,
        backgroundGridVlines: false,
        backgroundGridBorder: false,
        shadow: false,
        linewidth: 0.5,
        colors: ['red'],
        filled: true,
        filledColors:['rgba(255,128,128,0.25)'],
        marginInner: 15,
        spline: true,
        xaxisLabels: ['Jan','Feb','Mar','Apr','May','Jun','Jul','Aug','Sep','Oct','Nov','Dec'],
        xaxisTickmarksCount: 12,
        textAccessible: false
    }
}).on('beforedraw', function (obj)
{
    obj.path(
        'sa b r % % % % cl',
        0,0,obj.canvas.width,obj.canvas.height / 2
    );
}).on('draw', function (obj)
{
    obj.path('rs');
}).trace();


// This is the chart object that shows the bottom half of the
// chart. Again, clipping is used to accomplish this and is again
// installed by the beforedraw and removed by the draw events.
// This chart uses blue colors instead instead of red.
new RGraph.Line({
    id: 'cvs',
    data: data,
    options: {
        ...opt, // Use the ES6 spread operator to combine
                // the options from above
        colors: ['blue'],
        filledColors: ['rgba(128,128,255,0.25)'],
        yaxisLabels: false,
        xaxisLabels: ['Jan','Feb','Mar','Apr','May','Jun','Jul','Aug','Sep','Oct','Nov','Dec'],
        textAccessible: false
    }
}).on('beforedraw', function (obj)
{
    obj.path(
        'sa b r % % % % cl',
        0,obj.canvas.height / 2,obj.canvas.width,obj.canvas.height / 2
    );
}).on('draw', function (obj)
{
    obj.path('rs');
}).trace();

Older demo added to the download archive

Written by Richard, 6th February 2022

I realised recently that a demo that I showed a screenshot of on this blog, albeit some time ago, wasn't in the download archive. So I've remedied this and the new demo is called demos/bar-grouped-purple.html (it'll be in the next release). Here's a screenshot of it in case you're curious. Click the image to view the source code on GitHub.

A grouped Bar chart

Version 6.06 of RGraph is now available

Written by Richard, 22nd January 2022
A new version of RGraph has been released

RGraph version 6.06 is now available! In the first release of 2022 the main change is that there's now a set of functions that are dedicated to making importing data from the query string (the URL) easier. These new functions are called:

And for SVG: The RGraph.GET.json() function is most useful in my opinion as it allows you to import an entire JavaScript object which can contain multiple things - for example both data and labels. You should be aware, though, that if not properly encoded JSON can interfere with SEO efforts. You can read more about the query string functions on this page. There are a few other changes that you can read about on the changelog page.

You can download the software from the download page:

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

2022  2021  2020  2019  2018  2017  2015