Hi Tony,
I've made some changes in your script.
The first thing I've done was to place the setValue function outside of the
"handleQueryResponse" function, so it can be accessed from within the HTML.
The second and most important thing was to call "the draw" function and not
"a draw" function (in order not to get the data every time, I placed the
data in a global variable).
Here is the code (without any comments, except for mine)
<script type="text/javascript">
var currentdate = new Date();
var currentmonth = currentdate.getMonth()+1;
var x=[2, currentmonth];
var data; // holds the datatable
function drawVisualization() {
var query = new google.visualization.Query('
https://docs.google.com/spreadsheet/ccc?key=0Au7Q9U_2LFbMdFk4UUNRbUFwTWh6VXIyMDJJTE1NalE&#gid=0&range=A1:O50000'
);
query.send(handleQueryResponse);
}
function handleQueryResponse(response) {
if (response.isError()) {
alert('Error in query: ' + response.getMessage() + ' ' +
response.getDetailedMessage());
return;
}
data = response.getDataTable(); // assigning the datable to the data
variable
drawCharts(); // calling the drawing function
}
// new function that holds all drawing
function drawCharts() {
var categoryPicker2 = new google.visualization.ControlWrapper({
'controlType': 'CategoryFilter',
'containerId': 'control2',
'options': {
'filterColumnLabel': 'Year',
'ui': {
'labelStacking': 'vertical',
'allowTyping': false,
'allowMultiple': false
}
},
'state': {'selectedValues': ['2011']}
});
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',
},
'view': {'columns': x}
});
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
}
});
new google.visualization.Dashboard(document.getElementById('dashboard')).
bind([categoryPicker2], [mychart, table]).
draw(data);
}
// setting the value and calling the drawing function
function setValue(thisValue) {
x = eval(thisValue); // assigning the real array (as passed by the dropdown)
drawCharts(); // calling the drawing function
}
google.setOnLoadCallback(drawVisualization);
</script>
hope that this is what you meant :-)
On Thu, Nov 3, 2011 at 1:34 PM, Tony Holmes <[email protected]>wrote:
> Hi Roni
>
> thanks for your quick comments.... this might make it more clear as to
> what I am trying to achieve... I have uploaded the pages to
> http://members.upc.ie/tony.holmes/Home.htm .... It might make the code
> more readable if you look at the page source... hopefully it is not
> such a mess.
>
> I had a look at the dependent controls but I'm not sure this would
> work in this case as they are "filtering" the column data in the
> underlying DataTable.
>
> In my scenario the underlying DataTable does not change. What I want
> to do is look at the figures say for July, then maybe look at August
> or Q3 [July, August, September] for example... i.e. I want to change
> the view.columns in the chart object.... 'view': {'columns': x}
> where "x" is the array that hold the parameters.
>
> Regards
> Tony
>
>
> On Nov 3, 10:46 am, Roni Biran <[email protected]> wrote:
> > indeed it looks like a big mass....
> > what did you try to do? changing the chart upon selecting an option from
> > the drop down?
> >
> > If so, I suggest that you'll look on this samplehttp://
> code.google.com/apis/ajax/playground/?type=visualization#depen...
> > (a
> > cascading dependent controls)
> >
> > pay attention to the followings:
> > 1. you cannot call the draw function just like that. this function is a
> > function that runs on an object (dashboard in your case).
> > 2. look at the bindings of the dropdowns in regard to the dashboard and
> the
> > other pickers
> >
> > good luck with that,
> >
> > On Thu, Nov 3, 2011 at 12:21 PM, Tony Holmes <[email protected]
> >wrote:
> >
> >
> >
> >
> >
> >
> >
> > > 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.
>
> --
> 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.
>
>
--
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.
