This is actually an old behavior that's been around since I started using the API (~2 years now). The solution I use for it is to draw the chart in a visible div and use a "ready" event handler for the chart to hide the div. This gets a bit more complicated when tabs are involved, as you have to wait to initialize your tabs until after all charts have drawn. Alternatively, you could set each chart to draw only when its containing tab is opened for the first time.
On Tuesday, December 11, 2012 10:16:14 AM UTC-5, Daniel LaLiberte wrote: > > Hi Liam > > I would guess that your second chart is rendered on the second tab while > the contents is not displayed. If so, this explains why the legend text is > compressed - which is because of a recent change that now requires charts > to be rendered when they are visible. (This could change again in the > future when we figure out how to allow charts to be rendered invisibly > while avoiding the memory leak that was being addressed.) > > You might be able to resolve this by ensuring that the chart is visible > when it is rendered, either by delaying the rendering until the tab is > displayed, or by rendering it initially while it is still visible, and then > hiding it. > > Hope that helps. > > dan > > On Tue, Dec 11, 2012 at 5:41 AM, Liam Hughes <[email protected]<javascript:> > > wrote: > >> I've got an issue when using the google visulatisation api line chart >> with Jquery ui tabs. >> >> I've got two graphs on two tabs. The first graph, which is visible by >> default displays fine: >> >> >> <https://lh3.googleusercontent.com/-jRZZpmG8eIo/UMcNc4G0eGI/AAAAAAAACNs/VGAAk4692C8/s1600/Untitled.png> >> >> the second chart on the hidden tab seems to be messing up the key: >> >> >> <https://lh4.googleusercontent.com/-78nENrjpYcA/UMcNmLqQbPI/AAAAAAAACN0/bGOBKjGaV-M/s1600/Untitled2.png> >> >> I've tried changing the options but nothing I do seems to make any >> difference. Here are my options: >> >> options = { 'title': title, >> titleTextStyle: { color: color, fontSize: 20 }, >> 'width': 950, >> 'height': 400, >> hAxis: { >> minorGridlines: { >> count: x >> } >> }, >> chartArea: >> { >> width: 880 >> }, >> legend: { position: 'bottom', >> textStyle: { fontSize: 10 } >> } >> }; >> // Instantiate and draw our chart, passing in some options. >> var chart = new >> google.visualization.LineChart(document.getElementById(divId)); >> chart.draw(data, options); >> >> any thoughts on what is causing this and how to prevent it?? >> >> >> >> -- >> 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/-/d_HgYO1oyuYJ. >> To post to this group, send email to >> [email protected]<javascript:> >> . >> To unsubscribe from this group, send email to >> [email protected] <javascript:>. >> 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] <javascript:> 562D 5CC, Cambridge MA > [email protected] <javascript:> 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/-/rKqqcuN-dkAJ. 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.
