Gradient colors in SVG HBar chart disappear after a redraw


« Back to message list

Enter your email address to get email updates on this topic. You can stop receiving updates by clicking the link in the update email messages.

Posted by Jan Dirk on 13th April 2017
Hi Richard,

I noticed that, when I use a gradient-color in my SVG graphs, that when I redraw the graph (by clearing the previous graph, creating a new graph and drawing this again), that the graphs with these gradient-colors are not drawn anymore.

After some investigation I found that the colors I pass in (a variable) in the options, are actually modified by RGraph. While doing so, the linear-gradient is defined in the SVG. So, when I do a redraw, my variable is changed, and therefore I pass in 'rubbish' to the new graph.

See this example:


<html>
   <head>
     <title>Reproduction case</title>
     <script src="RGraph/libraries/RGraph.svg.common.core.js"></script>
     <script src="RGraph/libraries/RGraph.svg.hbar.js"></script>
     <script type="text/javascript">
       window.onload = function()
       {
         var colors=["Gradient(rgb(78,185,110):rgb(230,76,59):rgb(230,76,59))"];
         var options = { colors: colors };
         var data=[1,2,5];
         var graph=new RGraph.SVG.HBar({id: "g1", data: data, options: options});
         document.getElementById("colors-before-1st").innerHTML = colors[0];
         graph.draw();
         document.getElementById("colors-after-1st").innerHTML = colors[0];
         setTimeout( () => {
           RGraph.SVG.clear(graph.svg);
           graph=new RGraph.SVG.HBar({id: "g1", data: data, options: options});
           document.getElementById("colors-before-2nd").innerHTML = colors[0];
           graph.draw();
           document.getElementById("colors-after-2nd").innerHTML = colors[0];
         }, 1000);
       }
     </script>
   </head>
   <body>
     <div>
       <div id="g1" style="width: 400px; height: 200px; background-color: #eee;" />
     </div>
     <table>
       <tbody>
         <tr>
           <td>Color before first draw</td><td><span id="colors-before-1st"/></td>
         </tr>
         <tr>
           <td>Color after first draw</td><td><span id="colors-after-1st"/></td>
         </tr>
         <tr>
           <td>Color before redraw</td><td><span id="colors-before-2nd"/></td>
         </tr>
         <tr>
           <td>Color after redraw</td><td><span id="colors-after-2nd"/></td>
         </tr>
       </tbody>
     </table>
   </body>
</html>

This is not only an issue with the colors option for HBar, but also for other graphs and the other color-options, like filledColors.

I can of course pass a copy of my variable, instead of the variable itself, like in the example above change one line to

   var options = { colors: colors.slice(0) };

and reinitialise the options again before doing the redraw.

I think it would be more correct that the RGraph library should make a copy of the options, when it wants to change them internally. Do you agree?

Regards,

Jan Dirk
Posted by Richard on 13th April 2017
Hi there,

By the looks of it this is already resolved - so you may need to update your libraries:

www.rgraph.net/tests/svg-gradients.html





Richard
Posted by Jan Dirk on 13th April 2017
Hi Richard,

I am using 4.61. I've double checked that I have the latest version.
However, I see that you do use probably a new version. Happy to see it seems to be solved in that newer version.
Any idea, when the new version will be available?

Jan Dirk
Posted by Richard on 13th April 2017
Hi there,

No idea no, but you can get the libraries by doing this:

www.rgraph.net/libraries/RGraph.svg.common.core.js
www.rgraph.net/libraries/RGraph.svg.hbar.js


...

www.rgraph.net/libraries/RGraph.svg.xxx.js





Richard
Posted by Jan Dirk on 13th April 2017
I indeed did that.

Thanks.

Add a reply

 




« Back to message list
RGraph on social media