Release notes for 2021
- November 2021 (v6.05)
- Late October 2021 (v6.04)
- October 2021 (v6.03)
- August 2021 (v6.02)
- July 2021 (v6.01)
- April 2021 (v6.00)
- March 2021 (v5.28)
- January 2021 (v5.27)
November 2021 (v6.05)
-
The
labelsAngled
feature of the HOWTO document that dealt with adding angled labels to your canvas Line chart has now been added to the main Line chart library. This feature allows you to add a set of labels to your chart that follow the up and down undulations of your Line chart (not just sitting above each point as thelabelsAbove
labels do). You can read the documentation for them on the Line chart API documentation page (scroll down to thelabelsAngled
properties). You can still see examples on the HOWTO documentation page. -
The SVG Semi-circular Progress bar
has been updated (much like canvas Semi-circular
Progress):
- Added the
obj.coords
property. - Added the "background grid" and the associated properties.
- Increased the number of default colors to nine.
- Added a scale and a number of associated properties.
- The default
linewidth
is now 1, but the defaultcolorsStroke
is transparent. - Added support for multiple values to be shown on the chart (stacked charts).
- Added the
backgroundColor
property which is actually just an alias forbackgroundFill
.
- Added the
-
The canvas Semi-circular Progress bar has
been updated with a few new features and tweaks:
-
Default values have been added for the
scaleLabelsOffsetx
and thescaleLabelsOffsety
properties. -
The
labelsCenterSpecific
andlabelsCenterIndex
properties have been added. - More default colors have been added.
- Default values for various tooltip properties have been added.
-
The
radius
,centerx
andcentery
properties can now be strings(eg-20
or+20
). - It can now show stacked bars to accommodate multiple values.
- A "background grid" effect has been added.
- It can now show a scale. There are various properties that allow you to control its appearance.
-
The
labelsMin
andlabelsMax
properties have been added that allow you to enable or disable the min/max labels. -
The
radius
,centerx
andcentery
properties can now be strings so that you can adjust the radius as required (eg '+20' or '-15').
-
Default values have been added for the
- The interactive example has been removed.
Late October 2021 (v6.04)
-
Previously, the canvas tooltips used a fade-in effect
when they were shown whilst the SVG tooltips used a
slide effect. Due to how the event-handling was done
it was not straightforward to change the canvas charts
over to a slide effect.
This has now been done, however, so the canvas charts
now have three options for the
tooltipsEffect
property:slide
(the new default value)fade
andnone
The 3D chart on the front page of this website has been switched from SVG to canvas and illustrates the new effect.
October 2021 (v6.03)
-
Some of the demos were still using the older
property name
labelsPercent
when it should actually belabelsComplete
. If you still use the olderlabelsPercent
option you should be aware of this if you upgrade and change to use the newer property name. -
Both the CSV and HTMLTable import utilities have been
updated to allow you to refer to columns or rows
using the first cell. For example, with this row-based
CSV data:
Rich,4,8,6,4,5,2,3 Jane,8,1,2,3,5,4,3 Lucy,1,9,5,6,3,5,4
You can refer to the rows like this:row1 = csv.row('Rich'); // Returns Rich,4,8,6,4,5,2,3 row2 = csv.row('Jane'); // Returns Jane,8,1,2,3,5,4,3 row3 = csv.row('Lucy'); // Returns Lucy,1,9,5,6,3,5,4
-
The tooltips on the SVG charts have, since their
inception, used a CSS transition for the movement
that you see when showing a tooltip. From version
6.04 the canvas libraries will also have the facility
of a sliding effect which you can see by setting the
tooltipsEffect
property toslide
. From version 6.04 this will be documented and will also (all being well) be the new default effect for tooltips. The code for this is currently in the tooltips library and you can activate it by setting thetooltipsEffect
property toslide
(you'll also want to set thetooltipsEvent
property tomousemove
) - but be warned that it hasn't been tested beyond thedemos/bar-basic.html
demo page. -
The CSV connector documentation page has been updated to bring it into line with the new
HTMLTable importer page. Also, the
column()
androw()
methods have been updated to make them operate the same way as the HTMLTable connector methods. Again, you can read about them on the CSV importer documentation page. If you currently use thegetRow()
orgetCol()
functions you can change them to the newerrow()
andcolumn()
function names but they're the same functions so it won't make any difference. -
SVG and canvas versions of the HTMLTable import utility
have been added. This utility allows you to easily import an HTML table that's on the same page.
Both canvas and SVG libraries have been added but the only difference is the names
(eg
RGraph.HTMLTable
vsRGraph.SVG.HTMLTable
). You can see an example of how it's used on the documentation page that's linked above. -
Both the canvas and SVG line charts have had the
linecap
andlinejoin
properties added. These can be arrays or strings. They both default toround
- On some of the SVG charts - when the shapes were being highlighted (eg for tooltips) - there were small discrepancies in the coverage of the highlight. This has now been resolved so that the shapes are now fully covered when they're being highlighted.
-
Both the canvas and SVG Line charts now have a new
nullBridge
option (along withnullBridgeLinewidth
nullBridgeColors
andnullBridgeDashArray
). By default when you havenull
values in your Line chart data you will see a gap in the Line. With this though, you can have a dotted/dashed/solid line bridge that gap. - An extra tickmark was being drawn in the right margin of the SVG Line chart - this has now been remedied.
-
The canvas and SVG Line charts now have a
trendlineClip
option. This constrains the drawing of the trendline to the chart area (not including the margins). -
The
adjustableXonly
property has been added to the canvas Line chart. Previously this was possible but required a fair amount of custom code but now you just have to specify a single option. There is a caveat though - only one dataset (line) is supported on the chart. You can use thetooltipsHotspotSize
property to control the size of the adjusting hotspot. -
The positioning code for the
tooltips
has been adjusted. It now uses the standard API methodNode.getBoundingClientRect()
to get the position of the canvas on the page. You should check that your interactive features are working satisfactorily after upgrading. This affects both canvas and SVG chart types.
August 2021 (v6.02)
- The main reason for this release is the update of the Google Sheets connector. This was necessitated by the update of the Sheets API by Google from v3 to v4. If you use the connector to read your spreadsheets you will need to get an OAuth ID (details on the Google Sheets docs page) and adjust your code.
-
Like the Bar chart, the Horizontal Bar chart can now draw its bars with rounded corners.
There are two new properties for this (and their defaults) are:
corners
(square)cornersRoundRadius
10
-
Some pseudo-constants have been added to the miscellaneous documentation. These are simply a
few common arrays of information that may be useful to you (eg for labels on your charts).
The arrays are:
RGraph.MONTHS_SHORT = ['Jan', 'Feb', 'Mar', 'Apr', 'May', 'Jun', 'Jul', 'Aug', 'Sep', 'Oct', 'Nov', 'Dec']; RGraph.MONTHS_LONG = ['January', 'February', 'March', 'April', 'May', 'June', 'July', 'August', 'September', 'October', 'November', 'December']; RGraph.DAYS_SHORT = ['Mon', 'Tue', 'Wed', 'Thu', 'Fri', 'Sat', 'Sun']; RGraph.DAYS_LONG = ['Monday', 'Tuesday', 'Wednesday', 'Thursday', 'Friday', 'Saturday', 'Sunday']; RGraph.HOURS24 = ['00:00', '01:00', '02:00', '03:00', '04:00', '05:00', '06:00', '07:00', '08:00', '09:00', '10:00', '11:00', '12:00', '13:00', '14:00', '15:00', '16:00', '17:00', '18:00', '19:00', '20:00', '21:00', '22:00', '23:00']; RGraph.HOURS12 = ['00:00', '01:00', '02:00', '03:00', '04:00', '05:00', '06:00', '07:00', '08:00', '09:00', '10:00', '11:00'];
July 2021 (v6.01)
-
The
labelsInbar*
properties were added to the SVG Horizontal Bar and the canvas Horizontal Bar charts. -
The Bar chart has a new
corners
property. This can be set toround
if you want and you'll get rounded corners on the bars. There's also a newcornersRoundRadius
property that allows you to control the magnitude of the rounding effect. The default for this property is 10. -
The tooltips templates macro
%{group}
has been removed from the site. It's still supported, is working and I have no plans to remove it - however, the%{dataset}
is now the preferred macro to use. - Some of the demos have been brought up to better/more recent styles of coding.
-
The
colorsConnectors
property has been added to the canvas Waterfall chart. The SVG Waterfall chart already had acolorsConnector
property so this has been renamed tocolorsConnectors
(an s has been added on to the end). The former property name will still work though (for backwards-compatibility purposes). - The SVG Line chart now has support for rendering a trend line on your chart. This brings the total chart support for trend lines to: canvas Scatter/Line charts and SVG Scatter/Line charts. There's a demo of an SVG Line chart with a trend line in the demos which is in the download archive and you can see the documentation section on the SVG Line chart documentation page.
-
The
tickmarksColor
option has been added to the Line chart. So you could have a red line with black tickmarks for example. -
A new interesting Line chart demo has been added called
line-3d-effect.html
. As the name suggests this is a 3D Line chart, which has multiple datasets. It's not controlled by an option - ie it's not natively supported, but the code involved to produce the chart is not difficult (though there is a lot of it). You can find the demo in thedemos/
folder in the download archive. You can see a picture of it on the RGraph blog. -
A few pseudo-constants (they're really just variables) have been added to the core library:
RGraph.MONTHS_SHORT
([Jan, Feb, Mar, Apr, May, Jun, Jul, Aug, Sep, Oct, Nov, Dec])RGraph.MONTHS_LONG
([January, February, March, April, May, June, July, August, September, October, November, December])RGraph.DAYS_SHORT
([Mon, Tue, Wed, Thu, Fri, Sat, Sun])RGraph.DAYS_LONG
([Monday, Tuesday, Wednesday, Thursday, Friday, Saturday, Sunday])RGraph.HOURS24
([00:00, 01:00, 02:00, ..., 21:00, 22:00, 23:00])RGraph.HOURS12
([00:00, 01:00, 02:00, 03:00, 04:00, 05:00, 06:00, 07:00, 08:00, 09:00, 10:00, 11:00])
RGraph.common.core.js
file near the top. You could use them like this:new RGraph.Bar({ id: 'cvs', data: [4,8,6,5,3,2,5], options: { textAccessible: false, xaxisLabels: RGraph.DAYS_SHORT } }).draw();
- The canvas Line chart now (as well as the canvas Scatter chart) can draw a trend line for your data.
-
The Scatter chart now has an
explode
effect. With this effect, the marks on the chart explode outwards from a point on the chart (top-left, top-center, top-right, center-left, center-center, center-right, bottom-left, bottom-center or bottom-right). -
The RScatter chart now has an
explode
effect. With this effect, the marks on the chart explode outwards from the center of the chart.
April 2021 (v6.00)
- The RGraph source code is now available via GitHub so you can now browse the source code and, if the desire strikes you, fork it!
-
The
trendline
option has been added to the SVG Scatter chart. See the SVG Scatter chart documentation page for the applicable options. As a result of this addition, theoutofbounds
option default value has been changed fromfalse
totrue
. - The RGraph blog has been separated out into different pages for each year instead of being one huge page.
- From this major release features from JavaScript ES6 will start being used. This means that older browsers will no longer be supported. You can read the installation documentation for details on what browsers are now supported. If you want the last 5.xx release you can get that from the download page.
- Improvements have been made to the handling of Y-axis tickmarks on SVG charts. This means that you may notice that one or two tickmarks may disappear when you upgrade. Making the charts look better I hope you'll agree.
-
The SVG Activity meter has been added. This is just like the canvas-based version of it
and supports several useful API methods and the
grow
effect. It also supports interactive adjusting and can be configured with two quite different appearances along with tooltips and supports having multiple data points on the chart. Read the Activity meter API documentation page for more information. -
The SVG Segmented donut has been added. This is just like the canvas-based version of it
and supports the
grow
androundRobin
effects, interactive adjusting and has several useful API methods. Read the Segmented donut API documentation page for more information. -
The SVG Horseshoe meter has been added. This is just like the canvas-based version of it
and supports the
grow
effect, interactive adjusting and has several useful API methods. Read the Horseshoe meter API documentation page for more information. - Formatted labels have been added to both canvas and SVG charts. They're similar to formatted tooltips albeit with fewer options (because they're not HTML). You can read about them on the formatted labels documentation page. Note that even though this page is in the canvas section of the website it's still applicable to SVG charts.
-
The SVG Rose chart property
amargin
has been renamed tomarginInner
. You don't need to immediately change your code though as there's backwards-compatibility code that accounts for this change.
March 2021 (v5.28)
-
All of the canvas charts that can show a title have had the properties
titleOffsetx
andtitleOffsety
added. -
The Meter chart properties
labelsValuePoint
andlabelsValueThousand
have been added. -
The Meter chart properties
labelsValueText*
have changed tolabelsValue*
-
The Bipolar chart
colors
option has been changed - the colorsred
blue
andyellow
have been added to the start of thecolors
array. If you don't like this then you can set it back to the original colors array which is commented out in the source code. Simply open the Bipolar chart source file (RGraph.bipolar.js
) and uncomment thecolors
option which is commented out. Search for the following text in the file and remove the//
at the start of the line://colors:
-
A Bipolar chart tooltip positioning bug when the
textAccessible
feature is disabled and thevariant
is set to3d
has been resolved. The positioning of tooltips, in general, has been improved. -
A Horizontal Bar chart tooltip positioning bug when the
textAccessible
feature is disabled and thevariant
is set to3d
has been resolved. The positioning of tooltips, in general, has been improved. -
A Bar chart tooltip positioning bug when the
textAccessible
feature is disabled and thevariant
is set to3d
has been resolved. The positioning of tooltips, in general, has been improved. - The border color and the shadow for the annotating mini-palette have been tweaked ever-so-slightly.
-
The Pie chart variation - the Activity meter - has now been promoted to its own chart
type. The consequences of this are not large and it means a better
grow()
animation. You can view the full documentation page here. This chart type now also supports tooltips. -
The Pie chart variation - the Segmented donut chart - has now been promoted to its own chart
type. The consequences of this are not large and it means a better
grow()
animation. You can view the full documentation page here. -
The Pie chart variation - the Horseshoe meter - has now been promoted to its own chart type.
The consequences of this are not large and it means a better
grow()
animation. You can view the full documentation page here. - The SVG 3D Bar chart tooltips weren't taking into account the 3D effect when being positioned. This has been remedied and the tooltips for 3D charts look much better.
-
The property
xaxisLabelsClass
has been added to the canvas Bar, Line, Scatter, Gantt and Waterfall charts which allows you to add a CSS class to the tooltips. This property is calledyaxisLabelsClass
with the HBar chart andlabelsClass
for charts without axes (eg the Rose chart).
January 2021 (v5.27)
-
The
responsive()
function has been rewritten to use the standardwindow.matchMedia
API instead of thewindow.onresize
event. You can read more about this on the RGraph blog. This is a significant change to theresponsive()
function but the usage of the function has only changed marginally. Now you should list the screen size clauses from largest to smallest like this:
Otherwise, the usage of the function is no different..responsive([ {maxWidth: null,width:600,height:250,options:{marginInner: 10,textSize:12}}, {maxWidth: 800,width:400,height:200,options:{marginInner: 5,textSize:10}} ]);
-
In both the canvas and SVG libraries the
String.format()
function has been extended. Previously you could do this with the function:
And this:str = '{1} works as a {2}'; name = 'Richard'; occupation = 'web developer'; str.format(name, occupation);
Now though, as well as that, you can do this too:str = '%1 works as a %2.'; name = 'Richard'; occupation = 'web developer'; str = str.format(name, occupation)
occupation = 'web developer'; name = 'Richard'; str = '{name} works as a {occupation}'.format();
-
All of the libraries now accommodate having the data given to them as strings as well as real
JavaScript arrays. So RGraph now accommodates this type of thing:
You should of course give RGraph real JavaScript data structures (arrays containing numbers for example) - this is simply there for ease of use purposes.new RGraph.Bar({ id: 'cvs', data: '4,8,6,5,3,2,5', // Result: [4,8,6,5,3,2,5] // ['5','3','7','2','4'], // Result: [5,3,7,2,4] // ['4,8,6','4,5,2','4,8,6'], // Result: [[4,8,6],[4,5,2],[4,8,6]] options: { textAccessible: false } }).draw();
-
The Horizontal Bar chart now has a
tooltipsHotspotYonly
option so you can still get at tooltips when the value of a bar is zero. - The 3D Bar chart hotspots for tooltips are now drawn more accurately which makes clicking on the bars easier.
-
The CSV reader has had some aliases added to the
getCol()
andgetRow()
API functions. These are:csv.row(); csv.col(); csv.column(); csv.getColumn();
-
The
label
labelUnitsPre
labelUnitsPost
labelPoint
labelThousand
andlabelDecimals
properties were added to theHorseshoe Meter
. -
The
RGraph.redraw()
API function can now accept a canvas as the argument (as well as a color) to limit the clearing to a specific canvas tag. For example:RGraph.redraw(); // Pre-existing usage RGraph.redraw('red'); // Pre-existing usage RGraph.redraw(myCanvas); // New addition RGraph.redraw(myCanvas, 'red'); // New addition
- Fixed a bug with the Bar chart grow effect when supplying data to it. It wouldn't respect a maximum Y scale value that you had set.
-
The properties
tooltipsFormattedListType
andtooltipsFormattedListItems
have been added to both the canvas and SVG chart types (those that support tooltips). These two properties give you the ability to easily show HTML lists (either ordered or unordered) in your tooltips by using the%{list}
macro. There are demos available of charts that use lists in tooltips in the download archive.