Release notes for 2024

The release notes and information regarding upgrades that you should read for the 2024 releases. You should read this when you're upgrading from an older version of RGraph to a newer one in case something that affects you has changed.

December 2024 (v6.20)
September 2024 (v6.19)
June 2024 (v6.18)
March 2024 (v6.17)
January 2024 (v6.16)

December 2024 (v6.20)

Legacy code that supported old versions of Internet Explorer has been removed from the RGraph.common.contextmenu.js library.
Fixed a bug with date/time Scatter charts where the first label wasn't being shown correctly.
Fixed a bug in the Pie chart which meant that tooltips weren't being shown when there was only a single value in your dataset.
The Modal Dialog has been updated so that when you open the dialog the page scrollbars are disabled and you cannot scroll the document behind the background <div>
Added the yaxisTickmarksCount to the Bipolar chartand renamed the xaxisLabelsPositionEdgeTickmarksCount property to xaxisTickmarksCount
The SVG Bar chart Horizontal Bar chart and Bipolar chart have had their highlighting updated so that it's no longer drawn above the relevant axis.
Added the Radar chart wave effect.
Fixed a few Radar chart bugs when using animations.
Added the Line chart grow effect.
The Line chart unfoldfromcentertrace is now cancelable.
Added the tooltipsPersistent property to all canvas and SVG chart types that support tooltips. This property, when true, will mean that tooltips stay on the screen after they've been shown and don't disappear when a click happens. There's an api function: RGraph.tooltip.persistent.clear and RGraph.SVG.tooltip.persistent.clear that you can use to clear all of the persistent tooltips if you wish.

September 2024 (v6.19)

The canvas Bar chart, the Horizontal Bar chart and the Bipolar chart have been updated so that the highlighting, when viewing a tooltip, doesn't cover the x axis or y axis.

New options have been added to the Modal Dialog. There are zoom controls which allow you to control the extent of the new zoom-in and zoom-out effects (or disable them completely) an option that allows you to click the background to hide the dialog, an option to allow the hiding of the decorative top bar, options that allow you to give CSS information to the dialog instead of it being seperated out in a CSS file and an option that allows you to give the timeout used to remove the dialog from the dom when it's hidden. The zoom factor properties are both 0 by default, the style options are empty objects by default and the other options are true by default (and the removeFromDom value is 500 milliseconds). The following code shows you how to add these options to your configuration (before the dialog is shown).

...
contextmenu: [
    [
        'Login to admin area...',
        function ()
        {
            //
            // The new options and their defaults. The .set()
            // method is one way of giving the options.
            //
            // ModalDialog.set('zoomFactorStart', 0);
            // ModalDialog.set('zoomFactorEnd', 0);
            // ModalDialog.set('styleBackground', {});
            // ModalDialog.set('styleTopbar', {});
            // ModalDialog.set('styleDialog', {});
            // ModalDialog.set('hideOnBackground', true);
            // ModalDialog.set('topbar', true);
            // ModalDialog.set('removeFromDOMTimeout', 500);

            // Show the dialog, passing it the ID of the dialog
            // DIV tag and the desired width of the resulting
            // dialog. To set options you can either use the
            // set() method (as shown above) or you can pass
            // an object to the show() method like this:
            ModalDialog.show({
                id: 'myDialog',
                width: 280,
                zoomFactorStart:      0,
                zoomFactorEnd:        0,
                styleBackground:      {},
                styleTopbar:          {},
                styleDialog:          {},
                topbar:               true,
                hideOnBackground:     true,
                removeFromDOMTimeout: 500
                
            });
        }
    ]
]
...

The SVG SemiCircularProgress chart grow effect now works correctly when changing the value (ie it doesn't always animate from zero). The grow effect has also been added to the Gauge chart which was missing it entirely. Previously the effect on the SemiCircular Progress chart animated from zero every time - even if you were already showing a value.
Similarly to the canvas obj.animate function, the SVG charts also now have an animate function which can be used to animate the numeric RGraph properties. You can read the documentation for this function in the SVG documentation: Animating properties with the animate function
From now on more example charts will be added to the RGraph documentation pages.
Added the RGraph.SVG.drawImage function that makes it easy to add images to your chart. There's a documentation page for the function here.
Added better support for the event.offsetX and the event.offsetY coordinates (assuming that they're available).
Added a zoom feature to the SVG charts. with this you can select an area of your chart to zoom in on and then, when zoomed, drag the zoom if you wish to to pan around. There won't be a whole lot of use-cases for this but it's there if you want to use it.
Both the blog and forum RSS feeds are now styled to look nicer.

June 2024 (v6.18)

Added the verticalLines property to both the canvas and SVG Horizontal Bar charts. This property is documented on the canvas Horizontal Bar chart API documentation page and SVG Horizontal Bar chart API documentation page
The text on the SVG charts can now be links. This includes the majority of the text including labels, titles, key, custom text etc - but not the scales. There are new properties available to all charts to allow you to configure the appearance of these links: textLinkColor (blue) textLinkFont (null) textLinkSize (null) textLinkBold (null) textLinkItalic (null)
Added the labelsOffsetAngle property to the canvas Rose chart.
Added the RGraph.Line.dualColorTrendline RGraph.Scatter.dualColorTrendline RGraph.SVG.Line.dualColorTrendline RGraph.SVG.Scatter.dualColorTrendline shortcut functions that make creating dual color Line charts or dual color Scatter charts easier. There are demos of doing so in the demos directory of the download archive called line-trendline-dual-color.html scatter-trendline.html svg-line-trendline-dual-color.html and svg-scatter-trendline-dual-color.html
The SVG Scatter chart has had reference issues with the data resolved. Please contact me via the support forum if you come across any issues.
The coordinates of the trendline on both the canvas and SVG Line chart and Scatter chart are now tracked in the obj.coordsTrendline variable. Multiple trendlines are accounted for so the start and end X/Y coordinates for the first trendline are located in obj.coordsTrendline[0], the second set are in obj.coordsTrendline[1] and so on.
The last function that was added to the Array prototype has been removed. An easy way to get the last element of an array is to use the at function like this: myArray.at(-1)
Added an RGraph.isNullish function which not only checks for null but also checks for undefined as well. All of the libraries have been converted to use this new function.
Added the anglesOffset property to the canvas Rose chart There's a new demo called rose-rotating.html that shows this and the below property.
Added the labelsOffsetAngle property to the canvas Rose chart
Added the labelsAxesBackground property to the Rose chart
With the Horizontal Progress bar, the default backgroundColor value has been changed to #eee
With the Vertical Progress bar, the default backgroundColor value has been changed to #eee
The RGraph.arrayClone function has been improved to better accommodate certain values. It has been changed from using the JSON.parse(JSON.stringify()) method to using a loop and checking the types of the array elements.
The Pie chart now has a nice new wave effect. Similar to the roundRobin effect this effect gradually increases the size of the radius of each segment independently but does not change the angles used by the segments. There's a demo in the download archive called demos/effect-pie-wave.html
When a Bubble chart is being shown if a bubble is on the edge of the chart the whole bubble now correctly activates a tooltip (should one be being shown).
Bubble chart data can now be given as both a multi-dimension array as well as a flat array. This accommodates multiple datasets.
Bubble charts now accommodate multiple datasets (this is somewhat related to the previous item.
When you're showing a Bubble chart with the SVG Scatter chart you can now add a drop-shadow effect to the bubbles. There are five extra properties available to you to control the shadow. Also, the Bubble chart tooltip hotspots now cover the entire bubble and the highlight does too. This change to the hotspots and highlighting also applies to the canvas Scatter chart as well.
There's now a wave effect for both the canvas and SVG Rose charts.
The coordinates variables that each chart object mantains are now documented on the respective charts documentation page.
The coordsSpline variable on the Horizontal Bar chart object that gets populated with the coordinates of the Vertical Spline has been updated. It's now a dimension less than it was previously. This means that:
- obj.coordsSpline is the variable that holds all the coordinates of all the lines (though only one is permitted).
- obj.coordsSpline[0] is the variable that holds the coordinates of all the points on the first line (again, there's only one line permitted).
- obj.coordsSpline[0][0] is the variable that holds the xy coordinates of the first point on the line.
- obj.coordsSpline[0][0][0] is the variable that holds the x coordinate of the first point on the line.
- obj.coordsSpline[0][0][1] is the variable that holds the y coordinate of the first point on the line.
RGraph.tooltips.css has been removed. Use the (documented) RGraph.tooltips.style instead.
Added the tooltipsHotspotShape property to the Horizontal Bar chart in order to help facilitate tooltips for Vertical Line charts. This property can be rect (the default) or point (when you're showing a Vertical Line chart).
The Horizontal Bar chart coordinates (obj.coords) no longer have negative values. Where the width was negative, the X coordinate is moved to the left and the width is now positive.
Made a small fix to Vertical Spline charts where the last little section of the line wasn't being drawn.
The first and last bars (if the total bar is being shown) of an SVG Waterfall chart are now added to a group that appears in the code before the x-axis. They therefore appear on screen behind the x-axis. Subsequent bars appear above the x-axis.
A late addition to the list of changes - the tooltips pointer has had its' id changed from RGraph_tooltipsPointer to RGraph_tooltipsPointer_[canvas ID] This does mean that you will probably have to change your CSS selector if you alter the CSS of the pointer. If you use <div> tags in your tooltip(s) then you can do this to select the pointer:
```
<style>
    div.RGraph_tooltip div[id^=RGraph_tooltipsPointer] {
        background-color: red !important;
    }
</style>
```
Or if you don't use <div> tags in your tooltips you don't need to use the regex selector:
```
<style>
    div.RGraph_tooltip div {
        background-color: red !important;
    }
</style>
```

March 2024 (v6.17)

The SVG Funnel chart background bars are now child elements of the svgAllGroup instead of the first background group.
Added the Funnel chart grow effect.
The Radar chart highlights* properties have had their names changed to tickmarks*
The Radar chart default appearance has been tweaked: The colors have been changed (black for the stroke color with a slight red fill, the linewidth has been set to 2, tickmarks have been enabled
A new option - clip - has been added to all of the SVG and canvas charts. This allows you to (much) more easily generate multi-color charts like demos/svg-line-clipped.html or demos/svg-line-clipped2.html (which you can find in the download archive). This new option also facilitates the use of all of the available chart types. You can read more information about it on the clipping documentation page. This information applies to both the SVG and canvas charts.
The SVG Line chart property tooltipsHotspotSize has been added which controls the size of the hotspots that trigger tooltips. It defaults to 5
Thanks to jo for supplying a fix that will make charts that use the background drawing common code faster. You may only notice the difference when you have lots of data or many datasets though.
Added the SVG Waterfall chart grow effect.
Clarified the centerx centery and radius properties in the SVG documentation in that they can be either numeric (ie exact values) or strings like this: centerx: '+5' or this: centerx: '-25' and added this capability to the canvas meters and charts that are circular.
Fixed a small bug with the SVG Rose chart and the SVG Gauge chart where the centerx and centery properties did each others job.

January 2024 (v6.16)

The RGraph property names (for example marginLeft, backgroundGrid or tooltips) can now be specified in any case you choose. So the following are all equal: marginLeft marginleft MARGINLEFT mArGinLeFT All of the libraries have been updated with this change.
Fixed a bug with spline Vertical Line charts where they weren't drawing the last little section of the Line.
The RGraph license has been updated. From version 6.16 onwards RGraph will be dual-licensed GPL and an inexpensive commercial license that you can use if you don't want to be subject to the GPL. You can read more about RGraph licensing on the license page. This release is focused mainly on this license change - you can see prior release notes via the past release notes section

You can download RGraph here