Hi All,
I am new to google charts and java scripting & have started using google
charts to show some of work related data in graphs.
I have a requirement wherein on clicking a button or something, I need to
toggle between table chart view & pie chart(or some other corecharts) view.
Below is the code of what I am trying to do:
<html>
<head>
<button type="button" id="b1" onclick="init();" >Click me!</button>
<script type="text/javascript"
src="https://www.google.com/jsapi";></script>
<script type="text/javascript">
google.load('visualization', '1', {packages:['table','corechart']});
google.setOnLoadCallback(init);
function init(){
var data = google.visualization.arrayToDataTable([
['Task', 'Hours per Day'],
['Work', 11],
['Eat', 2],
['Commute', 2],
['Watch TV', 2],
['Sleep', 7]
]);
var current = 0;
var chart = []
var options = []
chart[1] = new
google.visualization.PieChart(document.getElementById('chart_div'));
options[1] = {
'width': '*',
'height':400,
'sliceVisibilityThreshold':0,
};
chart[0] = new
google.visualization.Table(document.getElementById('chart_div'));
options[0] = { showRowNumber: false,sort:'disable'};
var button = document.getElementById('b1');
function drawChart() {
//alert(current)
chart[current].draw(data, options[current]);
}
drawChart();
button.onclick = function() {
current = 1 - current;
drawChart();
}
}
</script>
<script type="text/javascript">
</script>
</head>
<body>
<div id="chart_div" style="width: 500px; height: 500px;"></div>
</body>
</html>
------------------------------
Link: http://jsfiddle.net/vijaydv1987/JnNnL/
I see that charts toggle between table to pie & then back to table. After
that it doesn't change & remains in table view.
Please let me know what I am doing wrong or a correct way to do this
Thanks,
Vijay
--
You received this message because you are subscribed to the Google Groups
"Google Visualization API" group.
To unsubscribe from this group and stop receiving emails from it, send an email
to [email protected].
To post to this group, send email to [email protected].
Visit this group at http://groups.google.com/group/google-visualization-api.
For more options, visit https://groups.google.com/groups/opt_out.
