Hi,
I'm using google Geo chart to display location based data in cities
(markers ) format.
I'm using the same data to plot a table chart side by side.
My aim is to click on the row in the table chart and the corresponding
location marker must be highlighted.
var len = cityData.cities.length;
// Data
var data = new google.visualization.DataTable();
data.addColumn('string', 'City');
data.addColumn('number', 'subscriber');
for (var i = 0; i < len; i++) {
data.addRow([cityData.cities[i],
Number(cityData.subs[i])]);
}
}
// Options
var options = {
fontName: 'Roboto',
height: 400,
width: "70%",
fontSize: 12,
tooltip: {
textStyle: {
fontName: 'Roboto',
fontSize: 13
}
},
displayMode: 'markers',
colorAxis: {
colors: ['#BBDEFB', '#1976D2']
},
};
var cssClassNames = {
headerRow: 'header-row-style',
tableRow: 'row-style',
oddTableRow: 'odd-row-style',
headerCell: 'header-cell-style',
tableCell: 'custom-table-td'
};
var options_table = {
allowHtml: true,
page: 'enable',
pageSize: 10,
// height: '250px',
width: '80%',
tooltip: {isHtml: true},
showRowNumber: false,
cssClassNames: cssClassNames
};
// Draw table chart
var table = new google.visualization.Table($('#geo-table')[0]);
table.draw(data, options_table);
// Draw Geo chart
chart = new
google.visualization.GeoChart($('#google-geo-region')[0]);
chart.draw(data, options);
I've imported current packages of both
google.charts.load("current", {
packages: [
"geochart",
"table"
],
separate divs in html for both of them,
<div id="geo-table"></div>
<div id="google-geo-region"> </div>
Please help me out with the code that I can use for handling such
requirement, fairly new to Javascript.
--
You received this message because you are subscribed to the Google Groups
"Google Chart 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 https://groups.google.com/group/google-chart-api.
For more options, visit https://groups.google.com/d/optout.
