News and updates for 2022

All charts on the RGraph website have been switched to canvas-based text
Written by Richard, 15th June 2022Perhaps 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
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:
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
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, 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 2022I'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 thebeforedraw
event and then // removed by thedraw
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 thebeforedraw
and removed by thedraw
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.
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()
RGraph.SVG.GET.number()
RGraph.SVG.GET.string()
RGraph.SVG.GET.json()
RGraph.SVG.GET.array()
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: