Re: Google Charts based on selection on same page

70 views

Skip to first unread message

asgallant

unread,

Oct 25, 2012, 12:02:45 PM10/25/12

to google-visua...@googlegroups.com

The first problem is that your switch statement is outside the change function, so it tries the switch on the document's ready event rather than on the selection change. A possible second problem is that the API may not be done loading when the change is made. To prevent this, move the switching code from a document.ready event handler to the google.setOnLoadCallback handler. Make those changes and it should work fine: http://jsfiddle.net/asgallant/3sXYY/

On Thursday, October 25, 2012 6:31:06 AM UTC-4, RaviShankar Radhakrishnan wrote:

Hi All . I am pretty new to google Visualisation API. I have a scenario to load different charts based on a selection from the dropdown. It is not displaying if I am adding two draw functions. Please help me. Thanks so much.

HTML Code:

<html>
<head>
<script src="http://www.google.com/jsapi" type="text/javascript"></script>
<script src="../js/jquery-1.8.2.min.js" type="text/javascript" ></script>
<script src="../js/bootstrap.min.js" type="text/javascript" ></script>
<script src="../js/components/dashboard.js" type="text/javascript"></script>
</head>
<body>

<div id="dashboard-content" class="content">
<select id="dashboard-chart-type">
<option value="average" selected="selected">Average Installs</option>
<option value="total_install">Total Install</option>
<option value="total_uninstall">Total Uninstall</option>
</select>
<div id="visualization" style="width: 600px; height: 400px;"></div>

</div>

</body>

</html>

Javascript Code: /js/components/dashboard.js

$(document).ready(function(){
$('#dashboard-chart-type').change(function(){
var selectedVal = $(this).val();
alert(selectedVal);
});
switch(selectedVal) {

case "average":
alert("average");
$('#visualization').empty();
init();
break;
case "total_install":
alert("installs");
$('#visualization').empty();
init2();
break;
case "total_uninstall":
alert("uninstalls");
$('#visualization').empty();
init();
break;
default:
alert("default");
$('#visualization').empty();
init2();
break;
}

});

function init(){
drawColumnComboChart();

}
function init2(){
drawStackedChart();
}

google.load('visualization', '1', {packages: ['corechart']});

function drawColumnComboChart() {
// Create and populate the data table.
var data = google.visualization.arrayToDataTable([
['Month', 'USA', 'UK', 'Germany', 'India', 'China', 'Average'],
['2012/05', 165, 938, 522, 998, 450, 614.6],
['2012/06', 135, 1120, 599, 1268, 288, 682],
['2012/07', 157, 1167, 587, 807, 397, 623],
['2012/08', 139, 1110, 615, 968, 215, 609.4],
['2012/09', 136, 691, 629, 1026, 366, 569.6]
]);

// Create and draw the visualization.
var ac = new google.visualization.ComboChart(document.getElementById('visualization'));
ac.draw(data, {
title : 'Average Installs this year',
width: 600,
height: 400,
vAxis: {title: "Number"},
hAxis: {title: "Month"},
seriesType: "bars",
series: {5: {type: "line"}}
});
}

function drawStackedChart() {
// Some raw data (not necessarily accurate)
var data = google.visualization.arrayToDataTable([
['Month', 'Bolivia', 'Ecuador', 'Madagascar', 'Papua New Guinea', 'Rwanda'],
['2004/05', 165, 938, 522, 998, 450],
['2005/06', 135, 1120, 599, 1268, 288],
['2006/07', 157, 1167, 587, 807, 397],
['2007/08', 139, 1110, 615, 968, 215],
['2008/09', 136, 691, 629, 1026, 366]
]);

// Create and draw the visualization.
var ac = new google.visualization.AreaChart(document.getElementById('visualization'));
ac.draw(data, {
title : 'Monthly Coffee Production by Country',
isStacked: true,
width: 600,
height: 400,
vAxis: {title: "Cups"},
hAxis: {title: "Month"}
});
}

Reply all

Reply to author

Forward

0 new messages