below is the code ,there is an array which contains names of 62 places,but while geocoding not all 62 places are getting marked on the map,only very few places are getting marked on map.
function createMarker(latlng){
var marker = new google.maps.Marker({
position: latlng,
map: map
});
var markers = ["chennai", "Kashmir", "Russia", "Jalandhar", "Netherlands", "Koregaon Park", "Piparia", "South Africa", "USA", "Siliguri", "Dhule", "United Kingdom", "Shendra", "Baramulla", "Haridwar", "New Delhi", "United Arab Emirates", "Ladakh", "Noida", "Shanghai", "Gurgaon", "Rajouri", "Netherlands", "Ranchi", "Abruzzo", "Waluj", "Ho Chi Minh", "Germany", "Bhopal", "Soenderborg", "Delhi", "Dindori", "Brazil", "Magarpatta", "Chennai", "Taiwan", "Jharsuguda", "Rakholi", "Turkey", "Denmark", "Bangalore", "Selangor", "Rajgarh", "Vardhaman Industrial Estate", "Sagar", "Jammu", "Beijing", "Jamshedpur", "Jabalpur", "SIDCUL", "Hyderabad", "PTB Rakholi", "Haimen", "Ahmedabad", "OFC Rakholi", "Mumbai", "Bafliaz", "Srinagar", "Argentina", "Dadra", "Mexico", "Tiruchirappalli"]
var map;
function initializeMaps(eventObject)
{
map = new google.maps.Map(document.getElementById('googlemap1'), {
zoom: 5,
center: new google.maps.LatLng(21.0000,78.0000),
mapTypeId: google.maps.MapTypeId.ROADMAP
});
var infowindow = new google.maps.InfoWindow();
var geocoder = new google.maps.Geocoder();
var marker, i;
for (i = 0; i < markers.length; i++) {
geocodeAddress(markers[i]);
}
}
function geocodeAddress(location) {
var geocoder= new google.maps.Geocoder();
geocoder.geocode( { 'address': location}, function(results, status) {
// alert(status);
if (status == google.maps.GeocoderStatus.OK) {
// alert(results[0].geometry.location);
// map.setCenter(results[0].geometry.location);
createMarker(results[0].geometry.location,location);
}
else
{
alert("some problem in geocode" + status);
}
});
}
function createMarker(latlng){
var marker = new google.maps.Marker({
position: latlng,
map: map
});
hi i found a work around to mark all the places.at a time google geocodes only 11 requests,so i added a delay between every iteration and since there was delay between each hit to the geocoding server,geocoding was possible for all the places in the array.
for(i = 1; i < markers.length; i++){
(function(i){
setTimeout(function(){
geocodeAddress(markers[i]);
}, 1000 * i);
}(i));
}
Related
I wanna add some data or string to an array list strings in my rest api data, an it's not working.
I don't know why.
Here is my api data which i got from my api in my local server the json data is below here.
"hotels": [ {
"image": "http://0.0.0.0:8080/uploads/users/IWpEqUWxUxbWsmIoYfUX/95024057775943965869.jpg",
"bedPrice": "10",
"roomPrice": "30",
"rooms": "50",
"ac": "yes",
"address": "kaambo",
"latitude": "43.0890",
"laundry": "yes",
"name": "jaabir",
"location": "Bosaso",
"details": "Hosbitaalka Sixa Garoowe waxa ka howlgali doona 23/06/2022 Dr. Ahmed Bashe (abu-shafi) (FCPS MRCS-UK) oo ka socda Hosbitalka Shaafi Muqdisho kuna takhasusay qalliimada LAPAROSCOPY-ga sida Xameetida,Uur-kujirta,Eernada,Burooyinka IWM. Dr-ku wuxuu si joogta ah u imanayaa bil kasta insha allah. Wac: 7747373, 5065444, 5065333.Hosbitaalka Sixa Garoowe waxa ka howlgali doona 23/06/2022 Dr. Ahmed Bashe (abu-shafi) (FCPS MRCS-UK) oo ka socda Hosbitalka Shaafi Muqdisho kuna takhasusay qalliimada LAPAROSCOPY-ga sida Xameetida,Uur-kujirta,Eernada,Burooyinka IWM. Dr-ku wuxuu si joogta ah u imanayaa bil kasta insha allah. Wac: 7747373, 5065444, 5065333.Hosbitaalka Sixa Garoowe waxa ka howlgali doona 23/06/2022 Dr. Ahmed Bashe (abu-shafi) (FCPS MRCS-UK) oo ka socda Hosbitalka Shaafi Muqdisho kuna takhasusay qalliimada LAPAROSCOPY-ga sida Xameetida,Uur-kujirta,Eernada,Burooyinka IWM. Dr-ku wuxuu si joogta ah u imanayaa bil kasta insha allah. Wac: 7747373, 5065444, 5065333.",
"id": "456",
"beds": "100",
"internet": "yes",
"fastfood": "yes",
"longitude": "23.0890",
"images": [
"http://0.0.0.0:8080/uploads/users/IWpEqUWxUxbWsmIoYfUX/95024057775943965869.jpg",
"http://0.0.0.0:8080/uploads/users/IWpEqUWxUxbWsmIoYfUX/95024057775943965869.jpg",
"http://0.0.0.0:8080/uploads/users/IWpEqUWxUxbWsmIoYfUX/95024057775943965869.jpg"
],
"likedUsers": [
"HftAroebyiUhaKSmsyrc"
],
"adress": "laanta hawada"
}
]
And here is dart code.
_likeUser()async{
String api = "http://0.0.0.0:8080/path=hotels/456";
// this list from previous page _data['likedUsers'].toList();
List<String> likes = widget.likedUsers as List<String>;
if(widget.likedUser.contain(widget.currentUser){
setState((){ _isLiked = false;});
var likeRemoved = likes.remove(widget.currentUser);
await http.patch(Uri.parse(api), body: json.encode(<String, Object>{
"likedUsers": [likeRemoved]
});
}else{
var likeAdded = likes.add(widget.currentUser);
await http.patch(Uri.parse(api), body: json.encode(<String, Object>{
"likedUsers": [likeAdded]
});
setState((){
_isLiked = true;
});
}
}
The solution is here
_likeUser()async{
String api = "http://0.0.0.0:8080/path=hotels/456";
// this list from previous page _data['likedUsers'].toList();
var likes = widget.likedUsers;
if(widget.likedUser.contain(widget.currentUser){
// i removed item to list in this here
var remove = likes.remove(widget.currentUser);
setState((){ _isLiked = false;});
await http.patch(Uri.parse(api), body: json.encode(<String, Object>{
"likedUsers": likes,
});
}else{
// i added item to list in this here
var add = likes.add(widget.currentUser);
await http.patch(Uri.parse(api), body: json.encode(<String, Object>{
"likedUsers": likes,
});
setState((){
_isLiked = true;
});
}
}
I have a ColumnSeries chart that looks like this:
When I hover a bar I want it to change color to #ffe876.
I have tried to add a hoverState but it doesnt work:
// Create a hover state
var hoverState = valueAxis.columns.template.states.create("hover");
hoverState.properties.fill = am4core.color("#ffe876");
This is my code:
<script>
am4core.ready(function() {
var chart = am4core.create("chartdiv_visits_per_week", am4charts.XYChart);
chart.data = [
{
"x": "31",
"value": 1
},
{
"x": "32",
"value": 2
},
{
"x": "33",
"value": 2
}
];
// Create axes
var categoryAxis = chart.xAxes.push(new am4charts.CategoryAxis());
categoryAxis.dataFields.category = "x";
categoryAxis.renderer.grid.template.disabled = true;
categoryAxis.renderer.labels.template.disabled = true;
var valueAxis = chart.yAxes.push(new am4charts.ValueAxis());
valueAxis.renderer.grid.template.disabled = true;
valueAxis.renderer.labels.template.disabled = true;
// Create series
var series1 = chart.series.push(new am4charts.ColumnSeries);
series1.dataFields.valueY = "value";
series1.dataFields.categoryX = "x";
series1.name = "Human unique";
series1.tooltipText = "Human unique week {categoryX}: {valueY}";
series1.fill = am4core.color("#f2a654");
series1.stroke = am4core.color("#f4b570");
series1.strokeWidth = 0;
// Tooltips
chart.cursor = new am4charts.XYCursor();
chart.cursor.snapToSeries = series;
chart.cursor.xAxis = valueAxis;
}); // end am4core.ready()
</script>
<div id="chartdiv_visits_per_week" style="height: 100px;"></div>
What can I do to make the bar change color when I hover it?
You need to add the state to the series, not the axis.
var hoverState = series1.columns.template.states.create("hover");
hoverState.properties.fill = am4core.color("#ffe876");
Demo below:
var chart = am4core.create("chartdiv_visits_per_week", am4charts.XYChart);
chart.data = [
{
"x": "31",
"value": 1
},
{
"x": "32",
"value": 2
},
{
"x": "33",
"value": 2
}
];
// Create axes
var categoryAxis = chart.xAxes.push(new am4charts.CategoryAxis());
categoryAxis.dataFields.category = "x";
categoryAxis.renderer.grid.template.disabled = true;
categoryAxis.renderer.labels.template.disabled = true;
var valueAxis = chart.yAxes.push(new am4charts.ValueAxis());
valueAxis.renderer.grid.template.disabled = true;
valueAxis.renderer.labels.template.disabled = true;
// Create series
var series1 = chart.series.push(new am4charts.ColumnSeries);
series1.dataFields.valueY = "value";
series1.dataFields.categoryX = "x";
series1.name = "Human unique";
series1.tooltipText = "Human unique week {categoryX}: {valueY}";
series1.fill = am4core.color("#f2a654");
series1.stroke = am4core.color("#f4b570");
series1.strokeWidth = 0;
// Create a hover state
var hoverState = series1.columns.template.states.create("hover");
hoverState.properties.fill = am4core.color("#ffe876");
// Tooltips
chart.cursor = new am4charts.XYCursor();
chart.cursor.snapToSeries = series1;
chart.cursor.xAxis = valueAxis;
<script src="//cdn.amcharts.com/lib/4/core.js"></script>
<script src="//cdn.amcharts.com/lib/4/charts.js"></script>
<script src="//cdn.amcharts.com/lib/4/themes/animated.js"></script>
<div id="chartdiv_visits_per_week" style="height: 100px;"></div>
I thought this would fairly straightforward.
I am trying to create a multi series stacked timeseries chart, at the moment I am unable to make it work with even one of the series series.
var rawdata = [{compoundInterest:100,
date:"2020-12-01",
investment:1000,
label:1,
lostToFees:0.25074911830097335,
returnOnInvestment:4.374847450990728
},
{
compoundInterest:104.83147148630928,
date:"2021-01-01",
investment:1100,
label:1,
lostToFees:0.5287042515940357,
returnOnInvestment:4.374847450990728
},
{
compoundInterest:105.30923247234422,
date:"2021-02-01",
investment:1200,
label:1,
lostToFees:0.8340920982343505,
returnOnInvestment:9.187179647080587
},
{
compoundInterest:105.8101368090525,
date:"2021-03-01",
investment:1300,
label:1,
lostToFees:1.167140792415239,
returnOnInvestment:14.436996588269672
},
{
compoundInterest:106.33619967408472,
date:"2021-04-01",
investment:1400,
label:1,
lostToFees:1.5280799122806457,
returnOnInvestment:20.124298274557844
},
{
compoundInterest:106.88944506118636,
date:"2021-05-01",
investment:1500,
label:1,
lostToFees:1.9171404880812588,
returnOnInvestment:26.24908470594496
},
{
compoundInterest:107.47190581876677,
date:"2021-06-01",
investment:1600,
label:1,
lostToFees:2.3345550103745154,
returnOnInvestment:32.81135588243117
},
{
compoundInterest:108.08562368863693,
date:"2021-07-01",
investment:1700,
label:1,
lostToFees:2.7805574382662144,
returnOnInvestment:39.81111180401638
},
{
compoundInterest:108.73264934491681,
date:"2021-08-01",
investment:1800,
label:1,
lostToFees:3.255383207697605,
returnOnInvestment:47.24835247070063
},
{
compoundInterest:109.41504243311283,
date:"2021-09-01",
investment:1900,
label:1,
lostToFees:3.759269239776131,
returnOnInvestment:55.123077882483805
},
{
compoundInterest:110.13487160936633,
date:"2021-10-01",
investment:2000,
label:1,
lostToFees:4.292453949148694,
returnOnInvestment:63.435288039366114
}]
am4core.ready(function() {
am4core.addLicense("xxxxxxxx");
var projectionChart = am4core.create("projectionchartdiv", am4charts.XYChart);
var chartData = rawdata;
for (i = 0; i < chartData.length; i++) {
chartData[i].date = new Date(chartData[i].date);
}
var projectionChart = am4core.create("profitabilitychartdiv", am4charts.XYChart);
projectionChart.data = chartData;
var dateAxis = projectionChart.xAxes.push(new am4charts.DateAxis());
// Create value axis
var valueAxis = projectionChart.yAxes.push(new am4charts.ValueAxis());
valueAxis.tooltip.disabled = true;
valueAxis.title.text = "$";
// Create series
var series = projectionChart.series.push(new am4charts.LineSeries());
series.dataFields.dateX = "date";
series.dataFields.valueY = "compoundInterest";
series.fillOpacity = 0.3;
});
Currently it just renders an SVG with empty g tags.
Can anyone point me in the direction of where I'm going wrong?
I am somewhat inexperienced with amcharts and I'm flumoxxed.
Thank You
how can I find duplicate values on a list,
Let's say I got a List like this:
List<Map<String, dynamic>> users = [
{ "name": 'John', 'age': 18 },
{ "name": 'Jane', 'age': 21 },
{ "name": 'Mary', 'age': 23 },
{ "name": 'Mary', 'age': 27 },
];
How I can iterate the list to know if there are users with the same name?
A simple way would be this:
void main() {
List<Map<String, dynamic>> users = [
{ "name": 'John', 'age': 18 },
{ "name": 'Jane', 'age': 21 },
{ "name": 'Mary', 'age': 23 },
{ "name": 'Mary', 'age': 27 },
];
List names = []; // List();
users.forEach((u){
if (names.contains(u["name"])) print("duplicate ${u["name"]}");
else names.add(u["name"]);
});
}
Result:
duplicate Mary
Probably a cleaner solution with extensions.
By declaring:
extension ListExtensions<E> on List<E> {
List<E> removeAll(Iterable<E> allToRemove) {
if (allToRemove == null) {
return this;
} else {
allToRemove.forEach((element) {
this.remove(element);
});
return this;
}
}
List<E> getDupes() {
List<E> dupes = List.from(this);
dupes.removeAll(this.toSet().toList());
return dupes;
}
}
then you can find your duplicates by calling List.getDupes()
Note that the function removeAll doesn't exist in my current Dart library, in case you're reading this when they implement it somehow.
Also keep in mind the equals() function. In a List<String>, ["Rafa", "rafa"] doesn't contain duplicates.
If you indeed want to achieve this level of refinement, you'd have to apply a distinctBy function:
extension ListExtensions<E> on List<E> {
List<E> removeAll(Iterable<E> allToRemove) {
if (allToRemove == null) {
return this;
} else {
allToRemove.forEach((element) {
this.remove(element);
});
return this;
}
}
List<E> distinctBy(predicate(E selector)) {
HashSet set = HashSet();
List<E> list = [];
toList().forEach((e) {
dynamic key = predicate(e);
if (set.add(key)) {
list.add(e);
}
});
return list;
}
List<E> getDupes({E Function(E) distinctBy}) {
List<E> dupes = List.from(this);
if (distinctBy == null) {
dupes.removeAll(this.toSet().toList());
} else {
dupes.removeAll(this.distinctBy(distinctBy).toSet().toList());
}
return dupes;
}
}
I had a feeling Rafael's answer had code similar to Kotlin so I dug around and saw that these functions are part of the kt_dart library which basically gets the Kotlin standard library and ports it to Dart.
I come from a Kotlin background so I use this package often. If you use it, you can simply make the extension this much shorter:
extension KtListExtensions<T> on KtList<T> {
KtList<T> get duplicates => toMutableList()..removeAll(toSet().toList());
}
just make sure to add kt_dart on your pubspec: kt_dart: ^0.8.0
Example
final list = ['apples', 'oranges', 'bananas', 'apples'].toImmutableList();
final duplicates = list.duplicates; // should be ['apples'] in the form of an ImmutableList<String>
void main() {
List<String> country = [
"Nepal",
"Nepal",
"USA",
"Canada",
"Canada",
"China",
"Russia",
];
List DupCountry = [];
country.forEach((dup){
if(DupCountry.contains(dup)){
print("Duplicate in List= ${dup}");
}
else{
DupCountry.add(dup);
}
});
}
I have created a series chart using AmCharts version 4.
I have a red line that represents created cases and green line that represent closed cases. However my legend is blue for both lines. How can I get the legend color to fit the graph color?
I added color in the data section.
My code is here:
<script>
am4core.ready(function() {
var chart = am4core.create("chartdiv_cases_created_per_day", am4charts.XYChart);
chart.data = [
{
"x": "Mon 1",
"created_value": 1,
"created_color": am4core.color("red"),
"closed_value": 2,
"closed_color": am4core.color("green")
},
{
"x": "Tue 2",
"created_value": 4,
"created_color": am4core.color("red"),
"closed_value": 2,
"closed_color": am4core.color("green")
},
{
"x": "Wed 3",
"created_value": 3,
"created_color": am4core.color("red"),
"closed_value": 1,
"closed_color": am4core.color("green")
}
];
// Create axes
var categoryAxis = chart.xAxes.push(new am4charts.CategoryAxis());
categoryAxis.dataFields.category = "x";
var valueAxis = chart.yAxes.push(new am4charts.ValueAxis());
// Create series
var series1 = chart.series.push(new am4charts.LineSeries());
series1.dataFields.valueY = "created_value";
series1.dataFields.categoryX = "x";
series1.name = "Opprettet";
series1.propertyFields.stroke = "created_color";
series1.propertyFields.fill = "created_color";
series1.strokeWidth = 1;
series1.tooltipText = "Opprettet: {valueY}";
// Create series 2
var series2 = chart.series.push(new am4charts.LineSeries());
series2.dataFields.valueY = "closed_value";
series2.dataFields.categoryX = "x";
series2.name = "Lukket";
series2.propertyFields.stroke = "closed_color";
series2.propertyFields.fill = "closed_color";
series2.tooltipText = "Lukket: {valueY}";
// Legend
chart.legend = new am4charts.Legend();
chart.legend.labels.template.text = "[bold {color}]{name}[/]";
// Tooltips
chart.cursor = new am4charts.XYCursor();
chart.cursor.snapToSeries = series;
chart.cursor.xAxis = valueAxis;
}); // end am4core.ready()
</script>
<div id="chartdiv_cases_created_per_day" style="height: 300px;"></div>
Seems like you're combining data and js-objects. That might be what you want but I would perhaps suggest that you separate them, as it would make it easier that day you need to add data from server.
There is no need to include the color for each point. Most likely you want the same color for all the points in the same series.
That you can achieve like this:
series.stroke = am4core.color(color);
series.fill = am4core.color(color);
You have already named the series in the data as created_value and closed_value so we can easily make a function that adds the data, names the series' and colorize them :)
In which turn you just call
createSeries("created_value", "Created", "red");
createSeries("closed_value", "Closed", "green");
Full code (I'm sure there's more refactoring you could do):
am4core.useTheme(am4themes_animated); // Not needed, but looks cool ;)
// Create chart instance
var chart = am4core.create("chartdiv_cases_created_per_day", am4charts.XYChart);
// Add data
chart.data = [{
"date": new Date(2018, 0, 1),
"created_value": 362,
"closed_value": 699
}, {
"date": new Date(2018, 0, 2),
"created_value": 269,
"closed_value": 450
}, {
"date": new Date(2018, 0, 3),
"created_value": 700,
"closed_value": 358
}, {
"date": new Date(2018, 0, 4),
"created_value": 490,
"closed_value": 367
}, {
"date": new Date(2018, 0, 5),
"created_value": 500,
"closed_value": 485
}, {
"date": new Date(2018, 0, 6),
"created_value": 550,
"closed_value": 354
}, {
"date": new Date(2018, 0, 7),
"created_value": 420,
"closed_value": 350,
}];
// Create axes
var dateAxis = chart.xAxes.push(new am4charts.DateAxis());
dateAxis.renderer.grid.template.location = 0;
dateAxis.renderer.minGridDistance = 30;
var valueAxis = chart.yAxes.push(new am4charts.ValueAxis());
// Create series
function createSeries(field, name, color) {
var series = chart.series.push(new am4charts.LineSeries());
series.dataFields.valueY = field;
series.dataFields.dateX = "date";
series.name = name;
series.tooltipText = "{dateX}: [b]{valueY}[/]";
series.strokeWidth = 2;
series.stroke = am4core.color(color);
series.fill = am4core.color(color);
// Set up tooltip
series.adapter.add("tooltipText", function(ev) {
var text = "[bold]{dateX}[/]\n"
chart.series.each(function(item) {
text += "[" + item.stroke.hex + "]●[/] " + item.name + ": {" + item.dataFields.valueY + "}\n";
});
return text;
});
series.tooltip.getFillFromObject = false;
series.tooltip.background.fill = am4core.color("#fff");
series.tooltip.label.fill = am4core.color("#00");
var bullet = series.bullets.push(new am4charts.CircleBullet());
bullet.circle.stroke = am4core.color("#fff");
bullet.circle.strokeWidth = 2;
return series;
}
createSeries("created_value", "Åpnet", "red");
createSeries("closed_value", "Lukket", "green");
chart.legend = new am4charts.Legend();
chart.cursor = new am4charts.XYCursor();
chart.cursor.maxTooltipDistance = 0;
<script src="//www.amcharts.com/lib/4/core.js"></script>
<script src="//www.amcharts.com/lib/4/charts.js"></script>
<script src="//www.amcharts.com/lib/4/themes/animated.js"></script>
<div id="chartdiv_cases_created_per_day"></div>