RGraph V5 Upgrade - error getting context - rgraph

Question

I had a working 3d chart using version 2107-10-1 that used images for the y axis.
I'm now trying to use the version 5 libraries but I'm getting an error:
"Cannot read property 'getContext' of null at new RGraph.Drawing.Image (RGraph.drawing.image.js:64)
Which is:
"context = this.canvas.getContext('2d');"
I change the line in the library to 3d to match the chart variant setting of 3d and the error is resolved. However I then get the following errors:
"Cannot set property 'shadowColor' of null
at Object.RG.noShadow.RG.NoShadow (RGraph.common.core.js:5155)
at RGraph.Drawing.Image.draw.Draw (RGraph.drawing.image.js:490)"
I've been going through the API to try and find any differences to the property names but my skill and understanding is not great.
Any help or advice would be greatly appreciated.
:-)
new RGraph.Bar({
id: 'cvs',
data: [ [0,5,5],[0,5,5],[0,5,5] ],
options: {
/******/
variant: '3d',
variantThreedAngle: 0,
hmarginGrouped: 2,
/*****/
textFont: '"Courier New", Courier, monospace',
titleFont: '"Courier New", Courier, monospace',
labels:['Monday', 'Saturday', 'Sunday'] ,
colors: [ '#3cb44b','#5484ed','#fbd75b' ],
textSize: 11,
title: 'Test Learner1: T1C1 W/B 22nd April 2019',
titleSize: 11,
titleColor:'#338833',
titleX: 50,
titleY: 25,
titleHalign: 'Left',
textAccessible: false,
key: ['LabelOne','LabelTwo','LabelThree'], //['One','Two','Three','Four','Five'],
keyPositionY: 470,
keyPositionX: 0,
gutterBottom: 65,
gutterRight: 10,
gutterTop: 40,
gutterLeft: 70,
keyPosition: 'gutter',
keyTextSize: 9,
numyticks: 2,
ylabelsCount: 2,
ymax: 10,
ymin: 0,
backgroundColor: 'white',
labelsColor: 'green'
// end options
}
}).draw().exec(function (obj)
{
var images = [
'smileyimages/graphimages/smiley5.png','smileyimages/graphimages/smiley10.png','smileyimages/graphimages/smiley1.png',
];
var index = 0;
obj.coordsText.forEach(function (val, key, arr)
{
if (val.tag === 'scale') {
var x = val.x,
y = val.y,
text = val.text;
var img = new RGraph.Drawing.Image({
id: 'cvs',
x: x,
y: y,
src: images[index],
options: {
halign: 'right',
valign: 'center'
}
}).draw();
index++;
}
});
obj.set({
ylabels: true
});
RGraph.redraw();
}).on('beforedraw', function (obj)
{
RGraph.clear(obj.canvas, 'white');
});

Answer 1

I've adjusted your code for the new property names. With this code remember to update the paths to the images.
<script src="/libraries/RGraph.drawing.image.js"></script>
<script src="/libraries/RGraph.common.core.js"></script>
<script src="/libraries/RGraph.common.key.js"></script>
<script src="/libraries/RGraph.bar.js"></script>
And the code that makes the chart:
new RGraph.Bar({
id: 'cvs',
data: [ [1,5,5],[1,5,5],[1,5,5] ],
options: {
variant: '3d',
hmargin: 20,
hmarginGrouped: 2,
textFont: '"Courier New", Courier, monospace',
titleFont: '"Courier New", Courier, monospace',
xaxis: false,
xaxisLabels:['Monday', 'Saturday', 'Sunday'] ,
colors: [ '#3cb44b','#5484ed','#fbd75b' ],
title: 'Test Learner1: T1C1 W/B 22nd April 2019',
titleX: 120,
titleY: 25,
titleHalign: 'Left',
textAccessible: false,
key: ['LabelOne','LabelTwo','LabelThree'], //['One','Two','Three','Four','Five'],
keyPositionY: 435,
keyPositionX: 100,
marginBottom: 95,
marginRight: 10,
marginTop: 40,
marginLeft: 100,
keyPosition: 'margin',
keyLabelsSize: 9,
yaxis: false,
yaxisLabelsCount: 2,
yaxisScaleMax: 10,
yaxisScaleMin: 0,
backgroundColor: 'white',
xaxisLabelsColor: 'green'
}
}).draw().exec(function (obj)
{
var images = [
'/images/alex.png',
'/images/alert.png',
'/images/facebook.png'
];
var index = 0;
obj.coordsText.forEach(function (val, key, arr)
{
if (val.tag === 'scale') {
var x = val.x,
y = val.y,
text = val.text;
var img = new RGraph.Drawing.Image({
id: 'cvs',
x: x,
y: y + 10,
src: images[index++],
options: {
halign: 'right',
valign: 'center'
}
}).draw();
}
});
});