Google Chart: Date Format - google-apps-script

I'm trying to make a Google chart, I'm getting an error in the date that is overlapping. I have no idea how to make it work. Column A must be defined as the columnfilterindex...
Anyone does this before?
This is the visualization.
This is the database
<html>
<head>
<!--Load the AJAX API-->
</head>
<body style="font-family: Arial;border: 0 none;">
<div id="dashboard" style="width:1300px;overflow:scroll;">
<div id="chart" style="position: relative; width: 1300px; height: 400px;"></div>
<div id="control" style="position: relative; width: 1300px; height: 100px;"></div>
</div>
<div id="junk_div" style="display: none;"></div>
<script type="text/javascript">
var data;
var dataTable;
var dashboard;
google.load("jquery", "1.4.2");
google.load("visualization", "1.1", {packages:["controls,corechart, table"]});
google.setOnLoadCallback(drawVisualization);
function setupData(){
var control = new google.visualization.ControlWrapper({
'controlType': 'ChartRangeFilter',
'containerId': 'control',
'options': {
// Filter by the date axis.
'filterColumnIndex': 0,
'ui': {
// 'chartType': 'BarChart',
'chartOptions': {
'chartArea': {'width': '90%'},
'hAxis': {'format': 'dd/MM/yyyy'}
},
'chartView': {
'columns': [ 0, 1, 3]
}
}
},
});
//then reverse the process in the ChartWrapper's view.columns:
var chart = new google.visualization.ChartWrapper({
'chartType': 'ScatterChart',
'containerId': 'chart',
'options': {
'filterColumnIndex': 0,
'pointSize': 2,
// Use the same chart area width as the control for axis alignment.
'chartArea': {'height': '80%', 'width': '90%'},
'hAxis': {'format': 'dd/MM/yyyy'},
// 'vAxis': {'viewWindow': {'min': 0, 'max': 20}},
'legend': {'position': 'none'}
},
view: {
columns: [ 0, 1, 3]
}
});
// console.log('label: ' + data.getColumnLabel(0));
dashboard.bind(control, chart);
dashboard.draw(data);
}
function drawVisualization() {
dataTable = new google.visualization.DataTable();
// var dateFormatter = new google.visualization.DateFormat({pattern: 'dd/MM/yyyy'});
// dateFormatter.format(data, 0);
// data.addColumn('date', 0);
dashboard = new google.visualization.Dashboard(document.getElementById('dashboard'));
var query = new google.visualization.Query('https://docs.google.com/spreadsheets/d/1MnnVAMNIbhNZbNXfGWl4iLN8ebCXnybo4usIQOSBcDQ/edit#gid=0');
query.setQuery("select A,B,C,D where A is not null");
query.send(handleQueryResponse);
}
function handleQueryResponse(response) {
if (response.isError()) {
alert('Error in query: ' + response.getMessage() + ' ' + response.getDetailedMessage());
return;
}
data = response.getDataTable();
setupData();
}
</script>
</body>
</html>


for starters, it is recommended to use loader.js to load the chart library
vs. the older jsapi
next, each package needs to be listed separately...
packages: ['controls', 'corechart', 'table']
other than that, something like this should work...
google.charts.load('current', {
callback: function () {
var query = new google.visualization.Query('https://docs.google.com/spreadsheets/d/1MnnVAMNIbhNZbNXfGWl4iLN8ebCXnybo4usIQOSBcDQ/edit#gid=0');
query.setQuery('select A,B,C,D where A is not null');
query.send(function (response) {
if (response.isError()) {
console.log('Error in query: ' + response.getMessage() + ' ' + response.getDetailedMessage());
return;
}
var control = new google.visualization.ControlWrapper({
controlType: 'ChartRangeFilter',
containerId: 'control',
options: {
filterColumnIndex: 0,
ui: {
chartOptions: {
chartArea: {width: '90%'},
hAxis: {format: 'dd/MM/yyyy'}
},
chartView: {
columns: [ 0, 1, 3]
}
}
}
});
var chart = new google.visualization.ChartWrapper({
chartType: 'ScatterChart',
containerId: 'chart',
options: {
filterColumnIndex: 0,
pointSize: 2,
chartArea: {height: '80%', 'width': '90%'},
hAxis: {format: 'dd/MM/yyyy'},
legend: {position: 'none'}
},
view: {
columns: [ 0, 1, 3]
}
});
dashboard = new google.visualization.Dashboard(document.getElementById('dashboard'));
dashboard.bind(control, chart);
dashboard.draw(response.getDataTable());
});
},
packages: ['controls', 'corechart', 'table']
});
<script src="https://www.gstatic.com/charts/loader.js"></script>
<div id="dashboard" style="width:1300px;overflow:scroll;">
<div id="chart" style="position: relative; width: 1300px; height: 400px;"></div>
<div id="control" style="position: relative; width: 1300px; height: 100px;"></div>
</div>

Related

Broken Route & Unclickable Locations on Embedded Map

The route found on the embedded google map at the URL below is broken and I would like it to be continuous.
The locations found on the same map are unclickable and I would like them to be clickable.
Map here: https://www.theafricamonth.com/trail1-1 or code below.
Would greatly appreciate someone to shed some knowledge on this. Thanks in advance.
<script src="//maps.googleapis.com/maps/api/js?key=AIzaSyDTIfL5nxelK1h8HKkrUDkMn1emcLh-S4I&extension=.js"></script>
<script src="//cdn.mapkit.io/v1/infobox.js"></script>
<link href="//fonts.googleapis.com/css?family=Roboto:300,400" rel="stylesheet">
<link href="//cdn.mapkit.io/v1/infobox.css" rel="stylesheet" >
<script>
google.maps.event.addDomListener(window, 'load', init);
var map, markersArray = [];
function bindInfoWindow(marker, map, location) {
google.maps.event.addListener(marker, 'click', function() {
function close(location) {
location.ib.close();
location.infoWindowVisible = false;
location.ib = null;
}
if (location.infoWindowVisible === true) {
close(location);
} else {
markersArray.forEach(function(loc, index) {
if (loc.ib && loc.ib !== null) {
close(loc);
}
});
var boxText = document.createElement('div');
boxText.style.cssText = 'background: #fff;';
boxText.classList.add('md-whiteframe-2dp');
function buildPieces(location, el, part, icon) {
if (location[part] === '') {
return '';
} else if (location.iw[part]) {
switch (el) {
case 'photo':
if (location.photo) {
return '<div class="iw-photo" style="background-image: url(' + location.photo + ');"></div>';
} else {
return '';
}
break;
case 'iw-toolbar':
return '<div class="iw-toolbar"><h3 class="md-subhead">' + location.title + '</h3></div>';
break;
case 'div':
switch (part) {
case 'email':
return '<div class="iw-details"><i class="material-icons" style="color:#4285f4;"><img src="//cdn.mapkit.io/v1/icons/' + icon + '.svg"/></i><span>' + location.email + '</span></div>'
break;
case 'web':
return '<div class="iw-details"><i class="material-icons" style="color:#4285f4;"><img src="//cdn.mapkit.io/v1/icons/' + icon + '.svg"/></i><span>' + location.web_formatted + '</span></div>';
break;
case 'desc':
return '<label class="iw-desc" for="cb_details"><input type="checkbox" id="cb_details"/><h3 class="iw-x-details">Details</h3><i class="material-icons toggle-open-details"><img src="//cdn.mapkit.io/v1/icons/' + icon + '.svg"/></i><p class="iw-x-details">' + location.desc + '</p></label>';
break;
default:
return '<div class="iw-details"><i class="material-icons"><img src="//cdn.mapkit.io/v1/icons/' + icon + '.svg"/></i><span>' + location.part + '</span></div>';
break;
}
break;
case 'open_hours':
var items = '';
if (location.open_hours.length > 0) {
for (var i = 0; i < location.open_hours.length; ++i) {
if (i !== 0) {
items += '<li><strong>' + location.open_hours[i].day + '</strong><strong>' + location.open_hours[i].hours + '</strong></li>';
}
var first = '<li><label for="cb_hours"><input type="checkbox" id="cb_hours"/><strong>location.open_hours[0].day</strong><strong>' + location.open_hours[0].hours + '</strong><i class="material-icons toggle-open-hours"><img src="//cdn.mapkit.io/v1/icons/keyboard_arrow_down.svg"/></i><ul>' + items + '</ul></label></li>';
}
return '<div class="iw-list"><i class="material-icons first-material-icons" style="color:#4285f4;"><img src="//cdn.mapkit.io/v1/icons/' + icon + '.svg"/></i><ul>' + first + '</ul></div>';
} else {
return '';
}
break;
}
} else {
return '';
}
}
boxText.innerHTML = buildPieces(location, 'photo', 'photo', '') + buildPieces(location, 'iw-toolbar', 'title', '') + buildPieces(location, 'div', 'address', 'location_on') + buildPieces(location, 'div', 'web', 'public') + buildPieces(location, 'div', 'email', 'email') + buildPieces(location, 'div', 'tel', 'phone') + buildPieces(location, 'div', 'int_tel', 'phone') + buildPieces(location, 'open_hours', 'open_hours', 'access_time') + buildPieces(location, 'div', 'desc', 'keyboard_arrow_down');
var myOptions = {
alignBottom: true,
content: boxText,
disableAutoPan: true,
maxWidth: 0,
pixelOffset: new google.maps.Size(-140, -40),
zIndex: null,
boxStyle: {
opacity: 1,
width: '280px'
},
closeBoxMargin: '0px 0px 0px 0px',
infoBoxClearance: new google.maps.Size(1, 1),
isHidden: false,
pane: 'floatPane',
enableEventPropagation: false
};
location.ib = new InfoBox(myOptions);
location.ib.open(map, marker);
location.infoWindowVisible = true;
}
});
}
function init() {
var mapOptions = {
center: new google.maps.LatLng(-28.12333312723434, 23.738126687499967),
zoom: 5,gestureHandling: 'auto',fullscreenControl: false,zoomControl: true,
disableDoubleClickZoom: false,
mapTypeControl: true,
mapTypeControlOptions: {
style: google.maps.MapTypeControlStyle.HORIZONTAL_BAR,
},
scaleControl: true,
scrollwheel: true,
streetViewControl: false,
draggable: true,
clickableIcons: true,
fullscreenControlOptions: {
position: google.maps.ControlPosition.TOP_RIGHT
},
zoomControlOptions: {
position: google.maps.ControlPosition.RIGHT_BOTTOM
},
streetViewControlOptions: {
position: google.maps.ControlPosition.RIGHT_BOTTOM
},
mapTypeControlOptions: {
position: google.maps.ControlPosition.TOP_LEFT
},
mapTypeId: google.maps.MapTypeId.ROADMAP,
styles: [{"featureType":"landscape","stylers":[{"hue":"#FFAD00"},{"saturation":50.2},{"lightness":-34.8},{"gamma":1}]},{"featureType":"road.highway","stylers":[{"hue":"#FFAD00"},{"saturation":-19.8},{"lightness":-1.8},{"gamma":1}]},{"featureType":"road.arterial","stylers":[{"hue":"#FFAD00"},{"saturation":72.4},{"lightness":-32.6},{"gamma":1}]},{"featureType":"road.local","stylers":[{"hue":"#FFAD00"},{"saturation":74.4},{"lightness":-18},{"gamma":1}]},{"featureType":"water","stylers":[{"hue":"#00FFA6"},{"saturation":-63.2},{"lightness":38},{"gamma":1}]},{"featureType":"poi","stylers":[{"hue":"#FFC300"},{"saturation":54.2},{"lightness":-14.4},{"gamma":1}]}]
}
var mapElement = document.getElementById('mapkit-6386');
var map = new google.maps.Map(mapElement, mapOptions);
var locations = [{"title":"Cape Town","address":"Cape Town, South Africa","tel":"","int_tel":"","email":"","web":"","web_formatted":"","open":"","time":"","lat":-33.9248685,"lng":18.424055299999964,"photo":"","vicinity":"Cape Town","open_hours":"","marker":{"fillColor":"#F44336","fillOpacity":1,"strokeWeight":0,"scale":1.5,"anchor":{"x":10,"y":30},"origin":{"x":0,"y":0},"style":5},"iw":{"address":true,"desc":true,"email":true,"enable":true,"int_tel":true,"open":true,"open_hours":true,"photo":true,"tel":true,"title":true,"web":true}},{"title":"Stellenbosch","address":"Stellenbosch, South Africa","tel":"","int_tel":"","email":"","web":"","web_formatted":"","open":"","time":"","lat":-33.9321045,"lng":18.86015199999997,"photo":"","vicinity":"Stellenbosch","open_hours":"","marker":{"fillColor":"#F44336","fillOpacity":1,"strokeWeight":0,"scale":1.5,"anchor":{"x":10,"y":30},"origin":{"x":0,"y":0},"style":5},"iw":{"address":true,"desc":true,"email":true,"enable":true,"int_tel":true,"open":true,"open_hours":true,"photo":true,"tel":true,"title":true,"web":true}},{"title":"Wilderness","address":"Wilderness, South Africa","desc":"","tel":"","int_tel":"","email":"","web":"","web_formatted":"","open":"","time":"","lat":-33.9940082,"lng":22.574848100000054,"vicinity":"Wilderness","marker":"","iw":{"address":true,"desc":true,"email":true,"enable":true,"int_tel":true,"open":true,"open_hours":true,"photo":true,"tel":true,"title":true,"web":true}},{"title":"Port Elizabeth","address":"Port Elizabeth, South Africa","desc":"","tel":"","int_tel":"","email":"","web":"","web_formatted":"","open":"","time":"","lat":-33.9608369,"lng":25.602242299999943,"vicinity":"Port Elizabeth","marker":"","iw":{"address":true,"desc":true,"email":true,"enable":true,"int_tel":true,"open":true,"open_hours":true,"photo":true,"tel":true,"title":true,"web":true}},{"title":"Two Rivers Rest Camp","address":"Botswana","desc":"","tel":"","int_tel":"","email":"","web":"","web_formatted":"","open":"","time":"","lat":-26.4715622,"lng":20.6237251,"vicinity":"Botswana","marker":"","iw":{"address":true,"desc":true,"email":true,"enable":true,"int_tel":true,"open":true,"open_hours":true,"photo":true,"tel":true,"title":true,"web":true}},{"title":"Orange River Lodge","address":"South Namibia, Namibia, Noordoewer, Namibia","desc":"","tel":"063 297 012","int_tel":"+264 63 297 012","email":"","web":"http://www.orangeriverlodge.com/","web_formatted":"orangeriverlodge.com","open":"","time":"","lat":-28.74396,"lng":17.616750000000025,"vicinity":"South Namibia, Namibia","marker":"","iw":{"address":true,"desc":true,"email":true,"enable":true,"int_tel":true,"open":true,"open_hours":true,"photo":true,"tel":true,"title":true,"web":true}},{"title":"Windhoek","address":"Windhoek, Namibia","desc":"","tel":"","int_tel":"","email":"","web":"","web_formatted":"","open":"","time":"","lat":-22.5608807,"lng":17.0657549,"vicinity":"Windhoek","marker":"","iw":{"address":true,"desc":true,"email":true,"enable":true,"int_tel":true,"open":true,"open_hours":true,"photo":true,"tel":true,"title":true,"web":true}}];
for (i = 0; i < locations.length; i++) {
marker = new google.maps.Marker({
icon: locations[i].marker,
position: new google.maps.LatLng(locations[i].lat, locations[i].lng),
map: map,
title: locations[i].title,
address: locations[i].address,
desc: locations[i].desc,
tel: locations[i].tel,
int_tel: locations[i].int_tel,
vicinity: locations[i].vicinity,
open: locations[i].open,
open_hours: locations[i].open_hours,
photo: locations[i].photo,
time: locations[i].time,
email: locations[i].email,
web: locations[i].web,
iw: locations[i].iw
});
markersArray.push(marker);
if (locations[i].iw.enable === true){
bindInfoWindow(marker, map, locations[i]);
}
}
arrays = [];
while (locations.length > 0) {
arrays.push(locations.splice(0, 5));
}
for (var i = 0; i < arrays.length; i++) {
makeRoutes(arrays[i]);
}
function makeRoutes(locations) {
var waypts = [];
var directionsService = new google.maps.DirectionsService();
var directionsDisplay = new google.maps.DirectionsRenderer({
suppressMarkers: true,
preserveViewport: true
});
if (locations.length > 1){
for (var i = 0; i < locations.length; i++) {
waypts.push({
location:new google.maps.LatLng(locations[i].lat, locations[i].lng),
stopover:true
});
}
}
var request = {
origin: new google.maps.LatLng(locations[0].lat, locations[0].lng),
destination: new google.maps.LatLng(locations[locations.length - 1].lat, locations[locations.length - 1].lng),
waypoints: waypts,
optimizeWaypoints: true,
travelMode: google.maps.DirectionsTravelMode.DRIVING
};
directionsService.route(request, function(response, status) {
if (status == google.maps.DirectionsStatus.OK) {
polylineOptions = {
strokeColor: '#80b8ea',
strokeWeight: '6'
}
directionsDisplay.setOptions({
polylineOptions: polylineOptions
});
directionsDisplay.setDirections(response);
}
});
directionsDisplay.setMap(map);
}
}
</script>
<style>
#mapkit-6386 {
height: 400px;
width: 900px;
max-width: 100%;
}
</style>
<div id="mapkit-6386"></div>

Your route is "broken" because that is what your code does. It calls makeRoutes(arrays[i]); where arrays is your locations array split into two pieces.
The markers aren't clickable because the of the following error in the javascript console: Uncaught ReferenceError: InfoBox is not defined because that file (//cdn.mapkit.io/v1/infobox.js) has a syntax error:
Uncaught SyntaxError: Unexpected token export infobox.js:88
And the code that populates the infowindow doesn't work.
proof of concept fiddle

Aggregate columns for Google Chart

I'm trying for days with no success to get columns aggregated. I also searched everwhere and found nothing. I want to get column 1 (string with multiple identical values) grouped and sum columns 6,7,8 (numbers) and after I want to select an option to display column 6,7 or 8.
I hope I'm being very clear and a solution would help a lot of people.
Below I would like to share some piece of code.
This example is similar: http://jsfiddle.net/guilhermelight1/fcqeA/80/
I also tried calc: function()...
function drawVisualization() {
var query = new google.visualization.Query('https://spreadsheets.google.com/tq?key=xxxxxx&sheet=data');
query.setQuery("select B,I,J,O,P,Q,R,S,T where O is not null Order by Q desc ");
query.send(handleQueryResponse);
}
function handleQueryResponse(response) {
if (response.isError()) {
alert('Error in query: ' + response.getMessage() + ' ' + response.getDetailedMessage());
return;
}
var data = response.getDataTable();
var tableChartB = new google.visualization.ChartWrapper({
'chartType': 'Table',
'containerId': 'table_divB',
'options': {
'width': '100%'
},
'view': {'columns': [0,1,2,3,4,5,6,7,8]}
});
var columnChart2 = new google.visualization.ChartWrapper({
'chartType': 'ColumnChart',
'containerId': 'Column_div',
'view': {'columns': [1,6,7,8]},
'options': {
'bar': {'groupWidth': '95%'},
'backgroundColor': 'transparent',
'animation': {'duration': 1000, 'easing': 'out'},
'legend': { 'position': 'top', 'alignment': 'start' },
'width': '100%',
'height': '90%',
'chartArea': {'top': '10%', 'width': '85%','height': '80%' },
'displayAnnotations': 'true',
'hAxis': {'gridlines': { 'count': 40, 'color': 'transparent' } ,'textStyle':{'fontSize': 8.5}, 'slantedText': false, 'showTextEvery': 1,'minTextSpacing': 0,},
'tooltip.isHtml': 'true',
'pointSize': 2,
'allowHtml': true,
'vAxis': {'textStyle': {'fontSize': 9,'color': '#585858'},'minTextSpacing': 0},
// 'dataTable' : google.visualization.data.group(data, [1],[{'column': 8, 'aggregation': google.visualization.data.sum, 'type': 'number'}])
}});
google.visualization.events.addListener(tableChartB, 'ready',
function(event) {
// group the data of the filtered table and set the result in the pie chart.
columnChart2.setDataTable( google.visualization.data.group(
// get the filtered results
tableChartB.getDataTable(),
[1],
[{'column': 6, 'aggregation': google.visualization.data.sum, 'type': 'number'},
{'column': 7, 'aggregation': google.visualization.data.sum, 'type': 'number'},
{'column': 8, 'aggregation': google.visualization.data.sum, 'type': 'number'}]
));
// redraw the pie chart to reflect changes
columnChart2.draw();
});
google.visualization.events.addListener(tableChartB, 'statechange',
function(event) {
// group the data of the filtered table and set the result in the pie chart.
columnChart2.setDataTable( google.visualization.data.group(
// get the filtered results
tableChartB.getDataTable(),
[1],
[{'column': 6, 'aggregation': google.visualization.data.sum, 'type': 'number'},
{'column': 7, 'aggregation': google.visualization.data.sum, 'type': 'number'},
{'column': 8, 'aggregation': google.visualization.data.sum, 'type': 'number'}]
));
// redraw the pie chart to reflect changes
columnChart2.draw();
});
$('#subc').change(function () {
var options = $("#subc option");
var optionSelected = options.index(options.filter(":selected"));
if (optionSelected === 0) {
tableChartB.setView({
'columns': [0,1,2,3,4,5,6,7,8]
});
columnChart2.setView({
'columns': [1,6,7,8 ]
});
columnChart2.setOption('colors', ["#FFC000","#00b0f0","#ff0000"]);
} else if (optionSelected === 1) {
tableChartB.setView({
'columns': [0,1,2,3,4,5,6,7,8]
});
columnChart2.setView({
'columns': [1,{
'type': 'number',
'label': 'Average',
'calc': function (dt, row) {
return group.getValue(0, 1);
}, 6 ]
});
columnChart2.setOption('colors', ["#FFC000"]);
} else if (optionSelected === 2) {
tableChartB.setView({
'columns': [0,1,2,3,4,5,6,7,8]
});
columnChart2.setView({
'columns': [1,7]
});
columnChart2.setOption('colors', ["#00b0f0"]);
} else if (optionSelected === 3) {
tableChartB.setView({
'columns': [0,1,2,3,4,5,6,7,8]
});
columnChart2.setView({
'columns': [1,8 ]
});
columnChart2.setOption('colors', ["#ff0000"]);
} else {
tableChartB.setView({
'columns': [0,1,2,3,4,5,6,7,8]
});
columnChart2.setView({
'columns': [1,6,7,8 ]
});
columnChart2.setOption('colors', ["#FFC000","#00b0f0","#ff0000"]);
}
drawChart();
});
}
<label class="google-visualization-controls-label"></label>
<select id="subc" class="filter">
<option selected="selected" value="a1">Dia-h</option>
<option value="a2">Dia</option>
<option value="a3">Calendário</option>
<option value="a4">Hora</option>
</select>

not sure i completely follow the question, see following working snippet...
adjusted from posted fiddle...
google.charts.load('current', {
callback: drawVisualization,
packages:['controls']
});
function drawVisualization() {
// Prepare the data
var jsonData = '{"cols":[{"label":"Subject","type":"string"},{"label":"pete","type":"number"},{"label":"john","type":"number"},{"label":"carl","type":"number"},{"label":"andrea","type":"number"}],"rows":[{"c":[{"v":"coolness"},{"v":4.4},{"v":4.3},{"v":3.1},{"v":4.3}]},{"c":[{"v":"sexyness"},{"v":4.2},{"v":3.8},{"v":3.6},{"v":4.8}]},{"c":[{"v":"toughness"},{"v":3.1},{"v":2.7},{"v":2.4},{"v":2.9}]},{"c":[{"v":"chillnes"},{"v":4.4},{"v":4.4},{"v":4.2},{"v":4.5}]},{"c":[{"v":"madness"},{"v":4.6},{"v":4.6},{"v":4},{"v":4.6}]},{"c":[{"v":"lochness"},{"v":3.9},{"v":3.7},{"v":2.9},{"v":3.9}]},{"c":[{"v":"extraness"},{"v":4.6},{"v":4.3},{"v":3.6},{"v":4.3}]},{"c":[{"v":"extraness"},{"v":4.6},{"v":4.3},{"v":3.6},{"v":4.3}]}]}';
var data = new google.visualization.DataTable(JSON.parse(jsonData));
var compPicker = new google.visualization.ControlWrapper({
'controlType': 'CategoryFilter',
'containerId': 'control2',
'options': {
'filterColumnLabel': 'Subject',
'ui': {
'labelStacking': 'vertical',
'allowTyping': false,
'allowMultiple': true
}
}
});
// Define a chart
var chart = new google.visualization.ChartWrapper({
'chartType': 'ColumnChart',
'containerId': 'chart1',
'options': {'title':'Competenties',
'width':'100%',
'height':300,
'vAxis': {
viewWindow: {max:5,min:0},
gridlines: {color:'#CCC', count: 6}
},
bar: { groupWidth: '80%' },
colors: ["#FFC000","#00b0f0","#ff0000","#92d050"]
}
});
// Define a table
var table = new google.visualization.ChartWrapper({
'chartType': 'Table',
'containerId': 'chart2',
'options': {
'width': '400px'
}
});
var groupData;
var groupTable = new google.visualization.ChartWrapper({
chartType: 'Table',
containerId: 'chart3',
options: {
width: 400
}
});
google.visualization.events.addListener(table, 'ready', function() {
groupData = google.visualization.data.group(
table.getDataTable(),
[0],
[
{
aggregation: google.visualization.data.sum,
column: 1,
label: data.getColumnLabel(1),
type: 'number'
},
{
aggregation: google.visualization.data.sum,
column: 2,
label: data.getColumnLabel(2),
type: 'number'
},
{
aggregation: google.visualization.data.sum,
column: 3,
label: data.getColumnLabel(3),
type: 'number'
},
{
aggregation: google.visualization.data.sum,
column: 4,
label: data.getColumnLabel(4),
type: 'number'
}
]
);
groupTable.setDataTable(groupData);
groupTable.draw();
});
// Create a dashboard
var drawChart = new google.visualization.Dashboard(document.getElementById('dashboard')).bind([compPicker], [chart, table]);
drawChart.draw(data);
document.getElementById('names').addEventListener('change', function (evt) {
var colors = ["#FFC000", "#00b0f0", "#ff0000", "#92d050"];
var viewColumns = {columns: []};
var viewColors = [];
switch (evt.target.selectedIndex) {
case 0:
$.each(new Array(evt.target.options.length), function (index) {
viewColumns.columns.push(index);
if (index > 0) {
viewColors.push(colors[index - 1]);
}
});
break;
default:
viewColumns.columns.push(0);
viewColumns.columns.push(evt.target.selectedIndex);
viewColors.push(colors[evt.target.selectedIndex - 1]);
}
chart.setView(viewColumns);
chart.setOption('colors', viewColors);
groupTable.setView(viewColumns);
drawChart.draw(data);
}, false);
}
<script src="https://www.gstatic.com/charts/loader.js"></script>
<div id="dashboard">
<select id="names">
<option value="0">all</option>
<option value="1">pete</option>
<option value="2">john</option>
<option value="3">carl</option>
<option value="4">andrea</option>
</select>
<table>
<tr style='vertical-align: top'>
<td>
<div id="control1"></div>
<div id="control2"></div>
<div id="control3"></div>
</td>
</tr>
<tr>
<td>
<div style="float: left;" id="chart1"></div>
<div style="float: left;" id="chart2"></div>
<div style="float: left;" id="chart3"></div>
</td>
</tr>
</table>
</div>

How to hide the numbers on a cluster marker in Google Maps?

So I have this:
But what I want is this:
I'm pretty sure there should be an option I can specify here:
var options = {
gridSize: 80,
imagePath: imagePath ,
someOption : iAmMissing ??
}
var mc = new MarkerClusterer(map, mapmarkers, options);
google.maps.event.addListener(mc, 'clusteringend', function(){
setTimeout(fixMyPageOnce, 1);
});
But I can't seem to find an option. Is this the right place or is there another way I can get rid of the numbers in the circles?

You can just use the "styles" options and set the "textSize" option slightly above 0:
var options = {
gridSize: 80,
styles: [{
url: imagePath,
height: 29,
width: 29,
anchor: [0, 0],
textSize: 0.001
}, {
url: imagePath,
height: 49,
width: 49,
anchor: [0, 0],
textSize: 0.001
}, {
url: imagePath,
width: 65,
height: 65,
anchor: [0, 0],
textSize: 0.001
}]
}
It is working for me.

Just set textColor to transparent
var options = {
textColor: 'transparent',
gridSize: 80,
imagePath: imagePath ,
someOption : iAmMissing ??
}

Create a custom "calculator" function that sets the "text" property of the return value to "".
calculator: function(markers, numStyles) {
var index = 0;
var count = markers.length.toString();
var dv = count;
while (dv !== 0) {
dv = parseInt(dv / 10, 10);
index++;
}
index = Math.min(index, numStyles);
return {
text: "",
index: index,
title: count
};
}
proof of concept fiddle
code snippet:
function initialize() {
var center = new google.maps.LatLng(52.4357808, 4.991315699999973);
var mapOptions = {
zoom: 12,
center: center,
mapTypeId: google.maps.MapTypeId.TERRAIN
};
map = new google.maps.Map(document.getElementById('map-canvas'), mapOptions);
for (i = 0; i < markers.length; i++) {
addMarker(markers[i]);
}
markerCluster = new MarkerClusterer(map, gmarkers, {
imagePath: 'https://cdn.rawgit.com/googlemaps/v3-utility-library/master/markerclustererplus/images/m',
calculator: function(markers, numStyles) {
var index = 0;
var title = "";
var count = markers.length.toString();
var dv = count;
while (dv !== 0) {
dv = parseInt(dv / 10, 10);
index++;
}
index = Math.min(index, numStyles);
return {
text: "",
index: index,
title: count
};
}
});
}
var gmarkers = [];
var markers = [];
var infowindow = new google.maps.InfoWindow({
content: ''
});
var markerCluster;
// Our markers
markers = [
['0', 'Title 1', 52.4357808, 4.991315699999973, 'car'],
['1', 'Title 2', 52.4357808, 4.981315699999973, 'third'],
['2', 'Title 3', 52.4555687, 5.039231599999994, 'car'],
['3', 'Title 4', 52.4555687, 5.029231599999994, 'second']
];
function addMarker(marker) {
var title = marker[1];
var pos = new google.maps.LatLng(marker[2], marker[3]);
var content = marker[1];
var marker = new google.maps.Marker({
title: title,
position: pos,
map: map
});
gmarkers.push(marker);
google.maps.event.addListener(marker, 'click', (function(marker1, content) {
return function() {
infowindow.setContent(content);
infowindow.open(map, marker);
}
})(marker, content));
}
google.maps.event.addDomListener(window, "load", initialize);
html,
body,
#map-canvas {
width: 100%;
height: 100%;
}
<script src="https://maps.googleapis.com/maps/api/js?libraries=geometry,places&key=AIzaSyCkUOdZ5y7hMm0yrcCQoCvLwzdM6M8s5qk"></script>
<script src="https://unpkg.com/#googlemaps/markerclustererplus/dist/index.min.js"></script>
<div id="map-canvas"></div>

Calling multiple JSON data with Jquery Deferred

I am trying to get multiple JSON data with deferred object. I have JSON files for individual days. In each individual day, I have data for points, lines and polygons. I have jQueryUI Sliders to visualise for individual days. For example, if the slider has value of 1, only the day1 data (points, lines and polygons) need to be visualised, and for day2, all points, lines and polygons relating to day2 only should be visualised and so on.
I don't know what is problem with my code but it is not serving the required data. Latest data/merged data is shown.
Help me out here.
$(document).ready(function () {
var map = L.map("map", {
center: [27.6419412, 85.1224152],
zoom: 13,
doubleClickZoom: true
});
L.tileLayer('http://{s}.tiles.wmflabs.org/bw-mapnik/{z}/{x}/{y}.png', {
attribution: '© OpenStreetMap'
}).addTo(map);
L.control.scale().addTo(map);
var markerCluster = L.markerClusterGroup({
showCoverageOnHover: false
});
function TableContent(jsonData) {
var content = $('<div></div>').addClass('table-content');
for (row in jsonData) {
var tableRow = $('<div></div>').addClass('table-row').append(function () {
var key = row;
if (!(key === "#uid" || key === "#changeset" || key === "#version" || key === "#timestamp" || key === "#id")) {
return jsonData[row] ? $("<div></div>").text(key).append($("<div></div>").text(jsonData[row])) : "";
}
});
tableRow.prependTo(content).addClass(row);
}
return $(content)[0];
}
function Table(json) {
return $('<div></div>').append($('<div class="title"></div>').text(json.type)).addClass('table-container').append(new TableContent(json.data));
}
var pointBuild = L.geoJson(null, {
pointToLayer: function (feature, latlng) {
var deferred = $.Deferred();
marker = L.marker(latlng, {
icon: L.icon({
iconUrl: 'img/marker.png',
iconSize: [30, 30],
iconAnchor: [15, 15]
}),
riseOnHover: true,
title: "This is a Point feature. Click to have a look at some of its attributes"
});
markerCluster.addLayer(marker);
deferred.resolve();
map.fire('cluster-hover');
return marker;
},
onEachFeature: function (feature, layer) {
var popup = L.popup();
layer.on('click', function (e) {
var deferred = $.Deferred();
popup.setLatLng(e.latlng);
popup.setContent(new TableContent(feature.properties));
popup.openOn(map);
deferred.resolve();
});
}
});
var myStyle = {
weight: 2,
opacity: 1,
color: '#FF0000',
dashArray: '3',
fillOpacity: 0.3,
fillColor: '#FA8072'
};
var wayBuild = L.geoJson(null, {
style: myStyle,
onEachFeature: function (feature, layer) {
var popup = L.popup();
layer.on('click', function (e) {
var deferred = $.Deferred();
popup.setLatLng(e.latlng);
popup.setContent(new TableContent(feature.properties));
popup.openOn(map);
deferred.resolve();
});
}
});
function pointLinePolygon(receivedPoints, receivedLines, receivedPolygon, day) {
var points_, lines_, polygon_;
var deferredPoint = $.Deferred();
var deferredLine = $.Deferred();
var deferredPolygon = $.Deferred();
$.getJSON(receivedPoints, function (data) {
setTimeout(function () {
pointBuild.addData(data);
points_ = markerCluster;
deferredPoint.resolve();
}, 0);
});
$.getJSON(receivedLines, function (data) {
setTimeout(function () {
lines_ = wayBuild.addData(data);
deferredLine.resolve();
}, 0);
});
$.getJSON(receivedPolygon, function (data) {
setTimeout(function () {
polygon_ = wayBuild.addData(data);
deferredPolygon.resolve();
}, 0);
});
$.when(deferredPoint, deferredLine, deferredPolygon).done(function () {
var featureGroup = L.layerGroup([points_, lines_, polygon_]);
featureGroup.addTo(map);
$.map(wayBuild._layers, function (layer, index) {
$(layer._container).find("path").attr("title", "This is a way feature. Click to have a look at some of its attributes.");
});
});
}
map.on('cluster-hover', function () {
setTimeout(function () {
$("#map").find("div.marker-cluster").attrByFunction(function () {
return {
title: "This is a Cluster of " + $(this).find("span").text() + " Point features. Click to zoom in and see the Point features and sub-clusters it contains."
}
});
}, 0);
});
var tooltip = $('<div id="toolTipSlider" />').hide();
$('#slider').slider({
min: 1,
max: 4,
slide: function (event, ui) {
if (ui.value === 1) {
tooltip.text("Day " + ui.value);
$.ajax({
type: 'post',
success: function () {
pointLinePolygon("data/day1/points.geojson", "data/day1/lines.geojson", "data/day1/polygon.geojson", "Day 1");
}
});
}
else if (ui.value === 2) {
tooltip.text("Day " + ui.value);
$.ajax({
type: 'post',
success: function () {
pointLinePolygon("data/day2/points.geojson", "data/day2/lines.geojson", "data/day2/polygon.geojson", "Day 2");
}
});
}
else if (ui.value === 3) {
tooltip.text("Day " + ui.value);
$.ajax({
type: 'post',
success: function () {
pointLinePolygon("data/day3/points.geojson", "data/day3/lines.geojson", "data/day3/polygon.geojson", "Day 3");
}
});
}
else if (ui.value === 4) {
tooltip.text("Day " + ui.value);
$.ajax({
type: 'post',
success: function () {
pointLinePolygon("data/day4/points.geojson", "data/day4/lines.geojson", "data/day4/polygon.geojson", "Day 4");
}
});
}
}
}).find(".ui-slider-handle").append(tooltip).hover(function () {
tooltip.show();
});
});
$.fn.attrByFunction = function (a) {
return $(this).each(function () {
$(this).attr(a.call(this));
});
};

I solved the problem by clearing the map layer every time I am to add new one.
map.eachLayer(function (layer) {
if (layer.feature) {
map.removeLayer(layer);
}
});

Google map is not loading on a div hover

This code block is working well on page is loading--
<script type="text/javascript">
google.load("visualization", "1", { packages: ["map"] });
google.setOnLoadCallback(drawMap);
function drawMap() {
var data = google.visualization.arrayToDataTable([
['Lat', 'Lon', 'Name'],
[22.1589, 90.1165, 'BARGUNA'],
[22.6953, 90.3538, 'BARISAL'],
]);
var options = {
showLine: false,
showTip: true,
zoomLevel: 7,
mapType: 'terrain'
};
var map = new google.visualization.Map(document.getElementById('map_canvas'));
map.draw(data, options);
}
</script>
This code block is for a specific div hover event. But it is not working--
<script>
$(function () {
$('#tab-dhakadivision').hover(function () {
google.load("visualization", "1", { packages: ["map"] });
google.setOnLoadCallback(drawMap);
function drawMap() {
var data = google.visualization.arrayToDataTable([
['Lat', 'Lon', 'Name'],
[23.78069, 90.41932, 'DHAKA'],
[23.60113, 89.83923, 'FARIDPUR'],
[24.11119, 90.42584, 'GAZIPUR']
]);
var options = {
showLine: false,
showTip: true,
zoomLevel: 7,
mapType: 'terrain'
};
var dmap = new google.visualization.Map(document.getElementById('map_canvas'));
dmap.draw(data, options);
}
});
});
</script>
Any suggestion ?