Re: [visualization-api] Legend issue using Jquery ui tabs

[Daniel LaLiberte]

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 <soni...@gmail.com> 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: 

the second chart on the hidden tab seems to be messing up the key:

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 google-visua...@googlegroups.com.
To unsubscribe from this group, send email to google-visualizati...@googlegroups.com.
For more options, visit this group at http://groups.google.com/group/google-visualization-api?hl=en.

--

Daniel LaLiberte  - 978-394-1058

dlaliberte@Google.com   562D 5CC, Cambridge MA

daniel.laliberte@GMail.com 9 Juniper Ridge Road, Acton MA

[asgallant]

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.

dan

To unsubscribe from this group, send email to google-visualization-api+unsub...@googlegroups.com.

For more options, visit this group at http://groups.google.com/group/google-visualization-api?hl=en.

--

Daniel LaLiberte  - 978-394-1058

dlali...@Google.com   562D 5CC, Cambridge MA

daniel.l...@GMail.com 9 Juniper Ridge Road, Acton MA