Question about redrawing the Scatter chart

« 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 David Cook on 4th August 2017
Hi Richard:

Working with your scatter chart. Again - I have a 'chart designer' which lets a user interactively modify the options for your scatter chart.

Everything is working except for these: backgroundGrid, backgroundGridHlines, backgroundgridvlines, backgroundGridColor.

The values are set properly in the initial options block, and are honored correctly.

However, if I change them later in javascript, to new values, the changes do not appear on the chart.

How do I get the chart to redraw with all the new settings honored (hopefully without having to recreate the chart)?

I also see this when I dynamically resize the chart (the user can pick a corner and resize the frame the chart sits in).   The grid lines, do not change dynamically.

I'm guessing that those are somehow precomputed, and then not computed again? Is it possible to have them computed again?

Thanks, david
Posted by Richard on 5th August 2017
Hi there,

IIRC the background grid is cache because it was slowing down animations. So try clearing the cache with this:

RGraph.cache = [];

Posted by David Cook on 5th August 2017
You are a god among gods. Worked perfectly. Are all those 'secret' calls documented somewhere?

Thanks once again!
Posted by Richard on 5th August 2017
Hi there,

> You are a god among gods.

If I were I would magic myself up some money and buy a massive yacht, sail the seas and never have to work again! I suppose I might eventually get bored and do some charity work too.

> Worked perfectly. Are all those 'secret' calls documented somewhere?

Doubt it. That just comes as a byproduct of writing the code I guess. I thought once about removing the background cache for this very reason - but it kills performance in animations and this issue doesn't crop up particularly often.

Posted by David Cook on 5th August 2017

Hi Richard...

Well, I spoke too soon (not about the deity part though).

While the RGraph.cache = [] fixed the problem of the grids not redisplaying, a new problem has appeared.

When the user dynamically changes the frame size (not using your resize method) - The chart expands/contracts as expected.

However... if expanded, there appears to be a 'clipping' region that it stops displaying with.

For example, if the graph is 100 x 100, and I expand it dynamically to 200 x 200, the contents of the 100x100 window WILL show that they have expanded, but the new part of the 200x200 window does not show the expanded graph it remains the background color).

I can redraw the Graph at any size, and it appears correctly. Making it smaller works just fine. Making it bigger stops (clips) after, around 20 pixels or so.

Again, the content of the visible region IS expanding correctly (eg., grid lines, the data itself, etc, are all expanding) - it is just as if it is being clipped just slightly outside of it's original size, as it is being expanded.

Any thoughts?
Posted by Richard on 5th August 2017
Hi there,

Can you put an example of it online? Here's an example of a resizing HBar that I just knocked up:

Could it be a DIV that the canvas is contained in not being resized and thus 'clipping' the canvas?

Posted by David Cook on 6th August 2017

Hi Richard...

Ok... this just about drove me mad. I pretty much ruled out that I had no DIV that was interfering. But it acted like I did.

So I went through the rendered elements in the debugger.

SOMETHING (not me) inserted this DIV around my CVS DIV:

<div id="cvs_rgraph_domtext_wrapper" class="rgraph_domtext_wrapper" style="overflow: hidden; width: 400px; height: 400px; display: inline-block; position: fixed; left: 0px; top: 0px;">

See that "width:400px" in there? That is overriding my own canvas width (which this mysterious DIV contains within it).
400 px is my starting frame width. When I widen the frame, my CVS width goes to the new value, but this stays at 400.

To fix this I modified my resize function to now look like this:

// Set our background and frame size
function resizeFrame(w,h) {
   var e = document.getElementById("cvs");
   window.innerWidth = w;
   window.innerHeight = h;
   e.width = w;
   e.height = h;

   e = document.getElementById("cvs_rgraph_domtext_wrapper"); = w; = h;

   RGraph.cache = [];
   try { RGraph.redraw(); } catch(err) { }

That fixes the problem for me. It is odd that the other widgets (eg., Gauge, etc) don't act like this.

I'd be interested in learning where that DIV came from and what I could have done to have it automatically caught the resize.

Posted by Richard on 6th August 2017
Hi there,

The DIV is a wrapper that is added around the canvas when the option textAccessible is enabled, and it is by default.

You can get rid of it by setting:

textAccessible: false

in your config. Though your chart will then be drawn with the native canvas API which is fine - but not accessible and it's not real text.

So try it and see what you think.


Add a reply

« Back to message list