The SVG Bar chart wave effect is not working with the responsive function
Posted by Harry at 17:16 on Monday 18th January 2021 [link]
I'm trying to draw a Bar chart with the wave effect and also the responsive function.
The Bar chart with wave effect by itself works OK - however when I add the responsive function it behaves slightly differently - like its being drawn first and then animating.
Heres an example that shows it happening:
bar = new RGraph.SVG.Bar({
id: 'chart1',
data: [5,9,6,3,2,6,7],
options: {
backgroundGridBorder: false,
backgroundGridVlines: false,
xaxisLabels: ['Mon','Tue','Wed','Thu','Fri','Sat','Sun'],
marginBottom: 100,
xaxis: false,
yaxis: false
}
}).wave().responsive([
{maxWidth: null, width: 750, height: 300, options: {marginInner: 25, textSize: 14}, callback: function () {},css: {}},
{maxWidth: 900, width: 500, height: 200, options: {marginInner: 15, textSize: 10}, callback: function () {},css: {}}
]);
The Bar chart with wave effect by itself works OK - however when I add the responsive function it behaves slightly differently - like its being drawn first and then animating.
Heres an example that shows it happening:
bar = new RGraph.SVG.Bar({
id: 'chart1',
data: [5,9,6,3,2,6,7],
options: {
backgroundGridBorder: false,
backgroundGridVlines: false,
xaxisLabels: ['Mon','Tue','Wed','Thu','Fri','Sat','Sun'],
marginBottom: 100,
xaxis: false,
yaxis: false
}
}).wave().responsive([
{maxWidth: null, width: 750, height: 300, options: {marginInner: 25, textSize: 14}, callback: function () {},css: {}},
{maxWidth: 900, width: 500, height: 200, options: {marginInner: 15, textSize: 10}, callback: function () {},css: {}}
]);
Posted by Richard at 18:13 on Monday 18th January 2021 [link]
Interesting. This appears to be due to multiple redraws - one by the responsive function and another by the wave effect.
After a while playing around with this I've come up with this solution, which configures the chart and then after a small delay calls the wave effect. Initially the color is set to transparent and then set to red after the delay and just before the effect starts.
bar = new RGraph.SVG.Bar({
id: 'cc',
data: [5,9,6,3,2,6,7],
options: {
backgroundGridBorder: false,
backgroundGridVlines: false,
xaxisLabels: ['Mon','Tue','Wed','Thu','Fri','Sat','Sun'],
marginBottom: 100,
xaxis: false,
yaxis: false,
colors:['transparent']
}
}).responsive([
{maxWidth: null, width: 750, height: 300, options: {marginInner: 25, textSize: 14}, callback: function () {},css: {}},
{maxWidth: 900, width: 500, height: 200, options: {marginInner: 15, textSize: 10}, callback: function () {},css: {}}
]);
// Set the color to red and call the animation
setTimeout(function ()
{
bar.set('colors', ['red']);
RGraph.SVG.clear();
bar.wave();
}, 250);
There's a codepen here which shows this in action:
https://codepen.io/rgraph/pen/JjRxZZv
After a while playing around with this I've come up with this solution, which configures the chart and then after a small delay calls the wave effect. Initially the color is set to transparent and then set to red after the delay and just before the effect starts.
bar = new RGraph.SVG.Bar({
id: 'cc',
data: [5,9,6,3,2,6,7],
options: {
backgroundGridBorder: false,
backgroundGridVlines: false,
xaxisLabels: ['Mon','Tue','Wed','Thu','Fri','Sat','Sun'],
marginBottom: 100,
xaxis: false,
yaxis: false,
colors:['transparent']
}
}).responsive([
{maxWidth: null, width: 750, height: 300, options: {marginInner: 25, textSize: 14}, callback: function () {},css: {}},
{maxWidth: 900, width: 500, height: 200, options: {marginInner: 15, textSize: 10}, callback: function () {},css: {}}
]);
// Set the color to red and call the animation
setTimeout(function ()
{
bar.set('colors', ['red']);
RGraph.SVG.clear();
bar.wave();
}, 250);
There's a codepen here which shows this in action:
https://codepen.io/rgraph/pen/JjRxZZv
Posted by Richard at 15:36 on Tuesday 19th January 2021 [link]
OK, I've just thought of a better way than using the setTimeout() function - using the callback function in the responsive configuration.
The updated code is:
bar = new RGraph.SVG.Bar({
id: 'cc',
data: [5,9,6,3,2,6,7],
options: {
backgroundGridBorder: false,
backgroundGridVlines: false,
xaxisLabels: ['Mon','Tue','Wed','Thu','Fri','Sat','Sun'],
marginBottom: 100,
xaxis: false,
yaxis: false
}
}).responsive([
{maxWidth: null, width: 750, height: 300, options: {marginInner: 25, textSize: 14}, callback: myAnimate},
{maxWidth: 900, width: 500, height: 200, options: {marginInner: 15, textSize: 10}, callback: myAnimate}
]);
function myAnimate (obj)
{
if (!window.callback_function_run) {
RGraph.SVG.clear();
obj.wave();
window.callback_function_run = true
}
}
And an updated codepen is here:
https://codepen.io/rgraph/pen/dyprGQW
The updated code is:
bar = new RGraph.SVG.Bar({
id: 'cc',
data: [5,9,6,3,2,6,7],
options: {
backgroundGridBorder: false,
backgroundGridVlines: false,
xaxisLabels: ['Mon','Tue','Wed','Thu','Fri','Sat','Sun'],
marginBottom: 100,
xaxis: false,
yaxis: false
}
}).responsive([
{maxWidth: null, width: 750, height: 300, options: {marginInner: 25, textSize: 14}, callback: myAnimate},
{maxWidth: 900, width: 500, height: 200, options: {marginInner: 15, textSize: 10}, callback: myAnimate}
]);
function myAnimate (obj)
{
if (!window.callback_function_run) {
RGraph.SVG.clear();
obj.wave();
window.callback_function_run = true
}
}
And an updated codepen is here:
https://codepen.io/rgraph/pen/dyprGQW
[Replies are now closed]