How to resize canvas to 100%

Share RGraph:   To help my Google visibility (it can't get much worse!), if you like and use RGraph I'd appreciate it if you could link to me

« 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 Bram Crins on 9th April 2013
Hello,

I i'm almost done with my graphs.
They are working on phones, tablets and PC's.

I calculate the size of the sceen in advance and put this in the canvas width.
Now this calculation is not always calculating the right width. So i put a style on the canvas.

<canvas id="cvs3" style="width:100%; height:300px;">

Now the layout of the graph is not that good anymore.
How can i get the canvas to cover 100% of the width available?

Thanks in advance.
Posted by RGraph support on 9th April 2013
Hi there,

You shouldn't use the CSS width/height properties to set the dimensions of the canvas - use the HTML attributes instead. So for example:

myCanvas.width = 1000;
myCanvas.height = 300;

To get the size of the window you'll need to interrogate the DOM - you might have luck with document.body.offsetWidth

PS Could you link to the RGraph website - thanks.

Richard, RGraph Support

1 Year Priority Support now reduced to £299:
   www.rgraph.net/support
Posted by Bram Crins on 9th April 2013
Richard,

Thank you for your response.

Solved it with the following :

<script>
document.write('<canvas id="cvs3" width="' + $(window).width() + '" height="300">[No canvas support]</canvas>');
</script>

Regards.

Bram
Posted by Dan on 2nd June 2013
I am also struggling with this, I tried Bram's script but was unsuccessful. I have also tried inserting:
tank.width = $(document).width();
and
windowWidth = $(window).width();
tank.Set('chart.canvas.width', windowWidth);
into the script tag, but to no avail.

Could you direct me a little further into implementing this into the script and the canvas tags?

Slainte,
Dan
Posted by RGraph support on 2nd June 2013
Hi there,

First - check that this is what you think it is by using alert():

windowWidth = $(window).width();

Then - this is wrong:

tank.Set('chart.canvas.width', windowWidth);

There is no RGraph property to control the width. You need to set the width on the canvas tag, like this:

tank.canvas.width = windowWidth;

 


Richard, RGraph Support

5 developer license with Priority support for £299:
   www.rgraph.net/license#five-developer
Posted by Dan on 2nd June 2013
Just wanted to let you know, I figured it out. Spent all day for one tiny aspect...moving on...

Thanks anyway,
Dan
Posted by Brad on 7th July 2013
Doing this, is there anyway to get the labels to scale as well? I've tried using RGraph.Redraw(), but the labels don't scale with the height and width of the canvas.
Posted by Brad on 7th July 2013
Sorry, by labels I meant the tooltips. They do not resize with the resizing of the graph, and the RGraph.Redraw() function really seems to do nothing.
Posted by RGraph support on 7th July 2013
Hi there,

No - for that you'd need to use your browsers zoom function - which is usually accessed by pressing CTRL and + or -.





Richard, RGraph support
Posted by Brad on 8th July 2013
Using the browsers zoom function isn't really a feasible option when trying to keep the chart at 100% width and responsive.

Perhaps you misunderstood my question or I explained poorly. When the canvas is resized, the hover position of the tooltips stays the same. Their activation location does not properly scale with the canvas. So they all retain their original positions. I'm talking about the position at which they are activated, and not their size. So lets say the chart is 300x200, then goes to 800X400, all of the tooltips will be activated inside of the 300x200 range of the chart, no longer acurtley portraying the data that is hover over.

It seems like the resizeing function could be split out into a callable function accepting height and width so we could do this pragmatically instead of as a user interaction.

Posted by RGraph support on 8th July 2013
Hi there,

What you're talking about would mean taking the scaling effect achieved by using the CSS width/height into account as well as the width/height HTML attributes into account.Which is doable but there are no plans for this at the moment.



Richard, RGraph support

Add a reply




« Back to message list