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.
