Hi I want all the slices in a Google Pie Chart should be offset,
I have an example which offset slices with hardcoded. But I need all the slices should be offset to a specific value.
The example I have is:
<html>
<head>
<script type="text/javascript" src="https://www.google.com/jsapi"></script>
<script type="text/javascript">
google.load("visualization", "1", {packages:["corechart"]});
google.setOnLoadCallback(drawChart);
function drawChart() {
var data = google.visualization.arrayToDataTable([
['Language', 'Speakers (in millions)'],
['Assamese', 13], ['Bengali', 83], ['Bodo', 1.4],
['Dogri', 2.3], ['Gujarati', 46], ['Hindi', 300],
['Kannada', 38], ['Kashmiri', 5.5], ['Konkani', 5],
['Maithili', 20], ['Malayalam', 33], ['Manipuri', 1.5],
['Marathi', 72], ['Nepali', 2.9], ['Oriya', 33],
['Punjabi', 29], ['Sanskrit', 0.01], ['Santhali', 6.5],
['Sindhi', 2.5], ['Tamil', 61], ['Telugu', 74], ['Urdu', 52]
]);
var options = {
title: 'Indian Language Use',
legend: 'none',
pieSliceText: 'label',
slices: { 4: {offset: 0.2},
12: {offset: 0.3},
14: {offset: 0.4},
15: {offset: 0.5},
},
};
var chart = new google.visualization.PieChart(document.getElementById('piechart'));
chart.draw(data, options);
}
</script>
</head>
<body>
<div id="piechart" style="width: 900px; height: 500px;"></div>
</body>
</html>
for(i = 0;i < data.getNumberOfRows();i++){
offsetObj[i] = {offset:0.4};
}
This is the solution to populate a object like {4: {offset: 0.4}, 12: {offset: 0.4}, 14: {offset: 0.4},15: {offset: 0.4},}
Related
Let's say I'm a purple polyline and am using a purple icon for markers with one layer but wanted to use orange polylines and orange marker icon's for another layer. How would I do that? Is there an onlayerchange event? But even if there were how could I change all the icon's for all the markers? Alternatively, maybe I could delete all the markers and then replace them, albeit with a different icon, but idk how to delete markers, en masse or otherwise.
Any ideas?
I am not sure if I understood correctly but here is what you can do.
If you want to toggle between markers with polylines and assign different color you can use this plugin and return icon markers by passing the color.
const icon = (color) => L.icon({
iconSize: [25, 41],
iconAnchor: [10, 41],
popupAnchor: [2, -40],
iconUrl: `https://raw.githubusercontent.com/pointhi/leaflet-color-markers/master/img/marker-icon-2x-${color}.png`,
shadowUrl: "https://unpkg.com/leaflet#1.6/dist/images/marker-shadow.png"
});
and then you have the latlngs and assing to the markers an icon with the prefered color
var places1 = [
{ latlng: [39.61, -105.02], popup: 'This is Littleton, CO.'},
{ latlng: [39.74, -104.99], popup: 'This is Denver, CO.'},
{latlng: [39.73, -104.8], popup: 'This is Aurora, CO.'}
];
places1.forEach(place => L.marker(place.latlng, {
icon: icon('violet')
}).bindPopup(place.popup).addTo(cities1))
and here define the polyline color
L.polyline(places1.map(({latlng}) => latlng), {
color: 'purple'
}).addTo(cities1);
Similarly you can follow the same steps for any other overlay
<!DOCTYPE html>
<html>
<head>
<title>Layers Control Tutorial - Leaflet</title>
<meta charset="utf-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<link rel="shortcut icon" type="image/x-icon" href="docs/images/favicon.ico" />
<link rel="stylesheet" href="https://unpkg.com/leaflet#1.7.1/dist/leaflet.css" integrity="sha512-xodZBNTC5n17Xt2atTPuE1HxjVMSvLVW9ocqUKLsCC5CXdbqCmblAshOMAS6/keqq/sMZMZ19scR4PsZChSR7A==" crossorigin="" />
<script src="https://unpkg.com/leaflet#1.7.1/dist/leaflet.js" integrity="sha512-XQoYMqMTK8LvdxXYG3nZ448hOEQiglfqkJs1NOQV44cWnUrBc8PkAOcXy20w0vlaXaVUearIOBhiXZ5V3ynxwA==" crossorigin=""></script>
<style>
html,
body {
height: 100%;
margin: 0;
}
#map {
width: 600px;
height: 400px;
}
</style>
</head>
<body>
<div id='map'></div>
<script>
var cities1 = L.layerGroup();
var cities2 = L.layerGroup();
var map = L.map('map', {
center: [39.73, -104.99],
zoom: 10,
});
L.tileLayer('https://{s}.tile.openstreetmap.org/{z}/{x}/{y}.png', {
attribution: '© OpenStreetMap contributors'
}).addTo(map);
const icon = (color) => L.icon({
iconSize: [25, 41],
iconAnchor: [10, 41],
popupAnchor: [2, -40],
iconUrl: `https://raw.githubusercontent.com/pointhi/leaflet-color-markers/master/img/marker-icon-2x-${color}.png`,
shadowUrl: "https://unpkg.com/leaflet#1.6/dist/images/marker-shadow.png"
});
var places1 = [{
latlng: [39.61, -105.02],
popup: 'This is Littleton, CO.'
},
{
latlng: [39.74, -104.99],
popup: 'This is Denver, CO.'
},
{
latlng: [39.73, -104.8],
popup: 'This is Aurora, CO.'
}
];
places1.forEach(place => L.marker(place.latlng, {
icon: icon('violet')
}).bindPopup(place.popup).addTo(cities1))
var places2 = [{
latlng: [39.77, -105.23],
popup: 'This is Golden, CO.'
},
{
latlng: [39.75, -105.16],
popup: 'This is Applewood, CO.'
}
];
places2.forEach(place => L.marker(place.latlng, {
icon: icon('orange')
}).bindPopup(place.popup).addTo(cities2))
L.polyline(places1.map(({
latlng
}) => latlng), {
color: 'purple'
}).addTo(cities1);
L.polyline(places2.map(({
latlng
}) => latlng), {
color: 'orange'
}).addTo(cities2);
var overlays = {
"cities1": cities1.addTo(map),
"cities2": cities2
};
L.control.layers(null, overlays).addTo(map);
</script>
</body>
</html>
For the scenario you want to change the color upon baselayer change:
you can still reuse icon() function and use now the follow chunk to change the color dynamically when the layer is changed by listening to map's baselayerchange event
function addMarkersAndPolyline(color) {
places.forEach(place => L.marker(place.latlng, {
icon: icon(color)
}).bindPopup(place.popup).addTo(cities))
L.polyline(places.map(({
latlng
}) => latlng), {
color
}).addTo(cities);
}
<!DOCTYPE html>
<html>
<head>
<title>Layers Control Tutorial - Leaflet</title>
<meta charset="utf-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<link rel="shortcut icon" type="image/x-icon" href="docs/images/favicon.ico" />
<link rel="stylesheet" href="https://unpkg.com/leaflet#1.7.1/dist/leaflet.css" integrity="sha512-xodZBNTC5n17Xt2atTPuE1HxjVMSvLVW9ocqUKLsCC5CXdbqCmblAshOMAS6/keqq/sMZMZ19scR4PsZChSR7A==" crossorigin="" />
<script src="https://unpkg.com/leaflet#1.7.1/dist/leaflet.js" integrity="sha512-XQoYMqMTK8LvdxXYG3nZ448hOEQiglfqkJs1NOQV44cWnUrBc8PkAOcXy20w0vlaXaVUearIOBhiXZ5V3ynxwA==" crossorigin=""></script>
<style>
html,
body {
height: 100%;
margin: 0;
}
#map {
width: 600px;
height: 400px;
}
</style>
</head>
<body>
<div id='map'></div>
<script>
var cities = L.layerGroup();
var map = L.map('map', {
center: [39.73, -104.99],
zoom: 10,
});
var mbAttr = 'Map data © OpenStreetMap contributors, ' +
'Imagery © Mapbox',
mbUrl = 'https://api.mapbox.com/styles/v1/{id}/tiles/{z}/{x}/{y}?access_token=pk.eyJ1IjoibWFwYm94IiwiYSI6ImNpejY4NXVycTA2emYycXBndHRqcmZ3N3gifQ.rJcFIG214AriISLbB6B5aw';
var grayscale = L.tileLayer(mbUrl, {
id: 'mapbox/light-v9',
tileSize: 512,
zoomOffset: -1,
attribution: mbAttr
}),
streets = L.tileLayer(mbUrl, {
id: 'mapbox/streets-v11',
tileSize: 512,
zoomOffset: -1,
attribution: mbAttr
});
var baseLayers = {
"Grayscale": grayscale.addTo(map),
"Streets": streets
};
const icon = (color) => L.icon({
iconSize: [25, 41],
iconAnchor: [10, 41],
popupAnchor: [2, -40],
iconUrl: `https://raw.githubusercontent.com/pointhi/leaflet-color-markers/master/img/marker-icon-2x-${color}.png`,
shadowUrl: "https://unpkg.com/leaflet#1.6/dist/images/marker-shadow.png"
});
var places = [{
latlng: [39.61, -105.02],
popup: 'This is Littleton, CO.'
},
{
latlng: [39.74, -104.99],
popup: 'This is Denver, CO.'
},
{
latlng: [39.73, -104.8],
popup: 'This is Aurora, CO.'
}
];
function addMarkersAndPolyline(color) {
places.forEach(place => L.marker(place.latlng, {
icon: icon(color)
}).bindPopup(place.popup).addTo(cities))
L.polyline(places.map(({
latlng
}) => latlng), {
color
}).addTo(cities);
}
addMarkersAndPolyline('violet')
map.on('baselayerchange', function(e) {
cities.clearLayers();
if (e.name === 'Streets') {
addMarkersAndPolyline('orange');
return
}
addMarkersAndPolyline('violet');
});
var overlays = {
"cities1": cities.addTo(map),
};
L.control.layers(baseLayers, overlays).addTo(map);
</script>
</body>
</html>
I want to use the pic userPosition.png on my location when I accept the prompt of asking for location, right now it doesn't work.
<!DOCTYPE html>
<html lang="en">
<head>
<link
rel="stylesheet"
href="https://unpkg.com/leaflet#1.6.0/dist/leaflet.css"
integrity="sha512-xwE/Az9zrjBIphAcBb3F6JVqxf46+CDLwfLMHloNu6KEQCAWi6HcDUbeOfBIptF7tcCzusKFjFw2yuvEpDL9wQ=="
crossorigin=""
/>
<script
src="https://unpkg.com/leaflet#1.6.0/dist/leaflet.js"
integrity="sha512-gZwIG9x3wUXg2hdXF6+rVkLF/0Vi9U8D2Ntg4Ga5I5BZpVkVxlJWbSQtXPSiUTtC0TjtGOmxa1AJPuV0CPthew=="
crossorigin=""
></script>
<script src="./leaflet/leaflet.js"></script>
<style></style>
</head>
<body>
<h2 style="text-align: center;">My interactive map</h2>
<div id="mapid" style="width: 100%;height: 500px;"></div>
<script>
var mymap;
mymap = L.map("mapid").setView([55.70584, 13.19021], 12);
L.tileLayer(
"https://api.mapbox.com/styles/v1/{id}/tiles/{z}/{x}/{y}?access_token=pk.eyJ1IjoibWFkc2pvaGFuc2VuIiwiYSI6ImNrNWkxZnA3bzA5NnIza3M2cGczNnprMHcifQ.Z2h9R1lODB6zPZ2Ex92BrA",
{
attribution:
'Map data © OpenStreetMap contributors, CC-BY-SA, Imagery © Mapbox',
maxZoom: 18,
id: "mapbox/streets-v11",
accessToken: "your.mapbox.access.token"
}
).addTo(mymap);
function onLocationFound(e) {
var radius = e.accuracy / 2;
L.marker(e.latlng)
.addTo(map)
.bindPopup("You are within " + radius + " meters from this point")
.openPopup();
}
function onLocationError(e) {
alert(e.message);
}
map.on("locationfound", onLocationFound);
map.on("locationerror", onLocationError);
map.locate({
setView: true,
maxZoom: 16
});
var popup = L.popup();
var marker = L.marker();
var circle = L.circle();
var newMarkerIcon = L.Icon.extend({
options: {
iconSize: [38, 95],
shadowSize: [50, 64],
iconAnchor: [22, 94],
shadowAnchor: [4, 62],
popupAnchor: [-3, -76]
}
});
var blackMarker = new newMarkerIcon({ iconUrl: "userPosition.png" });
function onMapClick(e) {
L.marker(e.latlng, "Insert postition PNG pic here")
.addTo(mymap)
.bindPopup("You clicked the map at " + e.latlng.toString());
}
mymap.on("click", onMapClick);
</script>
</body>
</html>
Use this :
L.marker([e.latlng], { icon: YourIconHere })
.bindPopup("You are within " + radius + " meters from this point")
.openPopup()
.addTo(map);
You can also add circle like that:
L.circle([e.latlng], radius,
{ weight: 1, color: 'blue', fillColor: '#cacaca', fillOpacity: 0.2 })
.addTo(map);
I'm trying to light up "Ha Noi" and "Ho Chi Minh" using Google Charts but it's not working by modifying the example in the document.
google.charts.load('upcoming', {'packages':['geochart']});
google.charts.setOnLoadCallback(drawRegionsMap);
function drawRegionsMap() {
var data = google.visualization.arrayToDataTable([
['Provinces', 'Popularity'],
['Hanoi', 200],
['HCM', 300],
]);
var options = {region:'VN',resolution:'provinces'};
var chart = new google.visualization.GeoChart(document.getElementById('regions_div'));
chart.draw(data, options);
}
<script type="text/javascript" src="https://www.gstatic.com/charts/loader.js"></script>
<script type="text/javascript" src="https://www.google.com/jsapi"></script>
<div id="regions_div" style="width: 900px; height: 500px;"></div>
https://jsfiddle.net/na8hvgts/
I wonder whether it's possible at all to color provinces/states outside the US.Thanks.
try using the ISO 3166-2:VN codes
see following working snippet...
also, the colorAxis will default to the min and max values in the data
leaving the min value transparent when there are only two rows
set specific colorAxis.min / colorAxis.max to avoid...
google.charts.load('upcoming', {'packages':['geochart']});
google.charts.setOnLoadCallback(drawRegionsMap);
function drawRegionsMap() {
var data = google.visualization.arrayToDataTable([
['Provinces', 'Popularity'],
[{v: 'VN-HN', f: 'Hanoi'}, 200],
[{v: 'VN-SG', f: 'HCM'}, 300],
]);
var options = {
region:'VN',
resolution:'provinces',
colorAxis: {
minValue: 0,
maxValue: 400
}
};
var chart = new google.visualization.GeoChart(document.getElementById('regions_div'));
chart.draw(data, options);
}
<script type="text/javascript" src="https://www.gstatic.com/charts/loader.js"></script>
<script type="text/javascript" src="https://www.google.com/jsapi"></script>
<div id="regions_div" style="width: 900px; height: 500px;"></div>
I need to make chart which have use same data and display line chart and area chart.How to
composite line and area chart.
This is the data
['Year', 'Sales', 'Expenses','Total'],
['2004', 1000, 400,600],
['2005', 1100, 200,900],
['2006', 6000, 5000,1000],
['2007', 1000, 500,500]
And i need sales and expenses line chart and total area chart.
You could use a combo chart. These are A charts that lets you render each series as a different marker type from the following list: line, area, bars, candlesticks and stepped area.
To assign a default marker type for series, specify the seriesType property. Use the series property to specify properties of each series individually.
There is an example in the link that you could edit. You used to be able to do a compound chart but these are sadly deprecated now.
example of area and line:
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="content-type" content="text/html; charset=utf-8"/>
<title>
Google Visualization API Sample
</title>
<script type="text/javascript" src="http://www.google.com/jsapi"></script>
<script type="text/javascript">
google.load('visualization', '1', {packages: ['corechart']});
</script>
<script type="text/javascript">
function drawVisualization() {
// Create and populate the data table.
var data = google.visualization.arrayToDataTable([
['Year', 'Sales', 'Expenses', 'Total'],
['2004', 1000, 400, 600 ],
['2005', 1100, 200, 900 ],
['2006', 6000, 5000, 1000],
['2007', 1000, 500, 500 ],
]);
// Create and draw the visualization.
var ac = new google.visualization.ComboChart(document.getElementById('visualization'));
ac.draw(data, {
title : 'Sales & Expenses by Year',
width: 600,
height: 400,
vAxis: {title: "Sales"},
hAxis: {title: "Year"},
seriesType: "area",
series: {5: {type: "line"}}
});
}
google.setOnLoadCallback(drawVisualization);
</script>
</head>
<body style="font-family: Arial;border: 0 none;">
<div id="visualization" style="width: 600px; height: 400px;"></div>
</body>
</html>
prints
I am using google chart and I have the following example:
<html>
<head>
<script type="text/javascript" src="https://www.google.com/jsapi"></script>
<script type="text/javascript">
google.load("visualization", "1", {packages:["corechart"]});
google.setOnLoadCallback(drawChart);
function drawChart() {
var data = new google.visualization.DataTable();
data.addColumn('string', 'Year');
data.addColumn('number', 'Sales');
data.addColumn('number', 'Expenses');
data.addRows([
['2004', 1000, 400],
['2005', 1170, 460],
['2006', 860, 580],
['2007', 1030, 540]
]);
var options = {
width: 400, height: 240,
title: 'Company Performance'
};
var chart = new google.visualization.LineChart(document.getElementById('chart_div'));
chart.draw(data, options);
}
</script>
</head>
<body>
<div id="chart_div"></div>
</body>
</html>
When I add rows without any data in the last column, google chart can not draw the chart.
For example, with this data I don not get any chart:
data.addRows([
['2004', 1000, 400],
['2005', 1170, 460],
['2006', 860, 580],
['2007', , ]
]);
but if I add the last column, see below, it works.
data.addRows([
['2004', 1000, 400],
['2005', 1170, 460],
['2006', 860, 580],
['2007', , 122]
]);
Can someone can explain to me: What is the logic behind this?
Thanks!
It's probably because the range of the chart ends at the last row when you created the chart. If you add more rows, the range of the chart doesn't change so you'll either have to adjust the range (not sure if this is possible using the API) or create a new chart.