Release notes for 2019
- December 2019 (v5.2)
- October 2019 (v5.11)
- September 2019 (v5.1)
- August 2019 (v5.02)
- May 2019 (v5.01)
- January 2019 (v5.00)
December 2019 (v5.2)
This release has many changes to the internals of RGraph - particularly the shape
objects that each charts getShape
function returns. So if you upgrade and you
use this function you should test your charts before you commit to the new version.
-
The
Bar chart
axes
property should no longer be used. Use thexaxis
andyaxis
properties instead. This will apply to other charts that use axes from the next release and also they-axis
. -
The tag that's used for the
x-axis
labels has changed fromlabels
toxaxis.labels
If you use this you'll need to update your code. -
The
RGraph.path
function can now be called using each objectspath
function. This results in less typing and a clearer syntax for those reading the code. For example:// Create the Bar chart as normal bar = new RGraph.Bar({ id: 'cvs', data: [4,8,6,5,3,5,8], options: { } }).draw(); // The original usage of the RGraph.path() function RGraph.path({ object: bar, path: 'b r % % % % f %', args: [0,0,1000,1000,'gray'] }); // Less verbose syntax bar.path({ path: 'b r % % % % f %', args: [10,10,100,100,'red'] }); // Even less verbose syntax bar.path('b r % % % % f %', 120, 10, 100, 100, 'green');
-
The
Pie chart
and theRose chart
shape
object index names have been changed:angle.start
is nowangleStart
,angle.end
is nowangleEnd
,radius.start
is nowradiusStart
andradius.end
is nowradiusEnd
. You'll need to adjust your code accordingly if you use these properties. They were changed so that they worked better as object property names. -
The
RGraph.linearGradient
function has had its arguments list changed. It should now only be called using the object notation like this:RGraph.linearGradient({ object: obj, // The chart object x1: x1, // The start X coordinate x2: x2, // The end X coordinate y1: y1, // The start Y coordinate y2: y2, // The end Y coordinate colors: colors // An array of colors to use in the gradient });
-
The
RGraph.radialGradient
function has had its arguments list changed. It should now only be called using the object notation like this:RGraph.radialGradient({ object: obj, // The chart object x1: x1, // The start X coordinate x2: x2, // The end X coordinate y1: y1, // The start Y coordinate y2: y2, // The end Y coordinate r1: r1, // The start radius r2: r2, // The end radius colors: colors // An array of colors to use in the gradient });
-
The
RGraph.filledCurvyRect
andRGraph.strokedCurvyRect
functions have been renamed toRGraph.roundedRect
. To use this function you need to do thefill
and/orstroke
yourself like this:context.beginPath(); context.strokeStyle = 'red'; context.fillStyle = 'black'; RGraph.roundedRect({ context: context, x: 50, y: 50, width: 100, height: 100, radius: 25 }); context.stroke(); context.fill();
The API documentation for this function is here. -
Function names that were all lower-case in the core libraries have been changed to be
camel-case. For example
RGraph.contextmenu
has been changed toRGraph.contextMenu
(all common libraries have been updated). -
The object returned by the
Bar chart
getShape
function has been adjusted. The indexes returned in the object are now:index
dataset
sequentialIndex
-
The object returned by the
Bipolar chart
getShape
function has been adjusted. The indexes returned in the object are now:index
dataset
sequentialIndex
-
The object returned by the
Funnel chart
getShape
function has been adjusted. The indexes returned in the object are now:index
dataset
(this is always zero)sequentialIndex
-
The object returned by the
Gantt chart
getShape
function has been adjusted. The indexes returned in the object are now:index
dataset
sequentialIndex
subindex
property has been removed - the equivalent now is theindex
property, whilst thedataset
property refers to the row whether it has one or multiple bars on it. -
The object returned by the
Horizontal Bar chart
getShape
function has been adjusted. The indexes returned in the object are now:index
dataset
sequentialIndex
-
The object returned by the
Horizontal Progress bar
getShape
function has been adjusted. The index returned in the object are now:index
dataset (this is always zero)
sequentialIndex
-
The object returned by the
Line chart
getShape
function has been adjusted. The indexes returned in the object are now:index
dataset
sequentialIndex
-
The object returned by the
Pie chart
getShape
function has been adjusted. The indexes returned in the object are now:index
dataset
sequentialIndex
-
The object returned by the
Radar chart
getShape
function has been adjusted. The indexes returned in the object are now:index
dataset
sequentialIndex
-
The object returned by the
Rose chart
getShape
function has been adjusted. The indexes returned in the object are now:index
dataset
(same as thegroup
)group
(same as thedataset
)sequentialIndex
-
The object returned by the
RScatter chart
getShape
function has been adjusted. The indexes returned in the object are now:index
dataset
sequentialIndex
-
The object returned by the
Scatter chart
getShape
function has been adjusted. The indexes returned in the object are now:index
dataset
sequentialIndex
-
The object returned by the
Semi-circular Progress chart
getShape
function has been adjusted. The indexes returned in the object are now (they're all zero):index
dataset
sequentialIndex
-
The object returned by the
Thermometer chart
getShape
function has been adjusted. The indexes returned in the shape object are now (they're all zero):index
dataset
sequentialIndex
-
The object returned by the
Vertical Progress chart
getShape
function has been adjusted. The indexes returned are now :index
dataset
sequentialIndex
-
The object returned by the
Waterfall chart
getShape
function has been adjusted. The indexes returned in the object are now:index
dataset
sequentialIndex
-
The objects returned by the drawing
api
objectsgetShape
functions (all of them) have been adjusted. The indexes returned in the objects are now:index
dataset
sequentialIndex
-
The
Activity meter
has been added and resides in theRGraph.pie.js
library. This type of chart was previously possible but it involved a lot of custom code. You can see a demo of it here. -
The indexes on tooltips (and therefore their
id
attributes) have changed to be the relevantsequentialIndex
instead of theindex
. -
Notice In a later release I'll be changing all of the
__*__
properties to have a different format for their names. The new format will bergraph_*
(egrgraph_index
rgraph_dataset
rgraph_sequentialIndex
) -
The shape objects that are returned by each objects
getShape
function do not now return any numeric indexes - so the only indexes that are returned are textual ones. This should make your code much easier to read and understand. For example, theBar chart
returns:shape = obj.getShape(e); // If a bar/segment is matched the shape object will contain these indexes: // // shape.object // The RGraph Bar chart object // shape.x // The X coordinate for the rectangle // shape.y // The Y coordinate for the rectangle // shape.width // The width of the rectangle // shape.height // The height of the rectangle // shape.dataset // In a regular Bar chart the dataset is the same as the sequentialIndex // In a grouped or stacked Bar chart it pertains to the group of values. // shape.index // In a regular Bar chart the index is always zero whilst in a grouped // or stacked chart it pertains to the Bar in the relevant group // shape.sequentialIndex // This is the sequential index of the bar/segment. // shape.tooltip // The corresponding tooltip for the Bar or segment.
Other charts will return different indexes and you can see what they are by inspecting the shape object in your browser'sjavascript
console ieconsole.log(shape);
. -
There is now a dedicated Segmented meter chart
that is based on the
Pie chart
. This was previously possible - though a lot more code was required to create it. Now the code has been significantly reduced so creating such a chart is much easier. -
The
RGraph.random.array
function is now calledRGraph.arrayRandom
. If you use this function you'll need to change your code.
October 2019 (v5.11)
-
Added two new
svg
api
methods:RGraph.SVG.reset
andRGraph.SVG.OR.clear
. TheRGraph.SVG.clear
function can now take a string as well as thesvg
tag:RGraph.SVG.clear()
Clear all of the registeredsvg
tags that are on the page.RGraph.SVG.clear(id)
Clear thesvg
tag that has the given ID (the ID is the ID that you add to thediv
tag).RGraph.SVG.clear(svg)
Clear the givensvg
tag (adom
node).RGraph.SVG.reset()
Reset all of the registeredsvg
tags that are on the page.RGraph.SVG.reset(id)
Reset thesvg
tag that has the given ID (the ID is the ID that you add to thediv
tag).RGraph.SVG.reset(svg)
Reset the givensvg
tag (adom
node).RGraph.SVG.OR.clear()
Clear the entire ObjectRegistry.RGraph.SVG.OR.clear(id)
Clear the object with the given ID from the ObjectRegistry.RGraph.SVG.OR.clear(object)
Clear the given object from the ObjectRegistry. Objects are matched by using their UIDs.
- The
todo.html
page has been removed. -
svg
charts such as theBar chart
Horizontal Bar chart
Line chart
Scatter chart
andWaterfall chart
can now all have they-axis
positioned on the right-hand-side. -
The
svg
Scatter chart
default for the number of background grid horizontal lines has been changed from 10 to 5. -
The
responsive
function has been added to both thecanvas
andsvg
charts. This makes buildingresponsive
charts for your pages much easier and allows you to reconfigure them according to the screen/browser size. Read more about this new feature here. -
The
line-banded.html
demo in the download archive has been changed to use a gradient instead of custom coding to achieve the banding effect. The new demo is calledline-banded-gradient.html
. -
The functions - the core functions initially - are being converted to use a single object
as the arguments instead of individual arguments. So they'll look like this when they're
called:
myFunc({ name: 'Richard', age: 32, hair: 'red' });
And the definition for that function would be:function myFunc (args) { var name = args.name, age = args.age, hair = args.hair; // ... }
Thus far only theRGraph.getScale
and theRGraph.parseJSONGradient
functions have been updated.
September 2019 (v5.1)
Lots of changes in this release that break backwards compatibility. A lot of code that supported
older methods and styles has been removed. If you use the current configuration style
though (ie json
) you likely won't notice anything. That's the theory at least. All of the demos
have been converted to dynamic source code rendering - meaning that the source code that you see
is generated from the source code that's used to create the chart - this should raise the
accuracy of the demo pages.
-
As mentioned, the libraries have had lots of legacy code removed and they've been brought
up-to-date in regards to coding standards. Some of the code that has been removed supported
some older features and styles so if you update you will need to be using the
json
style of creating/configuring charts (as shown in all of the documentation pages). If you already use this style then there will be few or no changes that you will have to make. Some of the changes that have been made to the libraries are:-
The
parseConfObjectForOptions
function now always runs. It has also been simplified, so you need to be using the current style of property names as shown in the documentation. -
Code that was in the
set
function (that accommodated some older backwards-compatibility) has been removed. - Remember that the
json
configuration should now be used to configure your charts. - The
propertyNameAliases
property, which was never used, has been removed. - The call to
RGraph.OldBrowserCompat
has been removed. -
The list of property names inside each chart file has been updated from
'chart.margin.left': 25
tomarginLeft: 25
-
The
set
methods have been updated and the older compatibility code removed. Theset
methods now accept these formats:// Set a single property obj.set('marginLeft', 50);
// Multiple properties set at once obj.set({ marginLeft: 35, marginTop: 5, marginBottom: 35, title: 'A title for your chart' });
-
In a similar vein to the
set
methods having been updated, theget
methods have also been simplified. -
All method names have been standardised on lowercase first letters - "camel-case". So formerly
a method name might have been
obj.DrawBars
whereas now it'sobj.drawBars
This was an internal code change so it shouldn't affect you too much if you already use lowercased method names. If not however you will need to change your code. - The call to
parseObjectStyleConfig
has been removed. -
The
chart.
prefix has been removed from properties and also from registry calls. -
The short variables, which were used extensively throughout the libraries, have
been changed to their more verbose, but clearer, counterparts. ie:
RG
is nowRGraph
ca
is nowcanvas
co
is nowcontext
pa2
is nowpath
win
is nowwindow
doc
is nowdocument
prop
is still used and refers to theobj.properties
variable
-
The
-
css
classes have been added to the text that thecanvas
charts use. Of course, this only happens if you're using accessible text. The classes are added to thespan
tags that RGraph adds. These classes are:rgraph_accessible_text
rgraph_accessible_text_cvs
(thecanvas
ID)rgraph_accessible_text_title
(the internal tag name that RGraph uses for the text)rgraph_accessible_text_bar (the type of RGraph chart)
-
These Odometer defaults have been changed: the
border
property has been changed to betrue
by default, thetickmarks
property has been changed to befalse
by default and thetickmarksHighlighted
property has changed to betrue
by default. - There's a new StarBurst effect available with RGraph. This was previously a blog entry and a few of the demos used it though now it has been rewritten and added to its own library file so it's far easier for you to use. There are a couple of demo pages linked that allow you to easily understand the code and how it works.
-
The
RGraph.deprecated.js
library has been removed. All of the code in it was really old so there's no big loss. -
The
RGraph.setShadow
function can now take just a single argument - the chart object - in which case the shadow is turned off. -
All of the demos have been converted to use dynamic source code rendering. This means that
the
javascript
source code is used to create the visible source code on the page (that you see when you look at the page in your web browser). -
The
exec*
option that you add to your configuration that executed a function there and then has been removed.
August 2019 (v5.02)
-
The
RGraph.path
function (formerly theRGraph.path2
function) has been updated so it now works in any of the following configurations:// Single argument (preferred usage) RGraph.path({ object: myObject, path: 'b r % % % % f %', args: [150,150,50,50,'red'] }); // Single argument passing the context instead of the object RGraph.path({ context: myObject.context, path: 'b r % % % % f %', args: [250,150,50,50,'red'] }); // Multiple arguments using the object RGraph.path( myObject, 'b r % % % % f %', 350,150,50,50,'red' ); // Multiple arguments using the context RGraph.path( myObject.context, 'b r % % % % f %', 450,150,50,50,'red' );
Going forward the first is the preferred usage mode. -
Like the
canvas
String.format
function thesvg
version can now also use the %[number] format instead of the {[number]} format. So it could look like this:'Some example text: %1 {2} %3 %2'.format('red', 'orange','yellow')
The output would be this:Some example text: red orange yellow orange
-
The
Horseshoe meter
example for thePie chart
has now been converted to a dedicated class so it's far easier to use. The example is here if you want to view it: https://www.rgraph.net/demos/pie-horseshoe.html And there's a note in the documentation here. -
Fixed a bug in the
canvas
RGraph.parseDate
function that presented itself when you used the date format2012-12-31T20:23:56
-
Added
xaxisLabelsAngle
to the drawingapi
x-axis
object for both labels and scales. -
Added the Drawing API X-axis
xaxisLabelsOffsetx
andxaxisLabelsOffsety
properties. -
Added the Drawing API Y-axis
yaxisLabelsOffsetx
andyaxisLabelsOffsety
properties. -
Added two needleHead* properties to the Meter chart that will help you control the appearance
of the needle head:
needleHeadWidth
andneedleHeadLength
-
The
RGraph.text
function can now take just a single argument - like this:RGraph.text({ object: bar, x: 50, y: 50, bold: false, italic: false, text: 'Some custom text' });
-
Added the
RGraph.SVG.text.defaults
object. This acts precisely like thecanvas
RGraph.text.defaults
object described below but applies toRGraph.SVG.text
function. -
Added the
RGraph.text.defaults
object. With this, you can set default values that are then used by theRGraph.text
function. For example:RGraph.text.defaults.bold = true; RGraph.text.defaults.font = 'Verdana'; RGraph.text.defaults.size = 18;
This object is for when you're adding text to your charts by using theRGraph.text
function yourself - not so much the text that's added by RGraph in the process of creating charts. -
The
String.format
function now supports a syntax more like the classicC
functionprintf
. For example:str = 'The %1 brown fox jumps over %2 lazy dog. Yes %1!'; str = str.format('quick', 'the'); alert(str);
- Some of the demos that are in the download archive didn't include the core library in the page so they didn't work offline. This has been fixed so all the demos should now work offline.
-
Made a change to the
svg
Line charts
so that if you have two (or more) datasets and view the tooltip with the same index on one line then the other the tooltips appear as you'd expect. They previously required you to click first to clear the tooltip. -
Documented the missing
needleHead
Meter chart
property. -
The
canvas
Rose chart
obj.data_seq
property was added. This is a sequential representation of the data (ie a flattened version of the data). -
The
canvas
Rose chart
strokes are now redrawn if thelinewidth
is greater than one. This means that the strokes will appear above any fill color. This has been changed forregular
,stacked
andnon-equi-angular
variations of the chart.
May 2019 (v5.01)
-
The
hmargin
property has been changed across all libraries tomarginInner
. As well as this thehmarginGrouped
property has been changed tomarginInnerGrouped
. You will need to change your code if you're setting this property otherwise it will revert to the default value. -
The
sketch
variant of theBar chart
has been updated to better respect themarginInner
setting. There are two examples of this type ofBar chart
in the demos in the download archive:- bar-sketch.html
- bar-sketch-wedding.html
-
Fixed a bug in the generic
slideIn
animation function. -
Added a demo file for boxplots using the
canvas
Scatter chart
. -
Fixed a bug in the
Bar chart
- they-axis
was missing a tickmark where it joined on to thex-axis
. -
Both the
canvas
andsvg
versions of the Google Sheets connector have been updated to support fetching a matrix of cells. What does this mean? It means you'll have to write less code! Previously if you wanted to do something like this:sheet.get('B2:E13')
you weren't able to - you'd have to do it with a loop of your own creation. Now however this works and simply returns to you a two-dimensional array. Perfect if you want to show a grouped or stackedBar chart
. The PHP version of the Google Sheets connector has also been updated with this feature. -
The
canvas
RGraph.parseDate
function has been updated to be the same as thesvg
version of the function. This version is far more versatile in parsing date and time values so more date and time formats are accepted. The older version of the function is still in theRGraph.common.core.js
file and has been renamed toRGraph.parseDateOld
If, for some reason, you want this older version instead of the newer version you should be able to just changeRG.parseDateOld =
toRG.parseDate =
-
I've added the
exec
function to chart types that it was missing from (egScatter
,Waterfall
). -
A bug has been fixed with the
graph
key mode where the text was specified as bold, resulting in incorrect length measurements being used. - The RGraph blog has been changed to an RGraph news repository and will be treated as such from now on and only significant announcements will be added there. It has also been trimmed down from about 100 entries to just 20-25. A few articles have been kept - such as the "Spotlight on..." series as well as release announcements.
-
Changed the name of the
Waterfall chart
textAngle
property toxaxisLabelsAngle
. You'll need to update this in your code if you use it. -
Fixed a bug with one of the
Pie chart
demos which was using the older styleRGraph.numberFormat
function. -
Fixed an "off by one" error in the Waterfall
grow
animation effect. This was only noticeable if you used thelabelsAbove
option. -
The
labelsAbove
option for specifying a separator was spelled incorrectly and is now called this:labelsAboveSeparator
January 2019 (v5.00)
-
The 5.00 release adds a lot of new (mainly text) properties to
practically
all of the chart libraries. More so the
canvas
libraries, but thesvg
libraries are by no means excluded from this update. All of the charts have been touched in some way - if only to update the gutter* properties to now be called margin*. This update has naturally affected the larger libraries more though as they're the ones with more properties. If you upgrade from a past version then you'll need to consult theapi
documentation (svg
andcanvas
) to see the changes. Theapi
hasn't changed - just the property names. All of the documentation pages and the demos have been updated so if you want to have a look at the new style then there are plenty of examples of it in the demo pages that are in the download. Naturally, with an update of this size, there are likely to be bugs. All of the documentation pages and demos have been checked but they don't cover every possible configuration - so I would suggest that you proceed with caution if you're upgrading from a prior version of RGraph. If you're starting with this version then things will be easier - though oddities may still occur. -
Various issues in the
Bipolar chart
have been corrected including rounding issues when drawing the bars, color selection andlabelsAbove
errors when mixing normal and grouped bars. -
The zoom feature has been removed from all chart types. You can
get the same effect by using your browser's built-in zoom
(
CTRL & +
) so it didn't really serve a purpose. -
The
Scatter chart
lines, if enabled, now appear below any above labels. -
The
svg
Semi-circular Progress bar
has had changes made to the highlighting that happens when tooltips are shown. The highlighting no longer overlaps the stroke of the chart. You can see an example by viewing thesvg-hbar-blocky.html
demo in the download archive. -
The
svg
Rose chart
angles
andangles2
arrays no longer contain the details of the segments. Instead, they contain a reference to thesvg
path
element that is the segment. Thissvg
element has data attributes set on it that can give you the necessary details of the segment. Eg Each segment has adata-start-angle
attribute to it. By inspecting the element in your browser you will be able to see the available attributes. Don't forget that more than likely you will need to cast any values to numbers as they are initially strings. -
Added the
svg
Bar chart
propertiesmarginInnerLeft
andmarginInnerRight
-
Added a
callback
option to theRGraph.SVG.text.find
function. This callback function is passed an object which has anodes
property which is the text nodes that were found. Documentation was added for this on the How to use the RGraph.SVG.text.find function page (thesvg
documentation). Thecanvas
version of this function is calledRGraph.text.find
and only works when you're using accessible text (this is the default). -
The drawing
api
y-axis
object title has been moved left a little bit (approximately 7 pixels) so if you use it you may need to update your sizing and/or increase the size of your charts margins. -
Fixed a bug with
svg
scale mirroring where an incorrect lower maximum value would be shown along with no tickmark. - A bug in the
Bipolar charts
has been fixed where the bold setting for the right-handlabelsAbove
labels wasn't being respected. - The
Line chart
default for thelabelsAboveBorder
property has changed to false - The
Line chart
default for thelabelsAboveBackground
has changed torgba(255,255,255,0.7)
- The default padding for
dom
text has been set to 1px instead of 2px. - The
Pie chart
optionlabelsSticksUsecolors
has been removed.