Related
I'm using Google Charts.
I'm trying to display 15 stores and the number of clicks on each one.
Now that's is working perfectly.
My issue here is in the hAxis. As you can see the stores' names are incomplete, which is fine, but when i hover on an incomplete name, the tooltip is showing me an empty yellow box as shown in the picture below.
If i select the context of this tooltip, then i can read the full name:
My question is:
Is it possible to change the text color in this tooltip in order to read it?
Thanks.
to modify the axis tooltip, you can modify the following css classes...
.goog-tooltip {
background-color: cyan;
color: magenta;
font-weight: bold;
}
.goog-tooltip > div {
background-color: lime !important;
}
see following working snippet...
google.charts.load('current', {
callback: drawChart,
packages: ['corechart']
});
function drawChart() {
var data = new google.visualization.DataTable();
data.addColumn('string', 'Year');
data.addColumn('number', 'Q1');
data.addColumn('number', 'Q2');
data.addColumn('number', 'Q3');
data.addColumn('number', 'Q4');
data.addRow(['January 2016', 500, 100, 1200, 1000]);
data.addRow(['February 2016', 500, 100, 1975, 1000]);
data.addRow(['March 2016', 500, 100, 1200, 1000]);
data.addRow(['April 2016', 500, 100, 1200, 1000]);
// find v-axis max value
var vAxisMax = null;
for (var i = 1; i < data.getNumberOfColumns(); i++) {
var range = data.getColumnRange(i);
vAxisMax = vAxisMax || Math.ceil(range.max / 1000) * 1000;
vAxisMax = Math.max(vAxisMax, Math.ceil(range.max / 1000) * 1000);
}
// add buffer for annotation
vAxisMax += 400;
var options = {
backgroundColor: '#000000',
chartArea: {
top: 12,
bottom: 24,
left: 72
},
legend: {
position: 'none'
},
colors: ['#9427E0'],
hAxis: {
slantedText: true,
textStyle: {
color: '#ffffff'
}
},
vAxis: {
title: 'Amount',
viewWindow: {
max: vAxisMax
}
},
bar: {
groupWidth: '90%'
},
annotations: {
style: 'point',
alwaysOutside: true
},
width: 1100,
height: 300
};
var view = new google.visualization.DataView(data);
view.setColumns([
0,
1, { calc: "stringify", sourceColumn: 1, type: "string", role: "annotation" },
2, { calc: "stringify", sourceColumn: 2, type: "string", role: "annotation" },
3, { calc: "stringify", sourceColumn: 3, type: "string", role: "annotation" },
4, { calc: "stringify", sourceColumn: 4, type: "string", role: "annotation" }
]);
var chart = new google.visualization.ColumnChart(document.getElementById('chart_div'));
chart.draw(view, options);
}
.goog-tooltip {
background-color: cyan;
color: magenta;
font-weight: bold;
}
.goog-tooltip > div {
background-color: lime !important;
}
<script src="https://www.gstatic.com/charts/loader.js"></script>
<div id="chart_div"></div>
Try slantedTextAngle
hAxis: {direction:1, slantedText:true, slantedTextAngle:90 },
I have Google Maps:
<!DOCTYPE html>
<html>
<head>
<meta name="viewport" content="initial-scale=1.0, user-scalable=no">
<meta charset="utf-8">
<title>Fusion Tables layers</title>
<style>
html, body {
height: 100%;
margin: 0;
padding: 0;
}
#map {
height: 100%;
}
</style>
</head>
<body>
<div id="map"></div>
<script>
function initMap() {
var map = new google.maps.Map(document.getElementById('map'), {
zoom: 4,
center: {lat: 39.8282, lng: -98.5795}
});
google.maps.event.addListener(map, 'zoom_changed', function() {
var zoom_level = map.getZoom();
var layer;
var layer1;
//state level
if(zoom_level >= 5 && zoom_level < 7) {
layer = new google.maps.FusionTablesLayer({
query: {
select: '\'geometry\'',
from: '17aT9Ud-YnGiXdXEJUyycH2ocUqreOeKGbzCkUw'
},
styles: [{
polygonOptions: {
fillColor: '#000000',
fillOpacity: 0.001
}
}]
});
layer.setMap(map);
}
//county level
if(zoom_level >= 7) {
layer = null;
layer.setMap(null);
layer1 = new google.maps.FusionTablesLayer({
query: {
select: '\'geometry\'',
from: '1xdysxZ94uUFIit9eXmnw1fYc6VcQiXhceFd_CVKa'
},
styles: [{
polygonOptions: {
fillColor: '#000000',
fillOpacity: 0.001
}
}]
});
layer1.setMap(map);
}
});
}
</script>
<script async defer
src="https://maps.googleapis.com/maps/api/js?key=AIzaSyBMtoh9P3UkoxbXndKu_HOP7KsVwTRvxGU&callback=initMap">
</script>
</body>
</html>
When I zoom in to zoomlevel 7 and above, I still see state level (layer) and not layer1. How can I reset layer when zoom in?
I would suggest that if you only ever want one layer at a time, only create one, hide it before creating a new version.
google.maps.event.addListener(map, 'zoom_changed', function() {
var zoom_level = map.getZoom();
if (layer) layer.setMap(null);
//state level
if (zoom_level >= 5 && zoom_level < 7) {
layer = new google.maps.FusionTablesLayer({
query: {
select: '\'geometry\'',
from: '17aT9Ud-YnGiXdXEJUyycH2ocUqreOeKGbzCkUw'
},
styles: [{
polygonOptions: {
fillColor: '#000000',
fillOpacity: 0.001
}
}]
});
layer.setMap(map);
}
//county level
if (zoom_level >= 7) {
layer = new google.maps.FusionTablesLayer({
query: {
select: '\'geometry\'',
from: '1xdysxZ94uUFIit9eXmnw1fYc6VcQiXhceFd_CVKa'
},
styles: [{
polygonOptions: {
fillColor: '#000000',
fillOpacity: 0.001
}
}]
});
layer.setMap(map);
}
});
proof of concept fiddle
code snippet:
var layer;
var layer1;
var map;
function initMap() {
map = new google.maps.Map(document.getElementById('map'), {
zoom: 4,
center: {
lat: 39.8282,
lng: -98.5795
}
});
google.maps.event.addListener(map, 'zoom_changed', function() {
var zoom_level = map.getZoom();
if (layer) layer.setMap(null);
//state level
if (zoom_level >= 5 && zoom_level < 7) {
layer = new google.maps.FusionTablesLayer({
query: {
select: '\'geometry\'',
from: '17aT9Ud-YnGiXdXEJUyycH2ocUqreOeKGbzCkUw'
},
styles: [{
polygonOptions: {
fillColor: '#000000',
fillOpacity: 0.001
}
}]
});
layer.setMap(map);
}
//county level
if (zoom_level >= 7) {
layer = new google.maps.FusionTablesLayer({
query: {
select: '\'geometry\'',
from: '1xdysxZ94uUFIit9eXmnw1fYc6VcQiXhceFd_CVKa'
},
styles: [{
polygonOptions: {
fillColor: '#000000',
fillOpacity: 0.001
}
}]
});
layer.setMap(map);
}
});
}
google.maps.event.addDomListener(window, "load", initMap);
html,
body {
height: 100%;
margin: 0;
padding: 0;
}
#map {
height: 100%;
}
<script src="https://maps.googleapis.com/maps/api/js"></script>
<div id="map"></div>
How does iframe_api (script) mobile work?
When playerVars equals to 0, I can't play mobile; but when playerVars equals to 1 or 2, I can.
<div id="container" class="container">
<div id="playerLayer"></div>
</div>
function onYouTubeIframeAPIReady() {
player = new YT.Player('playerLayer', {
height: '520',
width: '560',
html5 : 0,
videoId: 'jp2lDKlxFVY',
playerVars : {
controls: 0,
showinfo: 0,
modestbranding: 1,
wmode: "opaque"
},
events: {
'onReady': onPlayerReady,
'onStateChange': onPlayerStateChange
}
});
}
I'm struggling to find a way to style the infowindows on this map. I've tried suppressing the infowindow by setting suppressInfoWindows: true but that didn't seem to work. Any ideas would be massively appreciated. I've read through a lot of Google docs and a lot of other posts on here and can't find a solution.
<script>
var geocoder;
var map;
var marker;
var layers = [];
function initialize() {
geocoder = new google.maps.Geocoder ();
var latlng = new google.maps.LatLng (51.505288, -0.191544);
var myOptions = {
zoom: 15,
disableDefaultUI: true,
styles: [
{
stylers: [
]
},
{
featureType: "poi.park",
stylers: [
{ color: "#aecfae" },
{ saturation: 0 },
{ lightness: 0 },
{ visibility: "simplified" }
]
},
{
featureType: "landscape",
stylers: [
{ color: "#ffffff" },
{ saturation: 0 },
{ lightness: 0 },
{ visibility: "simplified" }
]
},
{
featureType: "road.highway",
elementType: "labels",
stylers: [
{ color: "transparent" },
{ visibility: "off" },
]
},
{
featureType: "water",
elementType: "geometry.fill",
stylers: [
{ color: "#a5bfdd" },
{ visibility: "on" },
]
},
{
featureType: "road",
elementType: "labels",
stylers: [
{ color: "transparent" },
{ visibility: "off" },
]
},
{
featureType: "road",
elementType: "geometry",
stylers: [
{ color: "#e0e0e0" },
{ saturation: 0 },
{ lightness: 0 },
{ visibility: "simplified" }
]
}],
center: latlng,
mapTypeId: google.maps.MapTypeId.ROADMAP
}
map = new google.maps.Map(document.getElementById("map_canvas"),
myOptions);
marker = new google.maps.Marker({map:map});
layers[0] = new google.maps.KmlLayer('http://www.cid-dev.co.uk/vicarage-phase-2/kml/VicarageGate.kml', {preserveViewport: true});
for (var i = 0; i < layers.length; i++) {
layers[i].setMap(map);
}
layers[1] = new google.maps.KmlLayer('http://www.cid-dev.co.uk/vicarage-phase-2/kml/PrimarySchools-1.kml',
{preserveViewport: true});
layers[2] = new google.maps.KmlLayer('http://www.cid-dev.co.uk/vicarage-phase-2/kml/SecondarySchools-1.kml', {preserveViewport: true});
layers[3] = new google.maps.KmlLayer('http://www.cid-dev.co.uk/vicarage-phase-2/kml/Culture-6.kml', {preserveViewport: true});
layers[4] = new google.maps.KmlLayer('http://www.cid-dev.co.uk/vicarage-phase-2/kml/Hotels-2.kml', {preserveViewport: false});
layers[5] = new google.maps.KmlLayer('http://www.cid-dev.co.uk/vicarage-phase-2/kml/Shopping.kml', {preserveViewport: false});
layers[6] = new google.maps.KmlLayer('http://www.cid-dev.co.uk/vicarage-phase-2/kml/Restaurants.kml', {preserveViewport: false});
for (var i = 1; i < layers.length; i++) {
layers[i].setMap(null);
}
}
function codeAddress () {
var address = document.getElementById ("address").value;
geocoder.geocode ( { 'address': address}, function(results, status) {
if (status == google.maps.GeocoderStatus.OK) {
map.setCenter(results [0].geometry.location);
marker.setPosition(results [0].geometry.location);
map.setZoom(15);
}
else {
alert("Geocode was not successful for the following reason: " + status);
}
});
}
function toggleLayer(i) {
if(layers[i].getMap() === null) {
layers[i].setMap(map);
}
else {
layers[i].setMap(null);
}
}
google.maps.event.addDomListener(window, 'load', initialize);
</script>
<div id="map_canvas" style="position:absolute; width:100%; height:100%; top:0px; left:0px; right:0px; bottom:0px; z-index:100; background-color:#000;"></div>
Suppress the automatic info window generation, and use the click event to manually handle the data.
Here's an example that is removing the target="_blank" attribute from the info window links: http://people.missouristate.edu/chadkillingsworth/mapsexamples/removekmllinktargets.js
You can try adding a method like this to all your markers.
// generalized click handler
function addClickHandler(item, content, position) {
google.maps.event.addListener(item, 'click', function () {
infoWindow.close();
infoWindow.setContent(content);
infoWindow.setPosition(position);
infoWindow.open(map);
});
}
When I am styling with KML anything passed through in <[CDATA tag is formatted. So adding within the cdata is allowed.
Also heres an example from GOOGLE
http://google-maps-utility-library-v3.googlecode.com/svn/trunk/infobubble/examples/example.html
I have a problem with calendar,I want to paint special days different color For example
On calendar
03.06.2011 Day--->blue
04.06.2011 day---->red
12.06.2011-04.07.2011 Days ----> yellow
More than one color I want to use selected day
You can use javascript to do that,
Refer to JSFiddle Here
You can add custom special day,
$(document).ready(function () {
$('#calendar').fullCalendar({
theme: true,
header: {
left: 'prev,next today',
center: 'title',
right: 'month,agendaWeek,agendaDay'
},
defaultDate: '2014-07-04',
editable: true,
events: [{
title: 'All Day Event',
start: '2014-07-01'
}, {
title: 'Long Event',
start: '2014-07-07',
end: '2014-07-10'
}, {
id: 999,
title: 'Repeating Event',
start: '2014-07-09T16:00:00'
}, {
id: 999,
title: 'Repeating Event',
start: '2014-07-16T16:00:00'
}, {
title: 'Meeting',
start: '2014-07-12T10:30:00',
end: '2014-07-12T12:30:00'
}, {
title: 'Lunch',
start: '2014-07-12T12:00:00'
}, {
title: 'Birthday Party',
start: '2014-07-13T07:00:00'
}, {
title: 'Click for Google',
url: 'http://google.com/',
start: '2014-07-28'
}],
eventAfterAllRender: function (view) {
//Use view.intervalStart and view.intervalEnd to find date range of holidays
//Make ajax call to find holidays in range.
var fourthOfJuly = moment('2014-07-04','YYYY-MM-DD');
var holidays = [fourthOfJuly];
var holidayMoment;
for(var i = 0; i < holidays.length; i++) {
holidayMoment = holidays[i];
if (view.name == 'month') {
$("td[data-date=" + holidayMoment.format('YYYY-MM-DD') + "]").addClass('holiday');
} else if (view.name =='agendaWeek') {
var classNames = $("th:contains(' " + holidayMoment.format('M/D') + "')").attr("class");
if (classNames != null) {
var classNamesArray = classNames.split(" ");
for(var i = 0; i < classNamesArray.length; i++) {
if(classNamesArray[i].indexOf('fc-col') > -1) {
$("td." + classNamesArray[i]).addClass('holiday');
break;
}
}
}
} else if (view.name == 'agendaDay') {
if(holidayMoment.format('YYYY-MM-DD') == $('#calendar').fullCalendar('getDate').format('YYYY-MM-DD')) {
$("td.fc-col0").addClass('holiday');
};
}
}
}
});
});
For changing the colour, you can edit background on .holiday in css file
body {
margin: 0;
padding: 50px 0 0 0;
font-family:"Lucida Grande", Helvetica, Arial, Verdana, sans-serif;
font-size: 14px;
}
#calendar {
width: 100%;
}
.holiday {
background: lightgray;
}
Hope it can help you