Release notes for 2023
February 2023 (v6.11)
-
There's a new
API
function:RGraph.runOnce
which takes two arguments: a unique ID for the function (which can be any piece of text) and the function to run. -
When drawing ingraph labels on the Pie chart you can now
access a new property:
labelsIngraphUndrawn
which contains the indexes of labels which weren't drawn (because there wasn't sufficient space in the segment). Each entry in this array is an object with two keys:index
andtext
. There's also a new property calledlabelsIngraphUndrawnAsLabels
which will add labels for the elements which aren't drawn. -
The
labelsOffsetRadius
property is now calledlabelsRadiusOffset
. You don't need to update your code immediately because the name change is accommodated for. -
The
canvas
Pie chartlabelsIngraph
labels no longer overlap into other segments (and if they would have they're not drawn). If the labels are too big to fit into the relevant segment the key here is to lower the size of the font (thelabelsIngraphSize
property). Also, increasing theradius
at which the labels are drawn (with thelabelsIngraphRadius
property - for example setting it to0.75
can be good in some circumstances) can prove to be beneficial. -
The
canvas
Pie chart has a new property:labelsIngraphRadiusOffset
If you're using thelabelsIngraphRadius
property to set the position of the labels you can add a pixel offset to them by using this property (it can be positive or negative). -
The
canvas
Scatter chart can now accept objects as well as arrays for the individual points - just like theSVG
Scatter chart. So currently your Scatter chart data arrays look like this:// Single dataset array data: [ [100, 46, 'red', 'Freds result'], [156, 79, 'blue', 'Barneys result'], [123, 56, 'green', 'Wilmas result'], [110, 46, 'black', 'Bettys result'], [123, 23, 'yellow', 'Pebbles result'] ] // Multiple dataset array data: [ [ [100, 46, 'red', 'Freds result'], [156, 79, 'blue', 'Barneys result'], [123, 56, 'green', 'Wilmas result'], [110, 46, 'black', 'Bettys result'], [123, 23, 'yellow','Pebbles result'] ], [ [10, 46, 'red', 'Freds result'], [15, 79, 'blue', 'Barneys result'], [12, 56, 'green', 'Wilmas result'], [11, 46, 'black', 'Bettys result'], [12, 23, 'yellow','Pebbles result'] ] ]
But from this new version you can also define them like this - which is little bit clearer:// Single dataset array data: [ {x: 100, y: 46, color: 'red', tooltip: 'Freds result'}, {x: 156, y: 79, color: 'blue', tooltip: 'Barneys result'}, {x: 123, y: 56, color: 'green', tooltip: 'Wilmas result'}, {x: 110, y: 46, color: 'black', tooltip: 'Bettys result'}, {x: 123, y: 23, color: 'yellow', tooltip: 'Pebbles result'} ] // Multiple dataset array data: [ [ {x: 100, y: 46, color: 'red', tooltip: 'Freds result'}, {x: 156, y: 79, color: 'blue', tooltip: 'Barneys result'}, {x: 123, y: 56, color: 'green', tooltip: 'Wilmas result'}, {x: 110, y: 46, color: 'black', tooltip: 'Bettys result'}, {x: 123, y: 23, color: 'yellow', tooltip: 'Pebbles result'} ], [ {x: 10, y: 46, color: 'red', tooltip: 'Freds result'}, {x: 15, y: 79, color: 'blue', tooltip: 'Barneys result'}, {x: 12, y: 56, color: 'green', tooltip: 'Wilmas result'}, {x: 11, y: 46, color: 'black', tooltip: 'Bettys result'}, {x: 12, y: 23, color: 'yellow', tooltip: 'Pebbles result'} ] ]
-
The
canvas
Pie chart has a new, simple effect -roundRobinSequential
It looks similar to theroundRobin
effect but is, in effect, a circular cover over the Pie chart that gradually reduces in size revealing the Pie. There's a demo of it in the download archive. -
For this release the
title
code has been rewritten - so check your charts and ensure that they appear OK if you upgrade. It should be noted that the X/Y positioning now follows the same direction as thecanvas
coordinate system - so zero is at the top-left and increases as you go down and to the right of thecanvas
. Offsetting follows a similar coordinate system - so positive offset values move the title to the right and down whilst negative values move the title up and to the left. -
The
canvas
Scatter chart has new properties:colorsBubbleStroke
bubbleLinewidth
bubbleShadow
bubbleshadowColor
bubbleShadowBlur
bubbleShadowOffsetx
bubbleShadowOffsety
. As the names suggest, thecolorsBubbleStroke
property allows you to give the bubbles on a bubble chart a stroke color. It defaults tonull
(ie there is no stroke). ThebubbleLinewidth
property controls thelinewidth
of that property. This defaults to 1. And the shadow properties control the shadow that each bubble has. -
This probably won't affect you - but the
canvas
Line chart has a new internal variable:obj.unmodified_data
This variable does what theobj.original_data
was supposed to do but this variable has been used in some effects (eg thewave
effect. So theobj.unmodified_data
is just that - a copy of the original, unmodified data.
January 2023 (v6.10)
- A reminder that, if you want to (hint hint...), you can review RGraph on Google
- The title option has had a little massaging for this release so check that your charts are appearing correctly. Both the title and the subtitle should be strings. For the v6.11 release the code that draws the title and subtitle will likely be rewritten to update it to current standards.
-
Prior to this release the
svg
Bipolar didn't draw shadows 100% correctly when animating stacked charts. This has now been corrected and the shadows grow along with the bars. This was evident in thewave
effect. -
When using the
RGraph.clipTo()
function (read about this function in the API documentation) with thetophalf
bottomhalf
lefthalf
andrighthalf
options they clip to exactly half thecanvas
without taking into account the margins that you've set. This might not be what you want so to remedy this there are now new options available to you when using this function to clip thecanvas
:tophalf.margins
bottomhalf.margins
lefthalf.margins
righthalf.margins
-
svg
chart types that allow the setting of shadows have had theshadowOpacity
option removed and theshadowColor
property added in its place. This affects the followingsvg
chart types: Bar, Bipolar, HBar, Line, Pie, Radar and Waterfall. -
The
keyPositionMarginHSpace
property has been added - it allows you to space out the key items when the key is inmargin
mode. -
The
horizontalLines
property has been added to the Bar, Line, Scatter,svg
Bar,svg
Line andsvg
Scatter charts. As the name suggests - this allows you to easily add horizontal lines to your charts - in particular it's an easy way to add an average value indicator line. There are demos showing this feature in the download archive calledbar-average.html
line-average.html
scatter-average.html
svg-bar-average.html
svg-line-average.html
svg-scatter-average.html
-
The Line chart
backgroundHbars
property can now take an RGraph gradient string (egGradient(red:white)
) as the color. -
Corrected a small bug that prevented the
linedash
being set with theRGraph.path
function. -
I thought I would share this snippet of
CSS
with you that I've recently added to the RGraph website that adds the little grey icon after external links. Previously this was done with some non-trivialJavaScript
but after watching a recent Youtube video I found this snippet which does the same but with a much smaller amount ofCSS
. Compared to theJavaScript
it's simpler, smaller and doesn't require any changes to theHTML
. There's a blog article that goes into more detail about this here.<style> a[rel*="external"]::after { content: url('/images/external-link.png'); padding-left: 5px; } </style>
-
The
canvas
charts have all had thetitleSubtitle*
options added to them. This brings them inline with thesvg
charts. In the process of doing this some of the default values for the Gauge chart have been updated - so if you use this chart you should check your gauges if you upgrade. -
A fair amount of changes have been done to the
website - practically all of the
canvas
examples and demo pages have been converted to images. You can still see thecanvas
demo pages by viewing the bare-bones examples as these are not indexed by search engines. This was forSEO
purposes and appears to be having a significantly positive effect. Thedemos/
are still bundled with the download archive. -
The
svg
charts have each had anobj.create(tag[, parent[, style]])
function added that allows you to now do this:var rect = obj.create( 'rect,x=10,y=10,width=100,height=100,stroke=black,fill=red', // Tag name and attributes parentNode, // Optional and can also be the style to apply if you wish 'border=1px solid gray' // Optional and can also be the parent node to append to );
Compared to the equivalent create function that's currently used:var rect = RGraph.SVG.create({ svg: this.svg, type: 'rect', parent: parentNode, attr: { x: 10, y: 10, width: 100, height: 100, stroke: 'black', fill: 'red' }, style: { border: '1px solid gray' } });
Much more concise I think you'll agree - but this change probably won't impact you a deal unless you happen to delve into the internals of RGraph and do your own drawing with thesvg
charts. - The "one-touch adjusting" HOWTO document has been updated as a result of the two new Line chart methods (mentioned below). You can see this HOWTO document here.
-
The Line chart has a new method:
obj.closest
which, as the name suggests, returns the indexes (an object withdataset
andindex
indices) of the closest point (based on the event object coordinates). This was originally a function in one of the demos (in the download archive) but has now been moved to be a method on the Line chart object.