Trying to figure out what is happening here. When I first load the page with the graphs on it I get the following:
However after I refresh it I get the following:
here is the code that is being rendered:
setTimeout(function(){
new RGraph.SVG.Line({
id: 'sbfefinancialtrend2',
data: [
12.754546,
18.771622,
21.15946,
6.198649,
19.645947,
13.724324,
14.481081,
6.0878377,
22.671621,
8.917568,
14.263514,
9.281081,
20.340542,
13.485135,
5.727027,
7.964865,
7.1932435,
4.8932433,
8.136486,
6.9445944,
5.428378,
7.268919,
5.85,
4.6,
7.3581085,
5.685135,
9.606757,
19.431429,
11.982858,
11.364285,
1.9033333,
8.645714,
6.535714,
],
options: {
backgroundGridLinewidth:0.5,
backgroundGridVlinesCount: 36,
marginInner: 0,
textColor: '#595959',
textFont: 'Roboto',
filled: true,
filledColors: ['rgba(219,193,218,0.7)'],
colors: ['#a30a7a'],
marginRight: 10,
marginBottom: 30,
marginTop: 10,
xaxis: false,
yaxis: false,
tickmarksFill: '#a30a7a',
tickmarksLinewidth: 1,
linewidth: 1,
spline: true
}
}).trace().responsive([
{width: 750,height:130,options:
{xaxisLabels: [
'F20',
'J20',
'D19',
'N19',
'O19',
'S19',
'A19',
'J19',
'J19',
'M19',
'A19',
'M19',
'F19',
'J19',
'D18',
'N18',
'O18',
'S18',
'A18',
'J18',
'J18',
'M18',
'A18',
'M18',
'F18',
'J18',
'D17',
'N17',
'O17',
'S17',
'A17',
'J17',
'J17',
],
xaxisLabelsAngle:45,marginLeft: 30,textSize: 8,tickmarksStyle: 'circle',tickmarksSize: 3,linewidth: 2},
css:{'float':'right'}}
]);},1000);
I wrapped it with a timeout in order to try to fix the problem. However this didn't help.
Any suggestions?
Thanks for you help!
Your code works for me on my test page. You can see that here:
https://www.rgraph.net/tests/svg.line/natdrip.html
Though you could try adding this to your code:
.on('beforedraw', function ()
{
RGraph.SVG.clear('cc');
}).trace()