Skip to content

HTTPS clone URL

Subversion checkout URL

You can clone with
or
.
Download ZIP

Loading…

Charts are rendering double images specifically on native android browsers #1183

Closed
brianolsen2 opened this Issue · 9 comments

4 participants

@brianolsen2

Our charts are rendering twice when running our data through the stock Android browser. It works perfectly fine on Chrome so it seems to be an issue with the way jQuery and the native browser aren't playing well together. Any suggestions?
current bug 2013-11-01-08-58-34

old duplicating bug 2013-10-23-11-37-26

@StevieLuemm

Hi,

I have the same Problem when running flot with phonegap and jquery mobile on android.
I run my app (3 cyclic updated charts) on two diffrrent tablets with different Android-Versions:

First on Samsung-Tablet Galaxy Tab 2 10.1 - GT-P5110 Android-Version: 4.0.3
Second on Samsung Galaxy Tab - GT-N8000 Android-Version:4.1.2

On the first Tablet with older version of Android it works fine - no rendering Problem.
On the second Tablet the 3 charts of my App exist multiple times on one Page (in my placeholders-multiple times-and in the top left corner).

I think it could be a problem with redraw/draw function because first-time-output looks fine.
I have no idea how to fix this problem and why it doesn't appear on my other tablet.

Screenshot: constant and same Data in all 3 plots - but there's no problem to change it. There's just the rendering problem/update chart problem
screenshot_2013-11-05-15-35-17

Need this vor my Bachelorthesis and would appriciate your support

@dnschnur
Owner

Can either of you provide your code + html in a short form or, even better, a jsfiddle demonstrating the problem? Can you confirm whether this problem occurs when running on the Android emulator?

I don't currently have an Android to test against, so I need to first find a good way to reproduce the problem.

@StevieLuemm

Now I tested it on the Android emulator but it looks fine on it. :/

JS-Code: (print is called once form outside with arry passed in parameters and update is called cyclic with array passed in parameters ) array-style: [[1,2],[2,3],[3,4],[4,5],....]

var Flot = new KonstruktorFlot();
function KonstruktorFlot(){

var plot0;

this.print = function(data){
    Flot.plot0 = $.plot(("#placeholder"+chartNr),[ data ], flotOptions(10000));
}

this.update = function(data){
    Flot.plot0.setData([data]);         
    Flot.plot0.draw();
}

function flotOptions(yAchseMax){
        var options = {
            series: {
                shadowSize: 0,      // Drawing is faster without shadows
                color: '#4FF400',
                highlightColor: '#FFFFFF'
            },
            yaxis: {
                min: 0,
                max: yAchseMax,     
                tickColor:'#787878',

                font:{              
                    color:'#FFFFFF',
                }
            },
            xaxis: {
                show: false,

            },
            grid:{
                color:'#787878',
            }
        }
        return options;
    }
}

}

HTML-Code-Snippet :
<
div id="placeholder0" style="position:static; width: 600px; height: 300px"><
/div>

Looks good for me but as I said - works on older tablet and in emulator but not on the new one.
Thanks for your support.

(Sorry for bad formatting)

@StevieLuemm

Fixed!!

It's a problem with the position attribute and I think it's more a problem of jquery mobile. The "static" positioning in the div tag have to be replaced by a "absolute" position - formatting is more complex but for me it worked.

I don't understand why it worked with "static" positions on my older tablet but who cares - now it works on both. :)))

@brianolsen2: I hope this will fix your bug and this "issue" can be closed.

Anyway thanks a lot dnschnur for your quick response ;)

@brianolsen2

Thanks a lot @StevieLuemm and @dnschnur for your responses. We will try and implement this fix and see if we get any luck!!

@dnschnur
Owner

I'm glad you figured it out! I should have asked this earlier, but what version of Flot are you using? And was that positioning that you had to add on the placeholder? I'm a little surprised, because we do some work to ensure that the divs are positioned correctly and absolutely. I can see how that might break, especially if JQM is changing the values, but it's still a little unexpected.

I'll keep this open for a few days and take a look to see whether there's anything obvious that we could improve to better enforce the positioning.

@brianolsen2

It looks like changing the position attribute from static to absolute took care of the issue of the chart rendering twice but applying this change messes up the size and position of the chart. We can go through and play around with getting the chart to display correctly again but it doesn't seem like a permanent fix.

@dnschnur
Owner

The plot placeholder must have either absolute or relative positioning; otherwise we can't position the base and overlay canvases within it. Flot will change static to relative on initialization, but it sounds like jQuery Mobile is overriding that property after the plot has been created.

There's not much that we can do about that. You will need to either a) try relative instead of absolute, and see if that works better for you, b) wrap the placeholder in another div, which will hopefully prevent JQM from changing the actual placeholder's property, or c) try to initialize the plot later so JQM doesn't have a chance to override it.

@dnschnur dnschnur closed this
@martijnboekema

I have been troubled with the same issue for a couple of weeks now..
I tried changing all the static positions to absolute or relative positioning, but my device is still rendering duplicate plots. Tested it on different android devices.
Here are some screenshots:

Image 1: postimg.org/image/dj1vogy7l/ (graph)
Image 2: postimg.org/image/ewtijrxgx/ (graph with plot hidden, and duplicate plot visible)
Image 3: postimg.org/image/tvbxe7cj5/ (an accidental offset which makes the second unwanted plot visible to the user).

Any help would be great!!

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Something went wrong with that request. Please try again.