Re: Google charts - Change title of chart when dropdown/category filter selection changes?

asgallant

unread,

Jul 20, 2012, 12:02:57 PM7/20/12

to google-visua...@googlegroups.com

It is certainly doable. You need to set up "statechange" event handlers for the CategoryFilters which get the selected values from the filters and use them to change the chart's "title" option and redraw the chart. Here is an example in action: http://jsfiddle.net/asgallant/Vct87/3/

Note that I added fudged data to your dataTable to make the filters work better.

On Friday, July 20, 2012 10:18:09 AM UTC-4, Robert Fry wrote:

I'm struggling to work out whether it is possible to update a chart's title when a selection is made from a drop down in the Google chart-wrapper.

I have a large data set where I am looking at commuting patterns between one area and another, so a user will select an area they are interested in and the chart will change to reflect data for their area. The problem run to a dead end on (and it may not be possible) is working out how to change the title of the chart to include the selected areas name.

Any suggestions anyone has would be much appreciated. I've had a good search but can't work out whether it's doable?

Code below:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="content-type" content="text/html; charset=utf-8"/>
<style>
.google-visualization-controls-categoryfilter { color: red }
.goog-menu-vertical { max-height: 300px; overflow-y: auto;}
</style>

<title>
Commute-APS
</title>
<script type="text/javascript" src="http://www.google.com/jsapi"></script>
<script type="text/javascript">
google.load('visualization', '1.1', {packages: ['controls']});
</script>
<script type="text/javascript">
function drawVisualization() {
// Prepare the data
var data = new google.visualization.DataTable();
data.addColumn('string', 'Direction');
data.addColumn('string', 'Residence');
data.addColumn('string', 'Workplace');
data.addColumn('number', 'Proportion');
data.addColumn({type:'number', role:'interval'});
data.addColumn({type:'number', role:'interval'});
data.addRows([
['Inward', 'City of London', 'Tower Hamlets', 7.35, 6.2, 8.55],
['Inward', 'City of London', 'Newham', 5.63, 4.6, 6.63],
['Inward', 'City of London', 'Wandsworth', 4.6, 3.4, 5.84],
['Inward', 'City of London', 'Redbridge', 4.48, 3.5, 5.41],
['Inward', 'City of London', 'Waltham Forest', 4.15, 3.3, 5.02],
['Inward', 'City of London', 'Southwark', 3.65, 2.6, 4.73],
['Inward', 'City of London', 'Westminster', 3.55, 2.4, 4.71],

['Outward', 'Wyre Forest', 'Shropshire', 10.34, 0, 12.67],
['Outward', 'Wyre Forest', 'Wolverhampton', 3.84, 0, 4.49],
['Outward', 'Wyre Forest', 'Tamworth', 1.83, 0, 4.44],
['Outward', 'Wyre Forest', 'Herefordshire, County of', 1.48, 0, 3.3],
['Outward', 'Wyre Forest', 'Warwick', 0.78, 0, 1.3],
['Outward', 'Wyre Forest', 'East Staffordshire', 0.7, 0, 1.4red8]


]);



// Define a category picker control for the Gender column
var categoryPicker = new google.visualization.ControlWrapper({
'controlType': 'CategoryFilter',
'containerId': 'control2',
'options': {
'filterColumnLabel': 'Residence',
'ui': {
'labelStacking': 'vertical',
'allowTyping': false,
'allowMultiple': false,
height: 100
}
},
'state': {'selectedValues': ['City of London']}
});


var categoryPicker2 = new google.visualization.ControlWrapper({
'controlType': 'CategoryFilter',
'containerId': 'control3',
'options': {
'filterColumnLabel': 'Direction',
'ui': {
'labelStacking': 'vertical',
'allowTyping': false,
'allowMultiple': false,
height: 100
}
},
'state': {'selectedValues': ['Outward']}
});


// Define a Bar chart
var chart = new google.visualization.ChartWrapper({
'chartType': 'BarChart',
'containerId': 'chart1',
'options': {
'width': 700,
'height': 700,
'vAxis': {textStyle: {fontSize:12, fontName:'Arial'}, viewWindow:{max:10}},
'hAxis': {maxValue: 80, minValue:0},

animation:{
duration: 1000,
easing: 'out'
},
'legend': 'none',
'title': 'Outward commuting'

},
// Instruct the barchart to use columns 2, 3, 4 and 5
// from the 'data' DataTable.
'view': {'columns': [2, 3, 4, 5]}
});


// Create a dashboard
new google.visualization.Dashboard(document.getElementById('dashboard')).
// Establish bindings, declaring the both category pickers
// picker will drive the chart.
bind(categoryPicker, categoryPicker2).
bind(categoryPicker2, chart).
// Draw the entire dashboard.
draw(data);
}


google.setOnLoadCallback(drawVisualization);
</script>
</head>
<body style="font-family: Arial;border: 0 none;">

<div id="dashboard">
<table>
<tr style='vertical-align: top'>
<td style='width: 250px; height: 75px; font-size: 0.9em;'>

<div id="control2"></div>
<div id="control3"></div>
<div style="float: top;" id="chart1"></div>
</td>
</tr>
</table>
</div>
</body>
</html>

rio

unread,

Jul 24, 2012, 1:43:28 AM7/24/12

to google-visua...@googlegroups.com

i did this via creation of a options array that match the data array pretty much i have a counter that shows which data-set is being loaded.

each options array will need to have title that come from the database

echo "data[0] = {}"
echo "data[1] = {}"

echo "option[0] = {titleTextStyle: {title"{YOUR TITLE1}}"
echo "option[1] = {titleTextStyle: {title"{YOUR TITLE2}}"

Then simply


   chart.draw(data[current], options[current]);

rio

unread,

Jul 24, 2012, 1:48:42 AM7/24/12

to google-visua...@googlegroups.com

the options should contain the full set of chart layouts..

I did try chart.draw(data[current], options, options[current]);

where options contains the default chart settings and options[current] contains settings only for that particular instance, but i didn't work.. In theory the 2nd options should override the first.

asgallant

unread,

Jul 24, 2012, 10:24:57 AM7/24/12

to google-visua...@googlegroups.com

No, in theory the second options would be ignored unless the API expects a 3rd parameter, which it doesn't. You would need to merge the base options with the selection-specific options first, ie:

Reply all

Reply to author

Forward