News and updates for 2022

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

2022 2021 2020 2019 2018 2017 2015

AJAX image uploads now available for forum posts

Written by Richard, 6th May 2022

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. [forum]

Version 6.07 of RGraph now available

Written by Richard, 10th April 2022

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.

// 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
    }
}).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: null
    }
}).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

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
    }
}).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: null
    }
}).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.

Version 6.06 of RGraph is now available

Written by Richard, 22nd January 2022

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:

RGraph.GET.number()
RGraph.GET.string()
RGraph.GET.json()
RGraph.GET.array()

And for SVG:

RGraph.SVG.GET.number()
RGraph.SVG.GET.string()
RGraph.SVG.GET.json()
RGraph.SVG.GET.array()

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