Hi All,
Trying to get user input to update a chart.
I am working with the Visualisation API from non-programming
background and have run into difficulty trying to pass user input to
update a chart.
Please see the code below I have pulled together from code snippets
and changed for my use... it all works except for the updating part
which I'm sure I have not structured well. Would welcome comments as
to how to fix.
Thanks... Tony.
// Set the default view on chart when page opens to previous
month.... if current month is November we want to look at October.
// Because of column position in dataTable we have to add 2 to
get
current month therefore it's +1 to get last month.
// "2" is required in the array as column "2" displays the
horizontal axix titles
var currentdate = new Date();
var currentmonth = currentdate.getMonth()+1;
var x=[2, currentmonth];
// Create global variable to take input from Input Selection box
"query-1".
// This should then be passed to "x" and the chart redrawn with
new
parameters.
var userchange;
function drawVisualization() {
// Get data from Google Docs Spreadsheet and place in variable
called "query"
var query = new google.visualization.Query(
'https://docs.google.com/spreadsheet/ccc?
key=0Au7Q9U_2LFbMdFk4UUNRbUFwTWh6VXIyMDJJTE1NalE&#gid=0&range=A1:O50000');
// Send query to function handleQueryResponse to check it is
valid data
query.send(handleQueryResponse);
}
// if error then error message is displayed else valid query
function handleQueryResponse(response) {
if (response.isError()) {
alert('Error in query: ' + response.getMessage() + ' ' +
response.getDetailedMessage());
return;
}
// convert response to DataTable and place in var data
var data = response.getDataTable();
// set up a function called setValue to set the value of "x" in
ChartWrapper
// and call draw(data) to redraw Dashboard with new parameters
function setValue(thisValue) {
x.value=thisValue;
draw(data);
}
// Define the category picker control for the Year column
var categoryPicker2 = new
google.visualization.ControlWrapper({
'controlType': 'CategoryFilter',
'containerId': 'control2',
'options': {
'filterColumnLabel': 'Year',
'ui': {
'labelStacking': 'vertical',
'allowTyping': false,
'allowMultiple': false
}
},
//set the onLoad state for the Catergory Picker button
'state': {'selectedValues': ['2011']}
});
// Define the Column chart
var mychart = new google.visualization.ChartWrapper({
'chartType': 'ColumnChart',
'containerId': 'chart1',
'options': {
'width': 800,
'height': 500,
'isStacked': 'true',
'legend': 'right',
'hAxis': {
'textStyle': {'fontSize': 12},
'textPosition': 'out',
'slantedText': 'true',
'slantedTextAngle': 40},
'title': 'EMEA - % change month',
},
// Instruct the chart on what columns to use for display
// from the data in DataTable.
'view': {'columns': x}
});
// Define the Data Table to display
var table = new google.visualization.ChartWrapper({
'chartType': 'Table',
'containerId': 'chart2',
'view': {'columns': [2, 3, 4, 5, 6, 7, 8, 9, 10, 11, 12, 13,
14]},
'options': {
'width': 1220}
});
// Create the dashboard
new
google.visualization.Dashboard(document.getElementById('dashboard')).
// Establish bindings, declaring the category picker will
drive both the chart and the table
bind([categoryPicker2], [mychart, table]).
// Draw the entire dashboard.
draw(data);
}
google.setOnLoadCallback(drawVisualization);
</script>
</head>
<body style="font-family: Arial;border: 0 none;">
<div id="navigation">
<table width="600" border="0" cellpadding="0" cellspacing="0">
<tr style='height: 28px;'>
<td onMouseOver="this.bgColor='#2AABDF'"
onMouseOut="this.bgColor=''" width="150px" align="center"><a
href="Home.htm" style="color: #FFBF23"><b>Home</b></a></td>
<td onMouseOver="this.bgColor='#2AABDF'"
onMouseOut="this.bgColor=''" width="150px" align="center"><a
href="Sites.htm">Sites</a></td>
<td onMouseOver="this.bgColor='#2AABDF'"
onMouseOut="this.bgColor=''" width="150px" align="center"><a
href="Categories.htm">Categories</a></td>
<td onMouseOver="this.bgColor='#2AABDF'"
onMouseOut="this.bgColor=''" width="150px" align="center"><a
href="Expense.htm">Expense</a></td>
</tr>
</table>
</div>
<div id="dashboard">
<table border="1" width="1230" cellpadding="0" cellspacing="0">
<tr style='vertical-align: top'>
<td style='width: 410px;'>
<div id="control1"></div>
<div id="control2"></div>
<p></p>
<div id="test">
<table border="0" style="font-size: 12px; ">
<tr>
<td>Choose Period for Review</td>
<!-- create an input selection
box called "query-1" and onchange
set the value of "x" = selection//-->
<td><select id='query-1'
onchange='setValue(this.value)'>
<option value=''>None</option>
<option value='[2,
3]'>January</option>
<option value='[2,
4]'>February</option>
<option value='[2,
5]'>March</option>
<option value='[2, 3, 4,
5]'>Q1</option>
<option value='[2,
6]'>April</option>
<option value='[2,
7]'>May</option>
<option value='[2,
8]'>June</option>
<option value='[2, 6,
7, 8]'>Q2</option>
<option value='[2,
9]'>July</option>
<option value='[2,
10]'>August</option>
<option value='[2,
11]'>September</option>
<option value='[2, 9,
10, 11]'>Q3</option>
<option value='[2,
12]'>October</option>
<option value='[2,
13]'>November</option>
<option value='[2,
14]'>December</option>
<option value='[2, 12,
13, 14]'>Q2</option>
</select></td>
</tr>
</table>
</div>
</td>
<td style='width: 820px;'>
<div style="float: right;" id="chart1"></div>
</td>
</tr>
</table>
</div>
<div class="header" id="text">Overall Activity - EMEA</div>
<div id="chart_holder">
<table width="1230" border="1" cellpadding="0" cellspacing="0">
<tr>
<td>
<div id="chart2"></div>
</td></tr>
</table>
</div>
--
You received this message because you are subscribed to the Google Groups
"Google Visualization API" group.
To post to this group, send email to [email protected].
To unsubscribe from this group, send email to
[email protected].
For more options, visit this group at
http://groups.google.com/group/google-visualization-api?hl=en.
