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 the labelsAbove labels do). You can read the documentation for them on the Line chart API documentation page (scroll down to the labelsAngled 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 default colorsStroke 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 for backgroundFill.
• 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 the scaleLabelsOffsety properties.
  • The labelsCenterSpecific and labelsCenterIndex properties have been added.
  • More default colors have been added.
  • Default values for various tooltip properties have been added.
  • The radius, centerx and centery 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 and labelsMax properties have been added that allow you to enable or disable the min/max labels.
  • The radius, centerx and centery properties can now be strings so that you can adjust the radius as required (eg '+20' or '-15').
• 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 and none 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 be labelsComplete. If you still use the older labelsPercent 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 to slide. 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 the tooltipsEffect property to slide (you'll also want to set the tooltipsEvent property to mousemove) - but be warned that it hasn't been tested beyond the demos/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 and row 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 the getRow or getCol functions you can change them to the newer row and column 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 vs RGraph.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 and linejoin properties added. These can be arrays or strings. They both default to round
• 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 with nullBridgeLinewidth nullBridgeColors and nullBridgeDashArray). By default when you have null 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 the tooltipsHotspotSize property to control the size of the adjusting hotspot.
• The positioning code for the tooltips has been adjusted. It now uses the standard API method Node.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
  The Horizontal Bar chart documentation page shows this new option on the example chart.
• 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 to round if you want and you'll get rounded corners on the bars. There's also a new cornersRoundRadius 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 a colorsConnector property so this has been renamed to colorsConnectors (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 the demos/ 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])
  They're all pretty self-explanatory but if you want to see or alter them then they're located in the 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: {
          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, the outofbounds option default value has been changed from false to true.
• 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 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 version of it and supports the grow and roundRobin 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 to marginInner. 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 and titleOffsety added.
• The Meter chart properties labelsValuePoint and labelsValueThousand have been added.
• The Meter chart properties labelsValueText* have changed to labelsValue*
• The Bipolar chart colors option has been changed - the colors red blue and yellow have been added to the start of the colors 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 the colors 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 the variant is set to 3d 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 the variant is set to 3d 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 the variant is set to 3d 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 called yaxisLabelsClass with the HBar chart and labelsClass for charts without axes (eg the Rose chart).

January 2021 (v5.27)

• The responsive function has been rewritten to use the standard window.matchMedia API instead of the window.onresize event. You can read more about this on the RGraph blog. This is a significant change to the responsive 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:

  .responsive([
      {maxWidth: null,width:600,height:250,options:{marginInner: 10,textSize:12}},
      {maxWidth: 800,width:400,height:200,options:{marginInner: 5,textSize:10}}
  ]);

  Otherwise, the usage of the function is no different.
• In both the canvas and SVG libraries the String.format function has been extended. Previously you could do this with the function:

  str        = '{1} works as a {2}';
  name       = 'Richard';
  occupation = 'web developer';
  
  str.format(name, occupation);
  

  And this:

  str        = '%1 works as a %2.';
  name       = 'Richard';
  occupation = 'web developer';
  
  str = str.format(name, occupation)
  

  Now though, as well as that, you can do this too:

  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:

  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: {
      }
  }).draw();

  You should of course give RGraph real JavaScript data structures (arrays containing numbers for example) - this is simply there for ease of use purposes.
• 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 and getRow API functions. These are:

  csv.row();
  csv.col();
  csv.column();
  csv.getColumn();
  

• The label labelUnitsPre labelUnitsPost labelPoint labelThousand and labelDecimals properties were added to the Horseshoe 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 and tooltipsFormattedListItems 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.

You can download RGraph here