I've got an issue when using the Google Visualization 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);
$('#tabs').tabs();
any thoughts on what is causing this and how to prevent it??
Edit
If I remove the tabs() call it displays correctly. As per answer below from @Vipul tried setting the div to a fixed width, no difference.
