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 the xaxis and yaxis properties instead. This will apply to other charts that use axes from the next release and also the y-axis.
• The tag that's used for the x-axis labels has changed from labels to xaxis.labels If you use this you'll need to update your code.
• The RGraph.path function can now be called using each objects path 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 old usage of the RGraph.path() function
  RGraph.path({
    object: bar,
      path: 'b r % % % % f %',
      args: [0,0,1000,1000,'gray']
  });
  
  // The updated, less verbose syntax
  bar.path(
      'b r % % % % f %',
      120, 10, 100, 100, 'green'
  );
  

• The Pie chart and the Rose chart shape object index names have been changed: angle.start is now angleStart, angle.end is now angleEnd, radius.start is now radiusStart and radius.end is now radiusEnd. 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 and RGraph.strokedCurvyRect functions have been renamed to RGraph.roundedRect. To use this function you need to do the fill and/or stroke yourself like this:

  context.beginPath();
  context.strokeStyle = 'red';
  context.fillStyle   = 'black';
  RGraph.roundedRect(
      context,
      50,
      50,
      100,
      100,
      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 to RGraph.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
  The subindex property has been removed - the equivalent now is the index property, whilst the dataset 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 the group)
  • group (same as the dataset)
  • 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 objects getShape functions (all of them) have been adjusted. The indexes returned in the objects are now:
  • index
  • dataset
  • sequentialIndex
  Be cautious about upgrading especially if you use dynamic features!
• The Activity meter has been added and resides in the RGraph.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 relevant sequentialIndex instead of the index.
• 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 be rgraph_* (eg rgraph_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, the Bar 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's javascript console ie console.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 called RGraph.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 and RGraph.SVG.OR.clear. The RGraph.SVG.clear function can now take a string as well as the SVG tag:
  • RGraph.SVG.clear() Clear all of the registered SVG tags that are on the page.
  • RGraph.SVG.clear(id) Clear the SVG tag that has the given ID (the ID is the ID that you add to the div tag).
  • RGraph.SVG.clear(svg) Clear the given SVG tag (a dom node).
  • RGraph.SVG.reset() Reset all of the registered SVG tags that are on the page.
  • RGraph.SVG.reset(id) Reset the SVG tag that has the given ID (the ID is the ID that you add to the div tag).
  • RGraph.SVG.reset(svg) Reset the given SVG tag (a dom 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 the Bar chart Horizontal Bar chart Line chart Scatter chart and Waterfall chart can now all have the y-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 the canvas and SVG charts. This makes building responsive 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 called line-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 the RGraph.getScale and the RGraph.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 to marginLeft: 25
  • The set methods have been updated and the older compatibility code removed. The set 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, the get 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's obj.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 now RGraph
    • ca is now canvas
    • co is now context
    • pa2 is now path
    • win is now window
    • doc is now document
    • prop is still used and refers to the obj.properties variable
• CSS classes have been added to the text that the canvas charts use. Of course, this only happens if you're using accessible text. The classes are added to the span tags that RGraph adds. These classes are:
  • rgraph_accessible_text
  • rgraph_accessible_text_cvs (the canvas 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 be true by default, the tickmarks property has been changed to be false by default and the tickmarksHighlighted property has changed to be true 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 the RGraph.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 the SVG 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 the Pie 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 format 2012-12-31T20:23:56
• Added xaxisLabelsAngle to the drawing api x-axis object for both labels and scales.
• Added the Drawing API X-axis xaxisLabelsOffsetx and xaxisLabelsOffsety properties.
• Added the Drawing API Y-axis yaxisLabelsOffsetx and yaxisLabelsOffsety properties.
• Added two needleHead* properties to the Meter chart that will help you control the appearance of the needle head: needleHeadWidth and needleHeadLength
• 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 the canvas RGraph.text.defaults object described below but applies to RGraph.SVG.text function.
• Added the RGraph.text.defaults object. With this, you can set default values that are then used by the RGraph.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 the RGraph.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 classic C function printf. 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 the linewidth is greater than one. This means that the strokes will appear above any fill color. This has been changed for regular, stacked and non-equi-angular variations of the chart.

May 2019 (v5.01)

• The hmargin property has been changed across all libraries to marginInner. As well as this the hmarginGrouped property has been changed to marginInnerGrouped. 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 the Bar chart has been updated to better respect the marginInner setting. There are two examples of this type of Bar 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 - the y-axis was missing a tickmark where it joined on to the x-axis.
• Both the canvas and SVG 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 stacked Bar 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 the SVG 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 the RGraph.common.core.js file and has been renamed to RGraph.parseDateOld If, for some reason, you want this older version instead of the newer version you should be able to just change RG.parseDateOld = to RG.parseDate =
• I've added the exec function to chart types that it was missing from (eg Scatter, 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 to xaxisLabelsAngle. 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 style RGraph.numberFormat function.
• Fixed an "off by one" error in the Waterfall grow animation effect. This was only noticeable if you used the labelsAbove 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 the SVG 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 the api documentation ( SVG and canvas ) to see the changes. The api 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 and labelsAbove 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 the svg-hbar-blocky.html demo in the download archive.
• The SVG Rose chart angles and angles2 arrays no longer contain the details of the segments. Instead, they contain a reference to the SVG path element that is the segment. This SVG element has data attributes set on it that can give you the necessary details of the segment. Eg Each segment has a data-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 properties marginInnerLeft and marginInnerRight
• Added a callback option to the RGraph.SVG.text.find function. This callback function is passed an object which has a nodes 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 (the SVG documentation). The canvas version of this function is called RGraph.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-hand labelsAbove labels wasn't being respected.
• The Line chart default for the labelsAboveBorder property has changed to false
• The Line chart default for the labelsAboveBackground has changed to rgba(255,255,255,0.7)
• The default padding for dom text has been set to 1px instead of 2px.
• The Pie chart option labelsSticksUsecolors has been removed.

You can download RGraph here