You can ignore the last one, as it turns out my other approach solves all problems. If you draw the charts only when their tabs are opened for the first time, you everything draws properly with no artifacts. See it working here: http://jsfiddle.net/asgallant/tWTfA/2/
On Monday, December 24, 2012 1:18:08 PM UTC-5, asgallant wrote: > > Here <http://jsfiddle.net/asgallant/tWTfA/>'s a version that fixes the > axes, but still has artifacts on the chart in tab 3. I'm not sure why that > is, but I'll keep digging. > > On Monday, December 24, 2012 12:27:06 PM UTC-5, asgallant wrote: >> >> Also, if you use Chrome's element inspector, you will see that tabs 2 and >> 3 both have "display: none" set in their style attributes when the page is >> first opened. >> >> On Monday, December 24, 2012 12:25:12 PM UTC-5, asgallant wrote: >>> >>> The problem is present in Chrome, but the effect is much more subtle. >>> Open in Chrome and then look at the left axes, the alignment of the >>> numbers is different in tabs 2 and 3. I'll take a look at the source code >>> and see if I can build an example script that fixes the problem. >>> >>> On Monday, December 24, 2012 11:58:59 AM UTC-5, Daniel LaLiberte wrote: >>>> >>>> Hari, >>>> >>>> Although I believe I know what Drew is suggesting (about rendering when >>>> the chart is not displayed), and he has good reason to suspect that might >>>> be the cause of the problem, one reason to doubt this explanation, along >>>> with your evidence to the contrary, is that you say it applies only to >>>> IE8, >>>> and not Chrome. Also, it sounds like you are saying it happens only with >>>> the jQuery UI tab control and not when you set up the display of the chart >>>> in separate HTML. It is still possible that the problem is caused by a >>>> combination of the use of the jQuery UI tab control with IE8, but there >>>> might be some very different explanation. >>>> >>>> I think we will need more evidence of what is happening before we can >>>> figure out how to fix or workaround the problem. If you are unable to >>>> provide a working demonstration of the problem that we can look at and try >>>> (and you may have perfectly good reasons for that), you will probably have >>>> to work it out mostly on your own, with our groping suggestions for what >>>> you might try next, which could take a long time. >>>> >>>> One thing I would try is a few more browsers. Firefox and Safari are >>>> good candidates. Also, if you can use the IE debugger and stop execution >>>> just before the chart is drawn, that should show whether the container div >>>> is visible at that time. >>>> >>>> dan >>>> >>>> >>>> On Mon, Dec 24, 2012 at 9:16 AM, Hari K D <[email protected]> wrote: >>>> >>>>> I have attached a sample html file with Column chart in tab control. >>>>> If you see the attached example, chart is loaded correctly, only in the >>>>> first tab, chart's in second and third tab's are not properly loaded. If >>>>> you see the div's are not hidden. >>>>> >>>>> >>>>> On Thursday, December 20, 2012 12:08:30 PM UTC-6, asgallant wrote: >>>>>> >>>>>> Is the chart in the tab that is open by default on the page (ie, what >>>>>> you see when you first load the page)? If not, then the div is hidden. >>>>>> >>>>>> On Thursday, December 20, 2012 9:26:06 AM UTC-5, Hari K D wrote: >>>>>>> >>>>>>> Hi, The div is not hidden. >>>>>>> 1) I didn't clearly understand your first option in the answer, I >>>>>>> have only one chart in my page, and I am loading the tab in >>>>>>> $(document).ready function, and then loading the chart. >>>>>>> 2) As I already mentioned, I am loading only one chart in the >>>>>>> particular tab and also in the entire page >>>>>>> >>>>>>> On Tuesday, December 18, 2012 9:54:46 PM UTC+5:30, asgallant wrote: >>>>>>>> >>>>>>>> This has to do with drawing the chart in a hidden div. You must >>>>>>>> make sure the div is visible before calling the chart's draw function. >>>>>>>> There are two ways you can do this: 1) set up the tab code to run in >>>>>>>> a >>>>>>>> "ready" event handler for the chart (which can get complicated if you >>>>>>>> have >>>>>>>> multiple charts in the tabs), or 2) draw each chart when its >>>>>>>> containing tab >>>>>>>> is opened for the first time. >>>>>>>> >>>>>>>> On Tuesday, December 18, 2012 10:26:29 AM UTC-5, Hari K D wrote: >>>>>>>>> >>>>>>>>> Hi, >>>>>>>>> >>>>>>>>> I have developed a web application in MVC 3 whcih contains jQuery >>>>>>>>> UI tab control. I added a column chart control in one of the tabs, >>>>>>>>> where >>>>>>>>> the chart is displayed without any issue, but the X and Y axis is not >>>>>>>>> visible in IE8. The same code works fine in Chrome. I even tried the >>>>>>>>> same >>>>>>>>> code in a separate HTML file and that too is working fine. >>>>>>>>> >>>>>>>>> I have already implemented pie, bar and column charts in my other >>>>>>>>> applications they all worked fine. But here I am not able to find the >>>>>>>>> problem. When I see the generated html through IE developer tools, >>>>>>>>> the code >>>>>>>>> for the X and Y axis is there. Only thing is, its not visible in the >>>>>>>>> browser. I also tried changing the Browser mode and Document mode in >>>>>>>>> developer tool bar, still not working. >>>>>>>>> >>>>>>>>> Thanks, >>>>>>>>> Hari K D >>>>>>>>> >>>>>>>> -- >>>>> You received this message because you are subscribed to the Google >>>>> Groups "Google Visualization API" group. >>>>> To view this discussion on the web visit >>>>> https://groups.google.com/d/msg/google-visualization-api/-/JZryy8vkOwMJ >>>>> . >>>>> >>>>> To post to this group, send email to [email protected]. >>>>> To unsubscribe from this group, send email to >>>>> [email protected]. >>>>> For more options, visit this group at >>>>> http://groups.google.com/group/google-visualization-api?hl=en. >>>>> >>>> >>>> >>>> >>>> -- >>>> Daniel LaLiberte<https://plus.google.com/100631381223468223275?prsrc=2> >>>> - 978-394-1058 >>>> [email protected] 562D 5CC, Cambridge MA >>>> [email protected] 9 Juniper Ridge Road, Acton MA >>>> >>>> -- You received this message because you are subscribed to the Google Groups "Google Visualization API" group. To view this discussion on the web visit https://groups.google.com/d/msg/google-visualization-api/-/WOwo0SA1WQgJ. To post to this group, send email to [email protected]. To unsubscribe from this group, send email to [email protected]. For more options, visit this group at http://groups.google.com/group/google-visualization-api?hl=en.
