Loading ...
Sorry, an error occurred while loading the content.
 

Re: [ydn-javascript] Re: Problems with a chart in a tab

Expand Messages
  • Eric Miraglia
    dreamworker22000, We re planning to make two changes in 2.6.0: Charts will be able to recover from DOM manipulations that are currently causing breakage (it
    Message 1 of 17 , Aug 19, 2008
      dreamworker22000,

      We're planning to make two changes in 2.6.0:

      1. Charts will be able to recover from DOM manipulations that are currently causing breakage (it won't be unaffected, but it should be able to re-initialize itself to recover);
      2. We plan to modify TabView so that it doesn't apply display:none in JavaScript as a way of hiding tabs; at the very least, the "hidden tab" style will be a CSS class, making it easier to modify when something like this comes up (display:none is what breaks Charts in YUI Tabs).

      Regards,
      Eric


      On Aug 16, 2008, at 4:50 PM, dreamworker22000 wrote:

      Just looking for a clarification on this, you mention may be fixed in
      next release, did you mean 2.6 or 3.0?

      --- In ydn-javascript@ yahoogroups. com, Eric Miraglia <miraglia@.. .> wrote:
      >
      > Sanjiv,
      > 
      > Thanks for sharing the product of your labor -- looks really nice.
      > 
      > -Eric
      > 
      > 
      > On Apr 3, 2008, at 11:34 AM, Sanjiv Jivan wrote:
      > 
      > > I have integrated YUI charts with GWT-Ext, which is a library based 
      > > on GWT and Ext (duh!). You can have a look at a demo here :
      http://www.gwt- ext.com/demo- charts/
      > >
      > > The charts now display well in tabs. Thanks for your help!
      > >
      > > Also updating data values in the Grid updates the charts. I used the 
      > > method suggested here :
      http://tech. groups.yahoo. com/group/ ydn-javascript/ message/24652
      > >
      > > Unfortunately that technique didn't work for the pie chart and it 
      > > blanked out when trying to refresh the data. Works well for other 
      > > chart types.
      > >
      > > Sanjiv
      > >
      > >
      > > On 4/2/08, Sanjiv Jivan <sanjiv.jivan@ ...> wrote:
      > > Thanks a lot Eric. It works great.
      > >
      > >
      > > Sanjiv
      > >
      > > On 4/1/08, Eric Miraglia <miraglia@.. .> wrote:
      > > Hollywood and Sanjiv,
      > >
      > >
      > > For what it's worth (no big claims here), this does seem doable:
      > >
      > > http://ericmiraglia .com/yui/ demos/tabchart2. php
      > >
      > > This approach works for me in FF2.0.0.13, IE 6 and 7, Opera 9.26, 
      > > and Safari 3.1.
      > >
      > > When I looked at this again this afternoon, I noticed that IE didn't 
      > > need any special treatment -- so I forked around YAHOO.env.ua. ie to 
      > > prevent IE from seeing the hack. There are three things I dislike 
      > > about this:
      > >
      > > The fork is based on UA;
      > > It modifies a private member of the chart's Tab;
      > > The underlying fragility of the Chart isn't addressed.
      > >
      > > That said, if you're looking to get this rolling right away, you may 
      > > want to take a look. If we come up with a better short-term 
      > > solution, we'll let you know; meantime, we'll work on the underlying 
      > > issue wrt to recovering from display:none and visibility:hidden on 
      > > the Chart itself.
      > >
      > > Regards,
      > > Eric
      > >
      > >
      > > On Apr 1, 2008, at 2:06 PM, Hollywood wrote:
      > >>
      > >> In IE7 the chart appears the first time, but if you tab to a 
      > >> different tab and then back it doesn't display the tab. Works fine 
      > >> in FF2.
      > >>
      > >> ----- Original Message -----
      > >> From: Sanjiv Jivan
      > >> To: ydn-javascript@ ...
      > >> Sent: Tuesday, April 01, 2008 3:24 PM
      > >> Subject: Re: [ydn-javascript] Re: Problems with a chart in a tab
      > >>
      > >> Eric,
      > >> Thanks for taking the time in putting up the sample. Unfortunately 
      > >> your sample doesn't work for me in IE 6 or FF 2. In FF 2, on 
      > >> changing tabs I only see the axes and not the lines of the chart, 
      > >> and in IE that chart doesn't even appear partially.
      > >>
      > >> You suggestion of mychart.set( "series", seriesDef); does redraw 
      > >> the chart, unfortunately the chart DOM removal / move in the prior 
      > >> step to move it out of the tab area results in a JS error which 
      > >> corrupts the chart. (eg skins are lost when moved back to original 
      > >> location).
      > >>
      > >> Looking forward to seeing a working solution for this in your next 
      > >> release as in the current state the charts cant be used in most 
      > >> ajax apps which typically hide / show content.
      > >>
      > >> Thanks again.
      > >>
      > >> Sanjiv
      > >>
      > >>
      > >> On 4/1/08, Eric Miraglia <miraglia@.. .> wrote:
      > >> Sanjiv,
      > >>
      > >>
      > >> This is undoubtedly problematic, and we need to make it easier. As 
      > >> Josh mentioned, we'll look at making the chart less brittle against 
      > >> ancestor DOM changes in the next release -- no schedule for you on 
      > >> that yet, but we'll announce it here when we have a target date.
      > >>
      > >> In the meantime, here are a couple of things to look at:
      > >>
      > >> I've used mychart.set( "series", seriesDef); to force the chart to 
      > >> redraw in my own implementations. This has not been sufficient to 
      > >> recover a tabbed chart that I've broken via display:none in my 
      > >> tests, but it may work in your example if you've moved the chart in 
      > >> the beforeActiveTabChan geevent.
      > >> This mockup gets you pretty close to what you're looking for: 
      http://ericmiraglia .com/yui/ demos/tabchart. php 
      > >> . It looks like it works in FF, Safari, and Opera. I didn't have 
      > >> time to trap the IE6 flow issues, but I suspect they're manageable 
      > >> with some additional fine tuning of the CSS. Note that this 
      > >> approach hacks the TabView contentVisibleattri bute for the chart's 
      > >> tab, preventing display:none from ever being invoked; instead, it 
      > >> moves the contentEl for the chart's tab into negativeland and sets 
      > >> its height to 0px.
      > >>
      > >> Sorry not to have a better answer for you on this. Hopefully 
      > >> resetting your chart's series attribute will get you the effect you 
      > >> need.
      > >>
      > >> Regards,
      > >> Eric
      > >>
      > >>
      > >> On Mar 31, 2008, at 3:58 PM, Sanjiv Jivan wrote:
      > >>> Eric,
      > >>> I'm having troubles with this too. A simple test of moving the 
      > >>> chart to a different div (in negetiveland) and then adding it back 
      > >>> to its original location results in the chart being displayed 
      > >>> really small. When I click on the chart, it ends up reloading / 
      > >>> redrawing itself.
      > >>>
      > >>> Do you have a working example of this? Is there a way to force the 
      > >>> chart to redraw without requiring me to click the chart. I'm not 
      > >>> so concerned about the reload, but would like the chart to be 
      > >>> displayed right when re-added to the original location. I can see 
      > >>> that the "object tag has height and width to 100% and the parent 
      > >>> div has the correct dimensions, yet the chart displays 20x 60px 
      > >>> when added back to original location.
      > >>>
      > >>> Thanks,
      > >>> Sanjiv
      > >>>
      > >>>
      > >>> On 3/17/08, Eric Miraglia <miraglia@.. .> wrote:
      > >>> tully_tim,
      > >>>
      > >>>
      > >>> We don't have a demo of a workaround for you at present, but one 
      > >>> thing you might try is using the TabView's event system to move 
      > >>> the chart out of the being-hidden tab before it's hidden, and move 
      > >>> the chart itself into negativeland (eg, left:-3000). Then, when 
      > >>> the tab is activated again, move the chart back into place.
      > >>>
      > >>> I would start with the TabView's activeTabChange event and go from 
      > >>> there.
      > >>>
      > >>> Regards,
      > >>> Eric
      > >>>
      > >>>
      > >>> On Mar 16, 2008, at 1:03 PM, tully_tim wrote:
      > >>>
      > >>>> Any temporary hacks or workarounds for this? :)
      > >>>>
      > >>>> --- In ydn-javascript@ yahoogroups. com, "Josh Tynjala" 
      > >>>> <jtynjala@>
      > >>>> wrote:
      > >>>> >
      > >>>> > It appears that Flash Player unloads and reloads a SWF (or the 
      > >>>> browser
      > >>>> > removes Flash Player and reinitializes it) when a parent 
      > >>>> element's
      > >>>> > display changes to none and then back to block. I've tested 
      > >>>> with both
      > >>>> > the charts and a very simple SWF to determine that this has 
      > >>>> nothing to
      > >>>> > do with the charts SWF itself.
      > >>>> >
      > >>>> > I should be able to detect this problem because the SWF will 
      > >>>> resend its
      > >>>> > initializing events to JavaScript when it is reloaded. However, 
      > >>>> I need
      > >>>> > to rework some of the JavaScript code to keep a full copy of 
      > >>>> the chart
      > >>>> > state so that it may be reinitialized correctly. I expect this 
      > >>>> won't be
      > >>>> > trivial.
      > >>>> >
      > >>>> > Josh Tynjala
      > >>>> >
      > >>>> > Yahoo! Flash Platform
      > >>>> >
      > >>>> >
      > >>>> >
      > >>>> >
      > >>>> >
      > >>>> > ____________ _________ _________ __
      > >>>> >
      > >>>> > From: Eric Miraglia [mailto:miraglia@ ]
      > >>>> > Sent: Tuesday, January 29, 2008 8:47 AM
      > >>>> > To: ydn-javascript@ yahoogroups. com
      > >>>> > Subject: Re: [ydn-javascript] Re: Problems with a chart in a tab
      > >>>> >
      > >>>> >
      > >>>> >
      > >>>> > Bernhard,
      > >>>> >
      > >>>> >
      > >>>> >
      > >>>> > There is definitely an issue with showing and hiding the chart 
      > >>>> canvas.
      > >>>> > I haven't dug deeply, but it seems to me that the Charts 
      > >>>> Control is
      > >>>> > sensitive to the display style attribute of its parent element 
      > >>>> changing
      > >>>> > -- so, a toggle between display:none and display:block on the 
      > >>>> parent
      > >>>> > blanks out the chart canvas and the data cannot be refreshed 
      > >>>> even by
      > >>>> > resending the DataSource.
      > >>>> >
      > >>>> >
      > >>>> >
      > >>>> > This is a known issue on our end and we're going to investigate 
      > >>>> it.
      > >>>> >
      > >>>> >
      > >>>> >
      > >>>> > This will cause Charts not to play nicely with TabView and some 
      > >>>> other
      > >>>> > YUI controls that toggle the display property of containing 
      > >>>> elements. I
      > >>>> > have had some success showing/hiding the Chart by moving it off 
      > >>>> the
      > >>>> > viewport (ie, style.left = -3000;) when I want to hide it. I 
      > >>>> haven't
      > >>>> > tested that solution across the A-Grade as yet.
      > >>>> >
      > >>>> >
      > >>>> >
      > >>>> > Josh Tynjala, the Charts author, will report back to the list 
      > >>>> once he's
      > >>>> > finished the investigation of the problem.
      > >>>> >
      > >>>> >
      > >>>> >
      > >>>> > Regards,
      > >>>> >
      > >>>> > Eric
      > >>>> >
      > >>>> >
      > >>>> >
      > >>>> >
      > >>>> >
      > >>>> > ____________ _________ _________ _________ _______
      > >>>> >
      > >>>> > Eric Miraglia
      > >>>> >
      > >>>> > Yahoo! User Interface Library
      > >>>> >
      > >>>> >
      > >>>> >
      > >>>> >
      > >>>> >
      > >>>> >
      > >>>> >
      > >>>> >
      > >>>> >
      > >>>> > On Jan 28, 2008, at 10:47 PM, bergerbd wrote:
      > >>>> >
      > >>>> >
      > >>>> >
      > >>>> >
      > >>>> >
      > >>>> > Me again,
      > >>>> >
      > >>>> > --- In ydn-javascript@ yahoogroups. com
      > >>>> > <mailto:ydn- javascript% 40yahoogroups. com> , "bergerbd" 
      > >>>> <bergerbd@>
      > >>>> > wrote:
      > >>>> > > I'm trying to create a TabView that contains a Chart. 
      > >>>> Therefor I've
      > >>>> > > merged two of the available samples. The result is a tab 
      > >>>> containing a
      > >>>> > > chart but after switching to an other tab and back the data 
      > >>>> isn't
      > >>>> > > display anymore. Is there a solution to this problem? The 
      > >>>> sample can
      > >>>> > be
      > >>>> > > found at [1]
      > >>>> >
      > >>>> > Even reloading the datasource on the tabchange-event does not 
      > >>>> help.
      > >>>> > The Axis are updated but the data is still invisible. :-(
      > >>>> >
      > >>>> > Bernhard
      > >>>> >
      > >>>> > > [1] http://rafb. net/p/rdX5wR14. html
      <http://rafb. net/p/rdX5wR14. html 
      > >>>> >
      > >>>> >
      > >>>>
      > >>>>
      > >>>
      > >>>
      > >>>
      > >>>
      > >>>
      > >>
      > >>
      > >>
      > >>
      > >>
      > >>
      > >
      > >
      > >
      > >
      > >
      > >
      > >
      >


    Your message has been successfully submitted and would be delivered to recipients shortly.