[visualization-api] Re: chartWrapper and dataView

[Malik Al-Malik]

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

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.

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

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,
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/

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

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

[Malik Al-Malik]

nevermind, i figured it out.
It turns out, it is the query in the Chartwrapper that appears to be the
problem. There may be a better way but I had to send the query in a
separate function and use a handleQueryResponse function to putit into a
datatable and do everything else

here is the new code
google.load('visualization', '1', {packages: ['controls']});
google.setOnLoadCallback(initialize);


function initialize() {
var opts = {sendMethod: 'auto'};
// Replace the data source URL on next line with your data source URL.
var query = new
google.visualization.Query('https://docs.google.com/a/google.com/spreadsheet/ccc?key=1uWxegqnxB0ZxAl3FmiNuI00A09Vbir_W9RqxE-pGnRQ',
opts);

// Optional request to return only column C and the sum of column B,
grouped by C members.
query.setQuery('select A,B,C,D,E where B is not null');

// Send the query with a callback function.
query.send(handleQueryResponse);
}

function handleQueryResponse(response) {
// Called when the query response is returned.

if (response.isError()) {
alert('Error in query: ' + response.getMessage() + ' ' +
response.getDetailedMessage());
return;
}

var data = response.getDataTable();

var Chart = new google.visualization.ChartWrapper({
chartType:'LineChart',
dataTable:data,
containerId:'chart_div',
options:{
title: 'Calls Offered',
curveType: 'function',
theme:'maximized',
width: 550,
height: 300
}
});



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: 'aside'
}
},
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();
}

Thanks.

Now I just need to figure out how to do this with a bunch or charts from
different sheets in the same Spreadsheet using the same filter (same
headers).

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

[joseph mutisya]

Hey aggalant. I have an urgent issue based on this:
http://stackoverflow.com/q/39260180/6780629

could you kindly have a look? cheers

Do these help?
http://code.google.com/apis/chart/interactive/docs/datatables_dataviews.html#datatablesdataviews
http://code.google.com/apis/chart/interactive/docs/reference.html#DataView
http://code.google.com/apis/ajax/playground/?type=visualization#simple_data_view
http://code.google.com/apis/ajax/playground/?type=visualization#another_data_view