Reposition a redrawn Radar chart when the window is resized


« 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 saibal on 10th May 2017
Hi,

I use radar svg chart. First draw is perfect but I want to use it in a responsive site. So when the page is resized I call RGraph.SVG.clear(xx) and RGraph.SVG.redraw(xx) method.

The problem is that even if the container div is resized, the new graph is not centered (it conserves the old center coordinates).

Can you help me?

thanks
saibal
Posted by Richard on 10th May 2017
Hi there,

When created the SVG tag is given the sizes of the container DIV so it completely fills it. But you can manipulate the size of the SVG tag as well as the container if you want using the width/height attributes. But you might want to manipulate the the positioning too. By default the SVG tag is given the style attributes:

top: 0;
left: 0;
position: absolute;

And gets the width/height from the DIV container but they're set as attributes - not styles. I'll look into changing them to styles.



Richard
Posted by Richard on 10th May 2017
Hi there,

The width/height have to be set as attributes - not as styles. So when you redraw the chart, you could perhaps measure the size of the DIV and then set that on the SVG tag:

// Get the size of the DIV tag
var width = document.getElementById('chart-container').offsetWidth;
var height = document.getElementById('chart-container').offsetHeight;

var svg = obj.svg;

// Now set the sizes on the SVG tag
svg.setAttribute('width', width);
svg.setAttribute('height', height);




Richard
Posted by saibal on 11th May 2017
I'm sorry but I can't with it.

This is my code:

container:

<div id="chart-container" style="border:solid 1px red;text-align:center; width:100%; height:450px"></div>

and this my js:

$(document).ready(function() {
  graph = new RGraph.SVG.Radar({
  id: 'chart-container',
  data: [
   [10,5,6,4,1,9]
  ],
  options: {
   filled: true,
   filledAccumulative: true,
   filledOpacity: 0.70,
   scaleVisible: false,
   tickmarksSize: 5,
   backgroundGridConcentricsCount: 10,
   centerx: '50%',
   centery: '50%'
  }
}).draw();

});

$(window).on("resize", function() {

  RGraph.SVG.clear(graph.svg);

setTimeout(function ()
{
   width = document.getElementById('chart-container').offsetWidth;
   height = document.getElementById('chart-container').offsetHeight;

   var svg = graph.svg;

   RGraph.SVG.redraw(graph.svg);

}, 2000);

});

but when redraw, the graph is not centered in new container

can you help me?

thanks
Posted by Richard on 11th May 2017
Hi there,

Some thing like this then:

www.rgraph.net/fiddle/view.html/new-rgraph-examplesvg-resize


Richard
Posted by saibal on 11th May 2017
yes!! you helped me!!

thanks

Add a reply

 




« Back to message list
RGraph on social media