toorshia / justgage

JustGage is a handy JavaScript plugin for generating and animating nice & clean dashboard gauges. It is based on Raphaël library for vector drawing.
MIT License
1.82k stars 462 forks source link

JustGage not drawing when used within Twitter Bootstrap Tabs or Carousel controls upon window resize #93

Open js1972 opened 11 years ago

js1972 commented 11 years ago

Hi, I've noticed that when you resize the window a justGage control will not draw the graphics if its inside a bootstrap 3 tab or carousel (that has been tabbed or clicked). You can toggle the display:block or inline-block for it to appear again.

As a workaround I user a timer to find the end of the resizing and quickly switch tabs - then the Gage's are redrawn properly.

toorshia commented 11 years ago

Hi,

Can you provide test case/demonstration of this issue?

Thanks for spotting :)

js1972 commented 10 years ago

Hi. Here's a link to a jsbin I've doctored up to show you the issue: http://jsbin.com/UxUkUpA/1/edit?output . See this image for what it looks like when it stuffs up: https://dl.dropboxusercontent.com/u/7546923/justgage/Capture.PNG

Now to duplicate this. You need to go crazy with some resizing and after you have flicked back and forth between the tabs. You'll see there is 3 gauges in each tab. Note the issue DOES NOT appear if you have not at least clicked on the tabs. Exactly the same issue when using a carousel instead of tabs. If you look at the html you'll see the scripts are all just up on dropbox but at least you can download them and play with them.

The only way I've managed to get around this is to detect the end of a resize and then with code I switch tabs; set a small timer, then switch back. The user can't even tell...

I can only imagine its something to do with the canvas (which I don't know much about - never coded with it).

Hope this helps.

Regards... Jason.

guiskj commented 10 years ago

I am having the same problem with justGages inside jQuery tabs, except that the quick tab switch does not work without user perception.

js1972 commented 10 years ago

Really... Can you show me how you've coded the tab switch... Its completely indistinguishable for me... Just a matter of ratcheting down the milliseconds on the timer.

On 12 November 2013 05:11, guiskj notifications@github.com wrote:

I am having the same problem with justGages inside jQuery tabs, except that the quick tab switch does not work without user perception.

— Reply to this email directly or view it on GitHubhttps://github.com/toorshia/justgage/issues/93#issuecomment-28239119 .

toorshia commented 10 years ago

OK, this one's funny :) Here goes:

When I open the page, and start resizing browser, at some point only gauges disappear (labels remain). Switching to 2nd tab, and then back to 1st - brings back the gauges. Resize browser again on 1st tab, they are gone again. However, resizing browser while on 2nd tab doesn't do anything to gauges, everything is as should be.

Can somebody confirm this behavior? I really have no freakin' idea what might be the culprit of this...

guiskj commented 10 years ago

Sure, every time I use the refresh function for a gauge in the second tab, I experience the problem you have in the first tab, but when I switch to second tab and back, they display correctly. This is the code that I have tried to use every time I refresh a gauge: $("#tabs").tabs("option", "active", $("#tabs-2Selector").index());setTimeout(function () { $("#tabs").tabs("option", "active", $("#tabs-1Selector").index()); }, 50); $("#tabs").tabs("option", "active", $("#tabs-1Selector").index());

Thanks Date: Mon, 11 Nov 2013 16:28:03 -0800 From: notifications@github.com To: justgage@noreply.github.com CC: guiskj@hotmail.com Subject: Re: [justgage] JustGage not drawing when used within Twitter Bootstrap Tabs or Carousel controls upon window resize (#93)

Really... Can you show me how you've coded the tab switch...

Its completely indistinguishable for me... Just a matter of ratcheting down

the milliseconds on the timer.

On 12 November 2013 05:11, guiskj notifications@github.com wrote:

I am having the same problem with justGages inside jQuery tabs, except

that the quick tab switch does not work without user perception.

Reply to this email directly or view it on GitHubhttps://github.com/toorshia/justgage/issues/93#issuecomment-28239119

.

— Reply to this email directly or view it on GitHub.

guiskj commented 10 years ago

So, I removed the jQuery tabs and the error persists even when I have two sets of gauges in two different divs and just hide/un-hide them...

toorshia commented 10 years ago

I think I know what's the culprit of this issue - it's most probably the dy parameter, but I'l have to try & test it...will be back with some updates soon.

wburgers commented 10 years ago

Has there been any progress on this? I'm using JQuery UI tabs and if I set the default tab that opens to the gauges tab, it all works well. But if the tab with the gauges is hidden (display:none), the gauges won't draw properly.

I hope this can be fixed. For now, I'll just set it as the default tab.

simonl65 commented 9 years ago

Darn it - I've just hit this problem too. Has there been any progress?

dtelaroli commented 8 years ago

+1

acekyle23 commented 8 years ago

+1

LGro commented 8 years ago

+1

agustinjlopez commented 8 years ago

+1

ghost commented 8 years ago

Some times ago I had similar problem - but generally not only justGage not drawing when parent container has display: none - I suppose it's because of browsers, probably they not creating all container properties if 'display' is set to 'none'.

Solution in my case -> put justGage into div and set style for this div (width/Height and display: block). So container for justGage will be properly set up by browser even it higher container is not displayed.

toorshia commented 8 years ago

Guys, have you tried setting width/height to gauge container? Is this working?

beckyt-dev commented 8 years ago

I'm still experiencing this issue even with the width/height in the gauge container.

nronnei commented 7 years ago

I've had similar issues using Material Design Lite grid. In my case, the problem was that if I wanted the gauge to be responsive, I couldn't set it's height/width using CSS. But if I didn't set it with CSS, Raphael broke. I got around it by setting the width/height in Javascript instead.

HTML

<div class="mdl-cell mdl-cell--12-col" id="station-gauge-container">
  <div id="station-gauge"></div>
</div>

CSS

#station-gauge-container {
    /* center the guage */
    margin-left: auto;
    margin-right: auto;
    /* responsive width */
    width: 100%;
    display: block;
    position: relative;
  }

  #station-gauge {
    display: inline;
  }

JS

const bikeGauge = new JustGage({
      id: "station-gauge",
      value: 2,
      min: 0,
      max: 25,
      relativeGaugeSize: true,
      width: 240,
      height: 160,
      title: "",
      label: "Bikes",
      levelColors: [
        "#2807ff",
        "#ff0000"
      ]
    });