Hi! I'm afraid I won't be able to help that much, but you might want to
keep an eye on this thread
(https://groups.google.com/forum/#!topic/google-visualization-api/N8gkSO7iqYc)
as I think thats what you're after.
The map example you've linked isn't adjusting the data in the map once the
table is clicked, just relocating the camera so to speak. The way that I
would approach your problem would be to have a pie chart that shows the
percent win/draw/lost across all the data in the table, and then when the
table is clicked, use the selection that is made in the table to apply a
filter to the underlying data. Although now thinking about it that might be
easier than I thought (here goes, a bit of a brain dump so might get
messy...)
The map example is using this code to relocate the map:
google.visualization.events.addListener(table, 'select',
function() {
map.setSelection(table.getSelection());
});
So what you could do is within the select listener for your table, grab
your underlying dataset, apply a dataview to it with an appropriate filter,
then set your piechart to the new dataset. So something like (this is
pseudo code - it won't work!):
var chart1 = new google.visualization.ChartWrapper({
'chartType': 'PieChart',
'containerId': 'chart1_div',
});
google.visualization.events.addListener(table, 'select',
function() {
var dt = table.getDataTable();
var chart1view = new google.visualization.DataView(dt);
chart1view.setRows(dt.getFilteredRows({ column: 1, value: table.
getSelection() }));
chart1.setDataTable(chart1view);
chart1.draw;
});
In *theory* I think this method is sound - you might have to dig out some
examples to get the code right. I've included that piechart code as I think
you need to create the chart in a ChartWrapper for this to work.
Its all probably a load of rubbish, but hope it helps a bit!
On Wednesday, 26 November 2014 10:12:12 UTC, Bert Hollander wrote:
>
> Hi there,
> I've got quite a difficult question. For my local club, I have got one
> table with data (statistics) which I want to show per row.
> When clicking or hovering on each row, I would like a pie chart to show up
> next to it.
> For example in the Examples
> <https://developers.google.com/chart/interactive/docs/examples#full_html_page_example>,
>
> each row in the table is connected to the Google Map.
> Assuming this is part of the data:
> var Data = new google.visualization.DataTable();
> Data.addColumn('string', 'Name');
> Data.addColumn('string', 'Won');
> Data.addColumn('string', 'Draw');
> Data.addColumn('string', 'Lost');
> Data.addRows([
> ['Jan Jansen', '48', '32' ,'25'],
> ['Kees de Vries', '49', '28' ,'23'],
> ['Sem Smit', '41', '31' ,'35']
> ]);
> ... I would like a pie chart (as in http://jsfiddle.net/qh5z4etw/)
> showing the percentages/number, when you hover/click over one of the rows
> in the table.
> Is this even possible, or should the data be in another shape?
> Thanks for any help in advance,
> Bert
>
--
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.
