ChartWrapper's don't have a #getSelection method, you have to use the
#getChart method and then use #getSelection on the chart:
// Listener auf Table
google.visualization.events.addListener(table, 'select', function() {
map1.getChart().setSelection(table.getChart().getSelection());
});
// Listener von Select Table auf Karte anzeigen der Koordinaten
google.visualization.events.addListener(map1, 'select', function() {
table.getChart().setSelection(map1.getChart().getSelection());
});
I suspect that this will still cause you problems, though, as tables'
selection only contains a "row" parameter, while most charts expect both
"row" and "column" parameters. Also, the tables have a bug (as of the last
time I checked), that causes them to act strangely when you pass a
selection element that contains a "column" parameter. So a proper solution
will look more like this:
// Listener auf Table
google.visualization.events.addListener(table, 'select', function() {
var tableSel = table.getChart().getSelection();
var mapSel = [];
for (var i = 0; i < tableSel.length; i++) {
mapSel[i] = {
row: tableSel[i].row,
column: <column to select>
};
}
map1.getChart().setSelection(mapSel);
});
// Listener von Select Table auf Karte anzeigen der Koordinaten
google.visualization.events.addListener(map1, 'select', function() {
var tableSel = [];
var mapSel = map1.getChart().getSelection();
for (var i = 0; i < mapSel.length; i++) {
tableSel[i] = {
row: mapSel[i].row
};
}
table.getChart().setSelection(tableSel);
});
On Friday, February 8, 2013 5:08:40 AM UTC-5, Stephan Trapp wrote:
>
> Hi @all,
>
> I have implement an dashboard with some Charts and integrate a Google Map
> , all is fine but only one prblem is the select handler if i select a row
> in the table the map sould show the position of the city.
> Here the code , the event does have no effect can you help ? thank you.
>
>
> <script type="text/javascript" src="http://www.google.com/jsapi";></script>
> <script type="text/javascript">
> google.load('visualization', '1', {packages: ['controls','map']});
> </script>
> <script type="text/javascript">
>
> function drawVisualization() {
> // Festgelegter Datensatz
> var data = google.visualization.arrayToDataTable([
> ['Weiterbildungsbereich', 'Zugangsvorraussetzung','',
> 'Weiterbildungsschule','Lat','Lon','Webseite / Wissenskarte', 'Empfehlung'],
> ['Aufbaukurs in der häuslichen Pflege' , 'Nein','<p><img
> src="images/Zugang_No.gif" width="30" height="30" align="middle"
> alt="Zugang_Nein"></p>', 'Krankenpflegeschule Siegen', 50.8838492,
> 8.0209591,'<a href="">Webseite</a><a href="Index_neu.htm">Karte</a>', 1],
> ['Weiterbildung Behandlungspflege', 'Ja','<p><img
> src="images/Zugang_Yes.gif" width="30" height="30" align="middle"
> alt="Zugang_Nein"></p>', 'Altenpflegeschule Limburg',50.3859809,
> 8.0646718,'<a href="">Webseite</a><a href="Index_neu.htm">Karte</a>', 3],
> ['Basisqualifikation für Altenpflege', 'Nein','<p><img
> src="images/Zugang_No.gif" width="30" height="30" align="middle"
> alt="Zugang_Nein"></p>', 'Rheinisches Bildungszentrum
> Gesundheitswesen',50.9522622, 6.9002256,'<a href="">Webseite</a><a
> href="Index_neu.htm">Karte</a>', 3],
> ['Psychatrische Zusatzqualifikation', 'Nein','<p><img
> src="images/Zugang_No.gif" width="30" height="30" align="middle"
> alt="Zugang_Nein"></p>', 'Marburger Akademie',50.8021728, 8.7667933,'<a
> href="">Webseite</a><a href="Index_neu.htm">Karte</a>', 2],
> ['Aufbaukurs A...', 'Ja','<p><img src="images/Zugang_Yes.gif"
> width="30" height="30" align="middle" alt="Zugang_Nein"></p>', 'Fachschule
> für...',50.9343237,6.9884864,'<a href="">Webseite</a><a
> href="Index_neu.htm">Karte</a>', 6],
> ['Aufbaukurs B..', 'Nein','<p><img src="images/Zugang_No.gif"
> width="30" height="30" align="middle" alt="Zugang_Nein"></p>','Institut
> für...',51.31681,6.5712,'<a href="">Webseite</a><a
> href="Index_neu.htm">Karte</a>', 1],
> ['Aufbaukurs C..', 'Ja','<p><img src="images/Zugang_Yes.gif"
> width="30" height="30" align="middle" alt="Zugang_Nein"></p>','Fachschule A
> für...',52.8325977,13.8176263,'<a href="">Webseite</a><a
> href="Index_neu.htm">Karte</a>', 4],
> ['Aufbaukurs D..', 'Nein','<p><img src="images/Zugang_No.gif"
> width="30" height="30" align="middle" alt="Zugang_Nein"></p>','Fachschule B
> für...',49.9881594,8.2282662,'<a href="">Webseite</a><a
> href="Index_neu.htm">Karte</a>', 1]
> ]);
>
> // Sliderfilter
> var slider = new google.visualization.ControlWrapper({
> 'controlType': 'NumberRangeFilter',
> 'containerId': 'control1',
> 'options': {
> 'filterColumnLabel': 'Empfehlung',
> 'ui': {'labelStacking': 'vertical'}
> }
> });
>
> // Kategoriefilter nach Anforderungszugang
> var categoryPicker = new google.visualization.ControlWrapper({
> 'controlType': 'CategoryFilter',
> 'containerId': 'control2',
> 'options': {
> 'filterColumnLabel': 'Zugangsvorraussetzung',
> 'ui': {
> 'labelStacking': 'vertical',
> 'allowTyping': false,
> 'allowMultiple': false,
> 'caption': 'Bitte auswählen',
> }
> }
> });
> // Definitionsbereich Visualisierungstypen -----------------
> // Pie chart
> var pie = new google.visualization.ChartWrapper({
> 'chartType': 'PieChart',
> 'containerId': 'chart1',
> 'options': {
> 'width': 400,
> 'height': 300,
> 'legend': 'yes',
> 'is3D': 'true',
> 'title': 'Weiterbildungsbereich',
> 'chartArea': {'left': 15, 'top': 15, 'right': 50, 'bottom':
> 50, 'width':2000},
> },
> // Definiert die Auswahl und Bildung des PieCharts an
> Tabellenspalte // Defenierung des Ausschnittbereichs des Charts pro
> Visualisierungsdiagramm
> 'view': {'columns': [0, 7]}
> });
>
>
> // Tabellendefinition
> var table = new google.visualization.ChartWrapper({
> 'chartType': 'Table',
> 'containerId': 'chart2',
> 'options': {
> 'width': '1000px',
> 'allowHtml': true,
> }
> });
> // BarChart definieren
> var barchart = new google.visualization.ChartWrapper({
> 'chartType': 'BarChart',
> 'containerId': 'chart3',
> 'options': {
> 'width': 400,
> 'height': 300
> },
> 'view': {'columns': [0, 7]} // Definierung des Ausschnittbereichs des
> Charts pro Visualisierungsdiagramm
> });
> // Google Map definieren
> var map1 = new google.visualization.ChartWrapper({
> 'chartType': 'Map',
> 'containerId': 'map1',
> 'view': { 'columns': [4, 5]}
> });
> // Listener auf Table
> google.visualization.events.addListener(table, 'select',
> function() {
> map1.setSelection(table.getSelection());
> });
>
> // Listener von Select Table auf Karte anzeigen der Koordinaten
> google.visualization.events.addListener(map1, 'select',
> function() {
> table.setSelection(map1.getSelection());
> });
> // Definitionsbereich Visualisierungstypen -----------------
> // Dasboard erstellen und alle Visualisierungstypen binden
> new
> google.visualization.Dashboard(document.getElementById('dashboard')).
> // Zuweisung und Anbindung aller Filter und
> Visualisierungstypen
> bind([slider, categoryPicker], [pie, table, barchart,map1]).
> // Zeichne Dashboard mit allen Charts
> draw(data);
>
> google.setOnLoadCallback(drawVisualization);
>
> </script>
> </head>
> <body style="font-family: Arial;border: 0 none;">
> <div><img src="images/Lupe.png" width="50" height="50"
> align="absbottom"> <input name="textfield" type="text" value="Suche nach
> Weiterbildung / Jobs..." size="40">
> </div>
>
> <div id="dashboard">
> <table width="100%" height="100" border="0" bgcolor="#FFFFFF">
> <tr>
> <td bgcolor="#FFFFFF" style='width:600px'><div style="float:
> left;" id="chart2"></div> </td>
> <td bgcolor="#FFFFFF"><div style="position:absolute; top:0
> "id="control1"></div> </td>
> <td bgcolor="#FFFFFF"><div style="position:absolute;
> right:auto; top:0 "id="control2"></div> </td>
> </tr>
> </table>
>
> <table width="100%" border="0" bgcolor="#FFFFFF">
> <tr>
> <td><div id="chart3"></div></td>
> <td><div id="chart1"></div></td>
> <td><div id="map1"></div></td>
> </tr>
> </table>
> <p> </p>
> <p> </p>
> </div>
> </body>
> </html>
>
>
--
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?hl=en.
For more options, visit https://groups.google.com/groups/opt_out.
