Release notes for 2023

• February 2023 (v6.11)
• January 2023 (v6.10)

February 2023 (v6.11)

• There's a new API function: RGraph.runOnce which takes two arguments: a unique ID for the function (which can be any piece of text) and the function to run.
• When drawing ingraph labels on the Pie chart you can now access a new property: labelsIngraphUndrawn which contains the indexes of labels which weren't drawn (because there wasn't sufficient space in the segment). Each entry in this array is an object with two keys: index and text. There's also a new property called labelsIngraphUndrawnAsLabels which will add labels for the elements which aren't drawn.
• The labelsOffsetRadius property is now called labelsRadiusOffset. You don't need to update your code immediately because the name change is accommodated for.
• The canvas Pie chart labelsIngraph labels no longer overlap into other segments (and if they would have they're not drawn). If the labels are too big to fit into the relevant segment the key here is to lower the size of the font (the labelsIngraphSize property). Also, increasing the radius at which the labels are drawn (with the labelsIngraphRadius property - for example setting it to 0.75 can be good in some circumstances) can prove to be beneficial.
• The canvas Pie chart has a new property: labelsIngraphRadiusOffset If you're using the labelsIngraphRadius property to set the position of the labels you can add a pixel offset to them by using this property (it can be positive or negative).
• The canvas Scatter chart can now accept objects as well as arrays for the individual points - just like the SVG Scatter chart. So currently your Scatter chart data arrays look like this:

  // Single dataset array
  data: [
      [100, 46, 'red',    'Freds result'],
      [156, 79, 'blue',   'Barneys result'],
      [123, 56, 'green',  'Wilmas result'],
      [110, 46, 'black',  'Bettys result'],
      [123, 23, 'yellow', 'Pebbles result']
  ]
  
  // Multiple dataset array
  data: [
      [
          [100, 46, 'red',   'Freds result'],
          [156, 79, 'blue',  'Barneys result'],
          [123, 56, 'green', 'Wilmas result'],
          [110, 46, 'black', 'Bettys result'],
          [123, 23, 'yellow','Pebbles result']
      ],
      [
          [10, 46, 'red',   'Freds result'],
          [15, 79, 'blue',  'Barneys result'],
          [12, 56, 'green', 'Wilmas result'],
          [11, 46, 'black', 'Bettys result'],
          [12, 23, 'yellow','Pebbles result']
      ]
  ]

  But from this new version you can also define them like this - which is little bit clearer:

  // Single dataset array
  data: [
      {x: 100, y: 46, color: 'red',    tooltip: 'Freds result'},
      {x: 156, y: 79, color: 'blue',   tooltip: 'Barneys result'},
      {x: 123, y: 56, color: 'green',  tooltip: 'Wilmas result'},
      {x: 110, y: 46, color: 'black',  tooltip: 'Bettys result'},
      {x: 123, y: 23, color: 'yellow', tooltip: 'Pebbles result'}
  ]
  
  // Multiple dataset array
  data: [
      [
          {x: 100, y: 46, color: 'red',    tooltip: 'Freds result'},
          {x: 156, y: 79, color: 'blue',   tooltip: 'Barneys result'},
          {x: 123, y: 56, color: 'green',  tooltip: 'Wilmas result'},
          {x: 110, y: 46, color: 'black',  tooltip: 'Bettys result'},
          {x: 123, y: 23, color: 'yellow', tooltip: 'Pebbles result'}
      ],
      [
          {x: 10, y: 46, color: 'red',    tooltip: 'Freds result'},
          {x: 15, y: 79, color: 'blue',   tooltip: 'Barneys result'},
          {x: 12, y: 56, color: 'green',  tooltip: 'Wilmas result'},
          {x: 11, y: 46, color: 'black',  tooltip: 'Bettys result'},
          {x: 12, y: 23, color: 'yellow', tooltip: 'Pebbles result'}
      ]
  ]

• The canvas Pie chart has a new, simple effect - roundRobinSequential It looks similar to the roundRobin effect but is, in effect, a circular cover over the Pie chart that gradually reduces in size revealing the Pie. There's a demo of it in the download archive.
• For this release the title code has been rewritten - so check your charts and ensure that they appear OK if you upgrade. It should be noted that the X/Y positioning now follows the same direction as the canvas coordinate system - so zero is at the top-left and increases as you go down and to the right of the canvas. Offsetting follows a similar coordinate system - so positive offset values move the title to the right and down whilst negative values move the title up and to the left.
• The canvas Scatter chart has new properties: colorsBubbleStroke bubbleLinewidth bubbleShadow bubbleshadowColor bubbleShadowBlur bubbleShadowOffsetx bubbleShadowOffsety. As the names suggest, the colorsBubbleStroke property allows you to give the bubbles on a bubble chart a stroke color. It defaults to null (ie there is no stroke). The bubbleLinewidth property controls the linewidth of that property. This defaults to 1. And the shadow properties control the shadow that each bubble has.
• This probably won't affect you - but the canvas Line chart has a new internal variable: obj.unmodified_data This variable does what the obj.original_data was supposed to do but this variable has been used in some effects (eg the wave effect. So the obj.unmodified_data is just that - a copy of the original, unmodified data.

January 2023 (v6.10)

• A reminder that, if you want to (hint hint...), you can review RGraph on Google
• The title option has had a little massaging for this release so check that your charts are appearing correctly. Both the title and the subtitle should be strings. For the v6.11 release the code that draws the title and subtitle will likely be rewritten to update it to current standards.
• Prior to this release the svg Bipolar didn't draw shadows 100% correctly when animating stacked charts. This has now been corrected and the shadows grow along with the bars. This was evident in the wave effect.
• When using the RGraph.clipTo() function (read about this function in the API documentation) with the tophalf bottomhalf lefthalf and righthalf options they clip to exactly half the canvas without taking into account the margins that you've set. This might not be what you want so to remedy this there are now new options available to you when using this function to clip the canvas:
  • tophalf.margins
  • bottomhalf.margins
  • lefthalf.margins
  • righthalf.margins
• svg chart types that allow the setting of shadows have had the shadowOpacity option removed and the shadowColor property added in its place. This affects the following svg chart types: Bar, Bipolar, HBar, Line, Pie, Radar and Waterfall.
• The keyPositionMarginHSpace property has been added - it allows you to space out the key items when the key is in margin mode.
• The horizontalLines property has been added to the Bar, Line, Scatter, svg Bar, svg Line and svg Scatter charts. As the name suggests - this allows you to easily add horizontal lines to your charts - in particular it's an easy way to add an average value indicator line. There are demos showing this feature in the download archive called
  • bar-average.html
  • line-average.html
  • scatter-average.html
  • svg-bar-average.html
  • svg-line-average.html
  • svg-scatter-average.html
• The Line chart backgroundHbars property can now take an RGraph gradient string (eg Gradient(red:white)) as the color.
• Corrected a small bug that prevented the linedash being set with the RGraph.path function.
• I thought I would share this snippet of CSS with you that I've recently added to the RGraph website that adds the little grey icon after external links. Previously this was done with some non-trivial JavaScript but after watching a recent Youtube video I found this snippet which does the same but with a much smaller amount of CSS. Compared to the JavaScript it's simpler, smaller and doesn't require any changes to the HTML. There's a blog article that goes into more detail about this here.

  <style>
      a[rel*="external"]::after {
          content: url('/images/external-link.png');
          padding-left: 5px;
      }
  </style>
  

• The canvas charts have all had the titleSubtitle* options added to them. This brings them inline with the svg charts. In the process of doing this some of the default values for the Gauge chart have been updated - so if you use this chart you should check your gauges if you upgrade.
• A fair amount of changes have been done to the website - practically all of the canvas examples and demo pages have been converted to images. You can still see the canvas demo pages by viewing the bare-bones examples as these are not indexed by search engines. This was for SEO purposes and appears to be having a significantly positive effect. The demos/ are still bundled with the download archive.
• The svg charts have each had an obj.create(tag[, parent[, style]]) function added that allows you to now do this:

  var rect = obj.create(
      'rect,x=10,y=10,width=100,height=100,stroke=black,fill=red', // Tag name and attributes
      parentNode,                                                  // Optional and can also be the style to apply if you wish
      'border=1px solid gray'                                      // Optional and can also be the parent node to append to
  );
  

  Compared to the equivalent create function that's currently used:

  var rect = RGraph.SVG.create({
      svg: this.svg,
      type: 'rect',
      parent: parentNode,
      attr: {
          x:      10,
          y:      10,
          width:  100,
          height: 100,
          stroke: 'black',
          fill:   'red'
      },
      style: {
          border: '1px solid gray'
      }
  });
  

  Much more concise I think you'll agree - but this change probably won't impact you a deal unless you happen to delve into the internals of RGraph and do your own drawing with the svg charts.
• The "one-touch adjusting" HOWTO document has been updated as a result of the two new Line chart methods (mentioned below). You can see this HOWTO document here.
• The Line chart has a new method: obj.closest which, as the name suggests, returns the indexes (an object with dataset and index indices) of the closest point (based on the event object coordinates). This was originally a function in one of the demos (in the download archive) but has now been moved to be a method on the Line chart object.

You can download RGraph here