Hi asgallant,
I've been following your posts for a while and they have been extremely
helpful so far. I'm doing something similar but a bit of a mix of this and
your example here <http://jsfiddle.net/asgallant/WaUu2/>, where you use the
categoryFilter to filter the columns in the datatable driving a chart.
I'm building a Dashboard that has multiple charts (using ChartWrapper) from
the same DatasourceUrl (Googlespreadsheet) but different sheets in that
spreadsheet. Anyhow, I'm not able get the the "columnsTable" to take the
returned data from query in the chartwrapper.
I've adapted my code to match your example
google.load('visualization', '1', {packages: ['controls']});
google.setOnLoadCallback(drawChart);
function drawChart () {
var Chart = new google.visualization.ChartWrapper({
chartType:'LineChart',
dataSourceUrl:
'https://docs.google.com/a/google.com/spreadsheet/ccc?key=1uWxegqnxB0ZxAl3FmiNuI00A09Vbir_W9RqxE-pGnRQ'
,
containerId:'chart_div',
query:'SELECT A,B,C,D,E where B is not null',
options:{
title: 'Calls Offered',
curveType: 'function',
theme:'maximized',
width: 550,
height: 300
}
});
var data = Chart.setView({[0,1,2,3]});
var columnsTable = new google.visualization.DataTable();
columnsTable.addColumn('number', 'colIndex');
columnsTable.addColumn('string', 'colLabel');
var initState= {selectedValues: []};
// put the columns into this data table (skip column 0)
for (var i = 1; i < data.getNumberOfColumns(); i++) {
columnsTable.addRow([i, data.getColumnLabel(i)]);
// you can comment out this next line if you want to have a default
selection other than the whole list
initState.selectedValues.push(data.getColumnLabel(i));
}
// you can set individual columns to be the default columns (instead of
populating via the loop above) like this:
// initState.selectedValues.push(data.getColumnLabel(4));
var columnFilter = new google.visualization.ControlWrapper({
controlType: 'CategoryFilter',
containerId: 'colFilter_div',
dataTable: columnsTable,
options: {
filterColumnLabel: 'colLabel',
ui: {
label: 'Columns',
allowTyping: false,
allowMultiple: true,
allowNone: false,
selectedValuesLayout: 'belowStacked'
}
},
state: initState
});
function setChartView () {
var state = columnFilter.getState();
var row;
var view = {
columns: [0]
};
for (var i = 0; i < state.selectedValues.length; i++) {
row = columnsTable.getFilteredRows([{column: 1, value: state.
selectedValues[i]}])[0];
view.columns.push(columnsTable.getValue(row, 0));
}
// sort the indices into their original order
view.columns.sort(function (a, b) {
return (a - b);
});
Chart.setView(view);
Chart.draw();
}
google.visualization.events.addListener(columnFilter, 'statechange',
setChartView);
setChartView();
columnFilter.draw();
}
I suspect the issue is either with t he fact that I'm using a query or the
line
var data = Chart.setView({[0,1,2,3]});
Please help
On Friday, June 1, 2012 at 9:26:43 AM UTC-4, asgallant wrote:
>
> The #setView method belongs to the ChartWrapper
> <https://developers.google.com/chart/interactive/docs/reference#chartwrapperobject>
>
> class (and nothing else, to my knowledge). The documentation for it really
> could use some examples, though.
>
> On Thursday, May 31, 2012 6:54:47 PM UTC-4, leglera wrote:
>>
>> asgallant,
>>
>> That is very helpful. I did finally figure out a more complicated
>> method to get the view from the datasource URL - this is much easier.
>>
>> FYI - the setView feature I cannot find anywhere in the Google
>> Developer site. Are there other references where it might reside?
>>
>> Thanks
>>
>> ABL
>>
>> On May 31, 4:45 pm, asgallant <[email protected]> wrote:
>> > Essentially, the #setView method takes an object as a parameter. The
>> > object can have either or both of 'rows' and 'columns' properties.
>> Each
>> > property is an array of row or column indices to include in the view,
>> ie:
>> >
>> > wrapper1.setView({columns:[0, 1, 2]}); // use the first three DataTable
>> > columns
>> > wrapper2.setView({rows: [0, 1, 2, 5]}); // use the first, second,
>> third,
>> > and sixth rows
>> >
>> > I have some live examples here:http://jsfiddle.net/asgallant/gzmn3/
>> >
>> >
>> >
>> >
>> >
>> >
>> >
>> > On Thursday, May 31, 2012 2:00:29 PM UTC-4, leglera wrote:
>> >
>> > > I am actually struggling with the same thing - I cannot get a data
>> view to
>> > > work with a source url.
>> >
>> > > The links asgallant posted do not help - does anyone have an example
>> of a
>> > > sourceurl that feeds a data view?
>> >
>> > > thanks,
>> >
>> > > ABL
>> >
>> > > On Thursday, September 22, 2011 6:52:36 AM UTC-4, pb wrote:
>> >
>> > >> Hi,
>> >
>> > >> I would like to filter data that is coming in from a sourceURL, i
>> > >> don't seem to understand the concept of needing to use setView() to
>> > >> bring imported data into a dataView. Can anyone give a clear and
>> > >> simple example of how this is done please? Amazed that this is
>> shown/
>> > >> written anywhere clear enough in the docs.
>> >
>> > >> Help is always appreciated in advance.
>> >
>> > >> pb
>
>
--
You received this message because you are subscribed to the Google Groups
"Google Visualization API" group.
To unsubscribe from this group and stop receiving emails from it, send an email
to [email protected].
To post to this group, send email to [email protected].
Visit this group at http://groups.google.com/group/google-visualization-api.
For more options, visit https://groups.google.com/d/optout.
