Menu
I have created a line graph with google visualization. I have tested it and it works as expected. The problem is when I start the page with .hide() on the visualization and then click the button to show it, it will not display the visualization. Here is a cut down version of what I have.
<script language="JavaScript">
$(document).ready(function(){
$('#visualization').hide();
$('#show').click(function() {
$('#visualization').show();
});
$('#hide').click(function() {
$('#visualization').hide();
});
});
// Load the Visualization API and the piechart package.
google.load('visualization', '1.0', {'packages':['corechart','annotatedtimeline']});
// Begin Annoted Time Line Chart - 1
function drawVisualization() {
var data = new google.visualization.DataTable();
data.addColumn('date', 'Date');
data.addColumn('number', 'Number of Users');
//data.addColumn('string', 'title1');
data.addRows(10);
data.setValue(0, 0, new Date(2011, 11 ,1));
data.setValue(0, 1, 21);
data.setValue(1, 0, new Date(2011, 11 ,2));
data.setValue(1, 1, 24);
// Do this for the rest of the chart
...
var annotatedtimeline = new google.visualization.AnnotatedTimeLine(
document.getElementById('visualization'));
annotatedtimeline.draw(data, {'displayAnnotations': true});
}
google.setOnLoadCallback(drawVisualization);
</script>
<body>
<a href="#" id="show">show</a> <a href="#" id="hide">hide</a>
<div style="border:solid">
<div id="visualization" style="width: 100%; height: 400px;"></div>
</div>
</body>
If I comment out the .hide() at the beginning the 2 buttons to show and hide work fine, but when its initially hidden it does not work. I have tried placing the code for the visualization above the query part but it still will not work.
Anyone know how to fix this?
Thanks,
Craig
EDIT
I was able to use this setTimeout(function(){ $('#tabs').tabs(); // or hide() }, 50); });
761
Gviz graphs will render incorrectly (often extremely small/close to invisible) if rendered in a hidden element. You need to redraw the graph after making the element visible.
A simple example of doing this, based on your code, would be something along the lines of adding your draw function to the callback of the show handler:
$('#visualization').show(function() {
drawVisualization();
});
The callback will be executed once the show is complete.
150
If you love us? You can donate to us via Paypal or buy me a coffee so we can maintain and grow! Thank you!
Donate Us With
