Chaps I have an interesting and odd problem. Today I had the brilliant(??) idea of using google
chart
for a site I am building. It is all nice and dandy till I placed the graph inside a hidden container,
planning to add some jquery and slide the graph down when somebody clicks a link. The functionality works,
in that the graph does actually slide down but the size of it shrunk to almost half of it. Feeling completely lost after having tried to increase the width of a few of the container created by the google script, I had a
look online and found something that perhaps explains what the problem is:
http://stackoverflow.com/questions/8577366/using-hide-and-show-with-google-visualization/8600892#8600892
In essence, when the graph is places in a hidden container, it doesn't work(!!). Now they do provide some
sort of fix, but I have failed to implement it (they say to use the call the function that draws the graph as
a callback function to the one that unhides the element, if I have understood correctly.)
Here is some html code and css to describe the issue (but you can see the problem online here if you click on 'pulse' and compare the size of that graph to the one under exercise which at the moment for demonstration purposes resides in a block container - no hiding occurs).
This is the html exerpt where you have the empty divs that the google script populates with the graphs:
<p><strong><a href="javascript:void(0)" class="accordion">Pulse</a></strong></p>
<!-- <div class="hiddenDiv"> -->
<div id="pulse" class="pulse"></div>
<!-- </div> -->
<p><strong><a href="javascript:void(0)" class="accordion">Exercise</a></strong></p>
<div id="exercise" class="exercise"></div>
This is instead the css, you can see that the div containing the 'pulse' is hidden and will be then revealed using jquery:
.pulse, .exercise, .weight{
width:900px;
/* height:500px; */
}
.mainContainer{
border:1px solid red;
width:90%;
margin:0 auto;
}
.heading{
border:1px solid blue;
}
.hiddenDiv{
border:1px solid red;
/* width:100px;
height:50px; */
display:none;
}
.pulse{display:none;}
I am using this script - in an external file:
$(document).ready(function(){
$(".accordion").click(function(){
var theClass = $(this).parent().parent().next().attr('class');
console.log("class is " + theClass);
$(this).parent().parent().next().slideToggle();
});
});
and google uses its own script for the graph (this in an internal script):
<script type="text/javascript">
google.load("visualization", "1", {packages:["corechart"]});
google.setOnLoadCallback(drawChart);
function drawChart() {
var data = google.visualization.arrayToDataTable([
['Day', 'Pulse'],
['26/03', 75],
['27/03', 71],
['15/04', 73],
['22/05', 64],
['26/03', 75],
['27/03', 71],
['15/04', 73],
['22/05', 64],
['26/03', 75],
['27/03', 71],
['15/04', 73],
['22/05', 64],
['30/05', 75]
]);
var options = {
title: 'Pulse'
};
var chart = new google.visualization.LineChart(document.getElementById('pulse'));
chart.draw(data, options);
}
</script>
So how do I make sure that I call drawChart() as a callback function of my slideToggle() and not as part of google.setOnLoadCallback(drawChart);?
I mean the callback shouldn't be too challenging, I believe I can change my function to this:
$(document).ready(function(){
$(".accordion").click(function(){
var theClass = $(this).parent().parent().next().attr('class');
console.log("class is " + theClass);
$(this).parent().parent().next().slideToggle(function(){
drawChart();
});
});
});
but how do I remove the drawChart() from inside the google script without making a mess? Can anybody give me a hand with this I am really stuck...
