Some chart elements not scaled when canvas resized

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 Paul on 24th April 2014
Hi,

I am currently evaluating your chart library and have run into a small problem. The plan is to show the charts on a user definable dashboard. One of the features of the dashboard is that the user can click a pop-out icon and the dashboard tile pops up in a resizeable dialog. To do this I am using the jQuery UI dialog widget and simply applying it to the div that contains the chart canvas. I then use some JavaScript to resize the canvas and call the draw() method on the chart.

The problem is that on some charts, Bar, Pie, Meter for example, certain elements are not redrawn at the new scale. The bar charts background grid remains the same scale as it was originally, basically appearing in the top left corner of the chart. The gradients for the Pie and Meter charts remain at their original size and location. I've not tried all your charts, but the Line chart seems to behave as expected and everything gets resized correctly. Currently I am using the code from your Examples pages to create the charts.

Can you let me know how I can force the charts to do a full redraw at the new scale?

I have tried calling RGraph.ObjectRegistry.Clear(canvas), RGraph.Reset(canvas) and RGraph.Clear(canvas) before calling draw() but to no effect.

Thanks,

Paul
Posted by Richard on 24th April 2014
Hi there,

I can't tell from that what you're doing but instead of detaching the canvas from the DOM or moving it around perhaps you could create a new one and create a new chart but using the same data.

You could optionally set the opacity of the existing canvas to 0 - so that it looks as though that canvas has moved.

So you would get a vaguely similar effect as the ModalDialog.






Richard
www.rgraph.net
If RGraph has helped you - please share the website - thanks!

RGraph Priority Support: www.rgraph.net/support#priority-support
Posted by Paul on 24th April 2014
Thanks, unfortunately I want to allow the user to resize the dialog as well (which I do by hooking into the resizeStop event and using the same JavaScript to resize the canvas and draw() the chart) - so this, while will work for the initial pop-up, will not work if they resize the dialog.

However, your suggestion of recreating the chart did lead me to a workaround, albeit a bit of a hack. By placing the routine to create the chart in a getChart function, I can pop-out the dialog and resize the canvas with JavaScript as before, call RGraph.Reset(canvas) to trash the old stuff and then the getChart function to create a new chart.

Will this approach work in production or is it not a good idea in the long run? Do you have any other suggestions?

If I could make a suggestion for a future addition to the API, how about a resizeChart function? The functionality is already there with the resizable feature, when you drag the chart to a new size everything scales perfectly, the ability to do this pragmatically would be perfect.

Thanks,

Paul
Posted by Richard on 24th April 2014
Hi there,

I can't tell what you're doing - but it sounds a bit like this:

www.rgraph.net/docs/updating-charts-dynamically.html

Which uses a function to create the chart so that all the configuration can be centralised. As for the function there's not one currently but it would easy to add one:

function resizeTo(obj, width, height)
{
     obj.canvas.width = width;
     obj.canvas.height = height;

     obj.draw();
}






Richard
www.rgraph.net
If RGraph has helped you - please share the website - thanks!

RGraph Priority Support: www.rgraph.net/support#priority-support
Posted by Paul on 24th April 2014
Thanks, that's almost exactly what I had originally, except it didn't redraw parts of the charts properly, simply calling obj.draw() only redrew the main elements, things like the background grid on the bar chart and gradients in the Pie and Meter charts did not get redrawn from their original size.

To get it working I had to alter the script like:

function getChart() {
   return new RGraph.Bar('cvs', [[3,4,6],[2,5,3],[1,5,2],[1,4,6],[1,6,8]])
     .set('labels', ['Mal', 'Barry', 'Gary', 'Neil', 'Kim'])
     ...
     ...
     .set('shadow.blur', 10)
}

function resizeTo(obj, width, height) {
   obj.canvas.width = width;
   obj.canvas.height = height;
   RGraph.Clear(obj.canvas); // this is not actually required to make it work
   obj = getChart();
   obj.draw();
}

Basically it only works if I actually create a new chart and write that to the canvas each time, calling obj.draw() on an existing chart doesn't correctly redraw all the elements.

However, if my workaround is acceptable, I'm happy with that, I just didn't like the idea of creating a new chart every time it was resized.

Thanks,

Paul
Posted by Richard on 25th April 2014
Hi there,


The obj.draw() method will only draw that particular object. If you want to redraw the whole canvas you'll need the function:

RGraph.redraw()

(which redraws all RGraph canvas tags on the page) or:

RGraph.redrawCanvas(canvas)

(which just redraws the canvas tag that you give it (same as what you get from document.getElementById() )




Richard
www.rgraph.net
If RGraph has helped you - please share the website - thanks!

RGraph Priority Support: www.rgraph.net/support#priority-support
Posted by Paul on 25th April 2014
Sorry, no that doesn't work. I changed the script to:

// Bar graph from Examples page
var bar = new RGraph.Bar('cvs', [[3,4,6],[2,5,3],[1,5,2],[1,4,6],[1,6,8]])
      .set('labels', ['Mal', 'Barry', 'Gary', 'Neil', 'Kim'])
      ...
      ...
      .set('shadow.blur', 10)
      .draw();


function resizeTo(obj, width, height) {
    obj.canvas.width = width;
    obj.canvas.height = height;
    RGraph.redrawCanvas(obj.canvas);
}

Still, the background grid remains the same size and only the border and bars get resized - so you end up with the borders and bars at the correct enlarged size and a small grid in the top left corner of the chart.

The problem occurs in the latest versions of Firefox and Chromium available in the Arch Linux repositories (I'm afraid I can't try it on Windows or IE as I don't currently have access to a copy).

Thanks again for all your help with this,

Paul
Posted by Richard on 25th April 2014
Hi there,

Try setting these to false:

background.grid.autofit
background.grid.autofit.align






Richard
www.rgraph.net
If RGraph has helped you - please share the website - thanks!

RGraph Priority Support: www.rgraph.net/support#priority-support
Posted by Paul on 25th April 2014
Hi, no, unfortunately the problem remains, while the settings are applied and do change the appearance of the background grid, they do not cause it to resize with the canvas.

Thanks, Paul
Posted by Richard on 25th April 2014
Hi there,

Are you using an older version of RGraph? The date is part of the archive filename I've seen something similar when I was experimenting with background grid caching - but I don't think that ever made it into a stable release.

Also, you could always turn the grid off entirely with the background.grid option.




Richard
www.rgraph.net
If RGraph has helped you - please share the website - thanks!

RGraph Priority Support: www.rgraph.net/support#priority-support
Posted by Paul on 25th April 2014
I'm using RGrap3-2014-03-28-stable. I appreciate I could turn off the grid, but I think it's a useful indicator for users. Certainly I could turn off the gradients in the Pie and Meter charts, they serve no purpose other than making the charts more visually appealing, that would fix them, however the grid I think is important. The grid actually resizes correctly in the Line chart, I appreciate the back-end stuff will probably be completely different, but still - that does work, the grid also resizes correctly on the Bar chart when zooming and using the built in resizeable feature.   It's only when I use JS to programmatically resize the canvas and then update the chart by calling draw() or redrawCanvas(...) or whatever that it doesn't (unless I completely recreate the graph).

Thanks, Paul
Posted by Richard on 25th April 2014
Hi there,

In your resize function try setting these to null:

background.grid.hsize
background.grid.vsize

Failing that you'll have to link to an example online so that I can see it.






Richard
www.rgraph.net
If RGraph has helped you - please share the website - thanks!

RGraph Priority Support: www.rgraph.net/support#priority-support
Posted by Paul on 25th April 2014
Hi, I have created a JSFiddle to show the problem:

jsfiddle.net/cS66u/1/

Please note that I've included all the libraries as the dashboards I want to create will be able to show a variety of graphs, when I decided which ones I'm defiantly not going to use I'll remove the relevant library references.

As you can see, if you click the Doesn't Work button, the graph resizes but leaves the grid behind.

The Does work button shows it working if I create a new graph, which I'm sure isn't ideal but does show what I want to happen.

Thanks,

Paul
Posted by Richard on 25th April 2014
Hi there,

You need the beta version from the staging.rgraph.net website - it works with that:

staging.rgraph.net/fiddle/view/a-bar-chart-thats-resizable


Login: guest/password






Richard
www.rgraph.net
If RGraph has helped you - please share the website - thanks!

RGraph Priority Support: www.rgraph.net/support#priority-support
Posted by Paul on 25th April 2014
Brilliant, thanks very much, that works great.

Please note however, the beta version does not fix the issue with the gradients not resizing on Meter and Pie charts, but this is not an issue as I will just not show them at this time.

Thanks for all you help, if I adopt your suite I'll be sure to take out priority support, great work,

Paul
Posted by Jeremy on 24th December 2015
What kind of fix was that? Why don't share with everybody has the same issue? I couldn't login that forbidden garden at all. :(
Posted by Richard on 24th December 2015
Hi,

The page is here:

www.rgraph.net/fiddle/view.html/a-bar-chart-thats-resizable

Richard

Add a reply




« Back to message list