My dynamic SVG Line chart has an issue in a responsive environment


« 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 Skies on 27th October 2017
Hi
i have a a problem getting my graph to be responsive about window size...
i have a script
$(window).on("resize", function () {
            
             RGraph.SVG.clear(line_eq1_inter1.svg);

             setTimeout(function () {
                 var width = document.getElementById('eq1_inter1').offsetWidth;
                 var height = document.getElementById('eq1_inter1').offsetHeight;
                
                 var svg = line_eq1_inter1.svg;
                 //alert(width);
                
                 svg.setAttribute('width', width);
                 svg.setAttribute('height', height);
                
                 RGraph.SVG.redraw(line_eq1_inter1.svg);

             }, 2000);

            

          
         });

but it only resizes the layout of the graph..not the values updating inside neither the title and X,Y axis description
Any solution to make my whole graph responsive?
Thanks=)
Posted by Richard on 27th October 2017
Hi there,

The SVG libraries are probably setting the width/height in the constructor. I changed this a few weeks ago so that the width/height are determined in the draw() function.

That way when the chart is redrawn the width and height of the SVG is retrieved from the SVG tag. So if it has changed it then uses the new value.

So until the next release is released you could try this before you call the .redraw() function:

line_eq1_inter1.width = width;
line_eq1_inter1.height = height;

IIRC!

Richard
Posted by Skies on 27th October 2017
Hey Richard
Thanks that worked.

Add a reply




« Back to message list