Bug in setView with ChartWrapper

952 views
Skip to first unread message

NA

unread,
Jun 21, 2011, 12:13:02 PM6/21/11
to Google Visualization API
setView with objects doesn't seem to work. I couldn't even get the
example in the setView documentation to work.

Am I missing something? We've been trying to figure this out for hrs
now...

Code snippet to reproduce in the API playground below.


function drawVisualization() {
// Create and populate the data table.
var data = new google.visualization.DataTable();
data.addColumn('string', 'Name');
data.addColumn('number', 'Height');
data.addColumn('boolean', 'Smokes');
data.addRows(3);
data.setCell(0, 0, 'Tong Ning mu');
data.setCell(1, 0, 'Huang Ang fa');
data.setCell(2, 0, 'Teng nu');
data.setCell(0, 1, 174);
data.setCell(1, 1, 523);
data.setCell(2, 1, 86);
data.setCell(0, 2, true);
data.setCell(1, 2, false);
data.setCell(2, 2, true);

function myFunc(d,r){return d.getValue(r,0)}
w = new google.visualization.ChartWrapper();
v = new google.visualization.DataView(data);
v.setColumns([2,
{calc:myFunc,type:'string','label':'testcol'}]);
alert(v.toJSON()); //That doesn't look right!

w.setChartType('Table');
w.setDataTable(data);
w.setView(v.toJSON());
w.setContainerId('table');
w.draw();

}




Riccardo Govoni

unread,
Jun 21, 2011, 12:48:04 PM6/21/11
to google-visua...@googlegroups.com
I'm not sure what problem you're having. It works fine for me. Try this example http://jsfiddle.net/rYRD4/1/, where the table will show only column 0 out of all the columns in the input datatable.

Caveats:
dataview.toJSON() does not retain generated columns, as the documentation says (http://code.google.com/apis/chart/interactive/docs/reference.html#DataView_toJSON). That's why you lose your 'myFunc' column.

Note that if you don't pass through toJSON(), but pass a view specification directly to the chartwrapper, it will use your generated columns (see http://jsfiddle.net/rYRD4/2/) :
w.setView({columns: [0, {calc:myFunc,type:'string','label':'testcol'}]});

/R.

NA

unread,
Jun 21, 2011, 12:57:23 PM6/21/11
to Google Visualization API
That's not right, either. Your example only shows one column. It
should show 2:

v.setColumns([0, {calc:myFunc,type:'string','label':'testcol'}]);

Doesn't that notation say to show column #0 in the first column and a
calculated column in the second? Or have I misunderstood how this is
supposed to work?

Incidentally, I was able to get things working if I passed the view as
the data. But that didn't match the documentation.



On Jun 21, 12:48 pm, Riccardo Govoni <battleho...@gmail.com> wrote:
> I'm not sure what problem you're having. It works fine for me. Try this
> examplehttp://jsfiddle.net/rYRD4/1/, where the table will show only column
> 0 out of all the columns in the input datatable.
>
> Caveats:
> dataview.toJSON() does not retain generated columns, as the documentation
> says (http://code.google.com/apis/chart/interactive/docs/reference.html#Dat...).
> That's why you lose your 'myFunc' column.
>
> Note that if you don't pass through toJSON(), but pass a view specification
> directly to the chartwrapper, it will use your generated columns (seehttp://jsfiddle.net/rYRD4/2/) :

Riccardo Govoni

unread,
Jun 21, 2011, 1:03:11 PM6/21/11
to google-visua...@googlegroups.com
Sorry, I'm not following you.

The first example http://jsfiddle.net/rYRD4/1/ shows only one column (column 0) because the view going through toJSON() which discards the generated column.
The second example http://jsfiddle.net/rYRD4/2/ shows 2 columns (including a generated one) because the view is set explicitly.

If you set a DataView as the dataTable parameter for the chartwrapper it will obviously work because the filtering and column generation is done implicitly by the DataView the chartwrapper receives rather than explicitly by the ChartWrapper (if you were to use setView instead).

/R.

NA

unread,
Jun 21, 2011, 1:18:43 PM6/21/11
to Google Visualization API
Ok - I think the documentation is confusing. At least, I'm confused.

The notation to use with the ChartWrapper is:

array_of_columns_desired = [...]
wrapper.setView({columns:array_of_columns_desired}]

Passing ChartWrapper.setView() a DataView object, even *without* the
toJSON, doesn't seem to work. That's what I was trying to do, example
here: http://jsfiddle.net/rYRD4/4/

I had mistakenly assumed you could pass a DataView object to setView.
But that appears to be incorrect. I'll use the notation you had going
forward.

thanks,








On Jun 21, 1:03 pm, Riccardo Govoni <battleho...@gmail.com> wrote:
> Sorry, I'm not following you.
>
> The first examplehttp://jsfiddle.net/rYRD4/1/shows only one column (column
> 0) because the view going through toJSON() which discards the generated
> column.
> The second examplehttp://jsfiddle.net/rYRD4/2/shows 2 columns (including a

Riccardo Govoni

unread,
Jun 21, 2011, 1:28:32 PM6/21/11
to google-visua...@googlegroups.com
I understand that the documentation may be a little confusing. I'll see whether we can update it with some better wording.
To sum up, you can pass to setView:

a) a string as coming out from DataView.toJSON() (with the caveat that generated columns will be lost)

chartwrapper.setView(myDataView.toJSON()) should work, as in http://jsfiddle.net/rYRD4/1/ 

b) a plain javascript object containing the same representation as the above string, that is something like {rows: [0, 1, 2, 3], columns: [0, 1,  2, 3]} . In this case you can even pass in generated columns as there is no JSON serialization process that will destroy them.

you _can't_ pass in a google.visualization.DataView object.

To make things a little cleaner, the explanation for the logic above is that google.visualization.DataView represents the composition of data (the DataTable you pass in its constructor) and view criteria (row/column reordering, sorting, generation). ChartWrapper.setView() only utilizes the view criteria and not the data, since a ChartWrapper might receive the data from elsewhere (the dataTable parameter, a remote datasource via dataSourceUrl parameter and so on).

Hope this makes things a little bit cleaner,
/R.

NA

unread,
Jun 21, 2011, 1:45:47 PM6/21/11
to Google Visualization API
That makes perfect sense, thanks.

At one point I tried to create a DataView with:

new google.visualization.DataView(); // note the empty constructor

I was trying to resolve the DataView being a composition of it's own
data and view criteria. Incidentally, this errors. From here, I
tried passing in the DataView object, and you now know where I ended
up ;)

thanks again for the help and explanation. We made the tweaks needed,
and are running smoothly now.







On Jun 21, 1:28 pm, Riccardo Govoni <battleho...@gmail.com> wrote:
> I understand that the documentation may be a little confusing. I'll see
> whether we can update it with some better wording.
> To sum up, you can pass to setView:
>
> a) a string as coming out from DataView.toJSON() (with the caveat that
> generated columns will be lost)
>
> chartwrapper.setView(myDataView.toJSON()) should work, as inhttp://jsfiddle.net/rYRD4/1/
Reply all
Reply to author
Forward
0 new messages