Release notes for 2023

• July 2023 (v6.13)
• April 2023 (v6.12)
• February 2023 (v6.11)
• January 2023 (v6.10)

July 2023 (v6.13)

• The svg Scatter chart now has a trace effect just like the Line chart. This may look strange when you're using the Scatter chart to produce a Vertical Line chart as it always animates from left to right. However, when you're producing a Vertical Line chart then you may want to instead look at using the Horizontal Bar chart. You can read the relevant properties on the SVG Horizontal Bar chart API documentation page and there's a blog article (with an example) about producing a Vertical Line chart here.
• Fixed a missing background grid line in the canvas Horizontal Bar chart which became apparent when the X-axis was turned off.
• A significant change to the way that you specify the responsive clauses on your chart (though this change doesn't at all mean that you have to alter all of your charts). The change is how you specify the responsive clauses when you define your chart - you can now put them in the main configuration of the chart instead of calling the responsive function after you call the draw function. The code shown below highlights the new way that you can put the responsive clauses.

  <script>
      new RGraph.Bar({
          id: 'cvs',
          data: [12,18,10,9,6,20,18],
          options: {
              yaxisScaleUnitsPost: 'k',
              colors: ['red'],
              title: 'A basic responsive Bar chart',
              titleBold: true,
              xaxis: false,
              yaxis: false,
              marginLeft: 50,
              marginBottom: 50,
  
              //
              // The new way of specifying your responsive clauses
              //
              responsive: [
                  {maxWidth: 900,  width: 400, height: 150, options: {textSize:10, xaxisLabels: ['Mon\n(yuck!)','Tue','Wed','Thu','Fri\n(woo!)','Sat','Sun'], marginInner: 10}},
                  {maxWidth: null, width: 750, height: 250, options: {textSize:14, xaxisLabels: ['Monday\n(yuck!)','Tuesday','Wednesday','Thursday','Friday\n(woo!)','Saturday','Sunday'], marginInner: 20}}
              ]
          }
      }).draw();
  </script>

  This change isn't at all mandatory - you can still use the existing method if you prefer - it's your choice!
• The svg Gauge chart now has a simple background grid effect (just some lines that emanate from the center out to the edge.) You can disable it if you want to and also stipulate the color.
• The canvas Line chart trendline now animates as well as the line if you use the trace animation effect.
• The reponsive function had a small bug in it that prevented the setting of new colors in an updated configuration. This has been fixed.
• The Bar chart labelsAbove property, for some time now, has not been showing decimals correctly. This has now been remedied so that what you specify with the property labelsAboveDecimals will be what you see. The positioning of the labels has also been slightly adjusted - so you might need to reduce or remove entirely any labelsAboveOffsety that you may have set.
• A new color macro has been added to formatted tooltips:
  • %{color:red}
  • %{color:%{property:myColor}}
  • %{color:%{property:colors[%{dataset}]}}
  • %{color:%{property:colors [%{index}]}}
  This new macro allows you to add a small square of color, like in the key, which allows you to create your own, custom key.
• The Horizontal Bar chart has been able to have rounded ends for some time - however, the feature only worked when you had a regular chart with the y-axis on the left-hand-side. Now, however, you can have rounded ends to your bars regardless of where the y-axis is or whether you have a regular, stacked or grouped chart.
• You can currently have rounded corners on your Bar chart by setting the corners property to round - you can now control whether the left and right corners are rounded individually with the cornersRoundLeft and cornersRoundRight properties. You can also set the radius of the corners individually as well with the cornersRoundLeftRadius and cornersRoundRightRadius properties.
• A new feature has come to the canvas Scatter chart - the lasso options. These options, when enabled, allow you to draw rectangles around some (or all) of the points on your chart. A callback function is then called which is passed a list of the selected dataset and index numbers which you can use to integrate into your own code. The feature is mentioned in the documentation page here and the API documentation for the Lasso feature is here. It can also make use of the window.localStorage variable to enable easy persistence across page refreshes.
• Added the highlightDatasetEvent property to the canvas Line chart which defaults to click. You can set this to mousemove to change the event that highlights the relevant dataset.
• Added the missing annotating properties to the canvas Gauge chart documentation
• Added the Semi-circular Progress bar property backgroundBackdrop
• The RGraph.common.core.js library now contains a new function: RGraph.arrayRemoveNull This function does what the name suggests and when you pass it an array the null values in the array will be removed. By default, objects aren't touched however if you give an object as the second argument which has the key objects (for example RGraph.arrayRemoveNull(myArray, {objects: true})) then null values will be removed from objects too. If you give a value parameter to the options array null values will NOT be removed, but substituted with that value instead. You can see the API docs for the RGraph.arrayRemoveNull function here.
• The canvas Pie chart now has a new set of labelsInside properties for use when you're showing a Donut chart. These properties allow you to show labels inside the Donut ring - instead of traditional labels which are placed around the outside of the Donut.

April 2023 (v6.12)

• The svg Semi-circular Progress bar now has an adjustable option. There's a demo in the download archive called svg-scp-adjustable.html that demonstrates this.
• There's now a better way to produce Vertical Line charts. Previously these were achieved by using the Scatter chart and adjusting the data so that a vertical line was produced. Now, however, you can use the Horizontal Bar charts to get a vertical line in a simpler way. There are four demos in the download archive that show it - two for canvas and two for svg - called:
  • hbar-vertical-line.html
  • hbar-vertical-line-multiple.html
  • svg-hbar-vertical-line.html
  • svg-hbar-vertical-line-multiple.html
  Here's some canvas example source code that shows you how you can produce a Vertical Line chart.

  new RGraph.HBar({
      id: 'cvs',
      data: [4,5,7,4,2,4,6,8,6,5],
      options: {
          backgroundGridHlines: false,
          backgroundGridBorder: false,
          xaxis: false,
          yaxis: false,
          colors: ['transparent'],
          yaxisLabels: [
              'John','Fredericko','Bono','Lucy','Charles',
              'Peter','Brian','Jilly','Peter','Lucy'
          ],
          textSize: 18,
          title: 'A vertical line chart',
          marginTop: 50,
          
          line: true,
          lineLinewidth:                    10,
          lineTickmarksStyle:             'circle',
          lineTickmarksSize:              8
      }
  }).trace();
                  

• The Line chart tooltipsDataset option has been updated to make use of the new obj.over and obj.highlightDataset functions. It now works better with filled charts.
• The Line chart has two new methods: obj.over(x, y) and obj.highlightDataset(options). These methods help you to identify the dataset thats being hovered over (if any) and subsequently highlight it. These functions can be used to programmatically highlight a dataset using other controls or processes on the page. There's also a new set of properties - the highlightDataset properties which make doing this a breeze and makes it vey familiar if you're already comfortable with how RGraph charts are configured. There are new demos that show the new dataset highlighting and a few updated ones too (see the API documentation for their names).
• The Odometer now supports multiple values for each of the needle properties - corresponding to multiple needles if you have them. The properties are: needleWidth needleLength needleColor needleHead needleTail needleType and needleTriangleBorder Because of this update the needleExtra option has been removed and now you specify multiple values with the value: option to the object like this:

  new RGraph.Odometer({
      id: 'cvs',
      min: 0,
      max: 100,
      
      // Specify two values to be indicated on the chart
      value: [13,25],
      
      options: {
      }
  }).draw();
  

• When the RScatter chart highlights a point on the chart (for example because of tooltips), the highlighting now covers the whole point instead of just the center.
• The Pie chart labelsIngraph option now has the ability to check to see if a label will fit inside the relevant section. If not, then the label can be omitted or it can be drawn as a regular label that's placed outside of the Pie chart. The undrawn labels are added to the labelsIngraphUndrawn property
• The tooltipsHotspotIgnore property has been added to the canvas libraries. This property can be a variety of things:
  • A boolean value (ignore all of the hotspots)
  • A number value (the index to ignore)
  • An array of number values (the indexes to ignore)
  • An array of boolean values (if true, then that index will be ignored)
• The Semi-circular Progress bar has been updated and can now have rounded ends using the new variant: 'rounded' property. There's a demo of this in the download archive called demos/semicircularprogress-rounded.html This demo also shows how you can use the text property that's common to all chart types to add custom text to your chart. In this demo, two pieces of custom text are added and they're centered using the firstdraw RGraph event. You can see an image of this new demo on the RGraph Facebook page.
• Libraries based on canvas and that use the key have had formatted keys added. This means that you can now do this:

  key: '%{properties:myLabels[%{index}]}: %{value_formatted}kg'
  

  Formatted key labels work in a very similar way to how formatted tooltips work.
• The key has been added to the Semi-circular Progress bar. This includes the new formatted tooltips as well as the interactive key.

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