We Keep Coding

How to make buttons filter different data based on a category they select in Highcharts heatmap?

I have a heatmap that needs to be updated based on the different categories the user selects. Each category has their own sub-categories. For ex:
Prime:
'Prime Institutional'
'Prime Retail'
Government and Treasury:
'Government'
'Treasury'
Tax Exempt:
'Tax Exempt Retail'
'Tax Exempt Institutional'
This is how the data looks like in excel sheet.
Can someone please help me add this functionality to my chart?
function get_data() {
// Need to determine which elements are selected
let selected = ['Prime Institutional', 'Government'];
let result = {};
selected.forEach(sel => {
Object.keys(data[sel]).forEach(date => {
Object.keys(data[sel][date]).forEach(price => {
// Skip prices that fall outside the range
if ((price < ymin) || (price > ymax)) {
return;
}
// Create the maps if they don't exist
if (result[date] === undefined) {
result[date] = {};
}
if (result[date][price] === undefined) {
result[date][price] = {};
}
// Set the value
result[date][price] = data[sel][date][price];
})
})
});
// Make the data
let new_data = [];
Object.keys(result).forEach(date => {
Object.keys(result[date]).forEach(price => {
// console.log(parseFloat(price));
new_data.push({
x: parseInt(date),
y: (parseFloat(price)*10000),
value: result[date][price]
});
});
});
chart.series[0].setData(new_data);
}
An example of jsfiddle can be found here: https://jsfiddle.net/samwhite/oyzw75xj/4/

You can add a parameter to your function, for example selected and build data structure based on that parameter.
document.getElementById('primeBtn').addEventListener('click', function() {
set_data(['Prime Retail', 'Prime Institutional']);
});
document.getElementById('govtTreasBtn').addEventListener('click', function() {
set_data(['Treasury', 'Government']);
});
document.getElementById('taxExmptBtn').addEventListener('click', function() {
set_data(['Tax Exempt Institutional', 'Tax Exempt Retail']);
});
Live demo: https://jsfiddle.net/BlackLabel/df4urhva/
API Reference: https://api.highcharts.com/class-reference/Highcharts.Series#setData

Autocomplete radius search not working in my google maps

i want to implement radius on my gmaps Autocomplete place search,so i can get search hint from that radius first.
my code
var options = {
types: [],
componentRestrictions: {
'country': 'IN'
},
location : { lat: 17.3850, lng: 78.4867 },
radius : 5000
};
let inputPick = document.getElementById('pick');
const autocompletePick = new google.maps.places.Autocomplete(inputPick, options);
google.maps.event.addListener(autocompletePick, 'place_changed', () => {
let place =autocompletePick.getPlace();
// console.log(place.name)
// document.getElementById('pick').value = place.name;
this.setState({pickAddress:place.name})
let lat = place.geometry.location.lat(),
lng = place.geometry.location.lng();
//putting place in pick field
let geocoder = new google.maps.Geocoder;
geocoder.geocode({'location': {lat:lat,lng:lng}}, function(results, status) {
if (status === 'OK') {
// console.log(results[0].formatted_address)
document.getElementById('pick').value = results[0].formatted_address;
}
})
but right now i'm getting all over country place.
i search on google but didn't get proper solution.can anyone help me,i''m stuck ):

If you check the Google Maps JavaScript API reference documentation, you will see that AutocompleteOptions object doesn't have location and radius fields
https://developers.google.com/maps/documentation/javascript/reference/3/#AutocompleteOptions
Instead it has bounds field to define an area where you would like to search and strictBounds field to restrict results to this area only.
You should rewrite your code with bounds and strictBounds autocomplete options. Something like
var options = {
bounds: cityBounds,
strictBounds: true,
types: ['geocode'],
componentRestrictions: { country: "IN" }
};
Have a look at bounds documentation for more details
https://developers.google.com/maps/documentation/javascript/reference/3/#LatLngBounds
https://developers.google.com/maps/documentation/javascript/reference/3/#LatLngBoundsLiteral
I hope this helps!

Google Maps API - Autocomplete Predictions for USA only

I'm using Google Maps API example called 'Retrieving Autocomplete Predictions'. And I can't figure out how to filter it so it only returns places in the USA. I see how I could do it with the other examples...
var input = document.getElementById('searchTextField');
var options = {
types: ['(cities)'],
componentRestrictions: {country: 'us'}
};
autocomplete = new google.maps.places.Autocomplete(input, options);
But I can't seem to figure out how to apply it to my example. Here is my code...
function GetAddressPredictions(Search) {
var displaySuggestions = function (predictions, status) {
if (status != google.maps.places.PlacesServiceStatus.OK) {
return;
}
predictions.forEach(function (prediction) {
PredictionArray.push(prediction);
});
};
var service = new google.maps.places.AutocompleteService();
service.getQueryPredictions({input: Search}, displaySuggestions);
}
I tried this but it didn't work.
function GetAddressPredictions(Search) {
var displaySuggestions = function (predictions, status) {
if (status != google.maps.places.PlacesServiceStatus.OK) {
return;
}
predictions.forEach(function (prediction) {
PredictionArray.push(prediction);
});
};
var options = {
types: ['(cities)'],
componentRestrictions: {country: 'us'}
};
var service = new google.maps.places.AutocompleteService();
service.getQueryPredictions({input: Search, options}, displaySuggestions);
}
Any Ideas? Thanks.

You are so very close but unfortunately to get this specific behavior you need to use getPlacePredictions() instead of getQueryPredictions(). This allows you to use AutocompletionRequest which has componentRestrictions however QueryAutocompletionRequest does not support componetRestictions and you must fall back to either using bounds to limit the scope of the search to a box or location to bias the search to prefer locations near a point.
Here is the solution with getPlacePredictions():
var service = new google.maps.places.AutocompleteService();
var options = {
input: Search,
types: ['(cities)'],
componentRestrictions: {country: 'us'}
};
service.getPlacePredictions(options , displaySuggestions);
You can add location or bounds as keys to the options object if you must do this with getQueryPredictions()

The function getQueryPredictions takes a QueryAutocompletionRequest object as its parameter, and QueryAutocompletionRequest doesn't have a property to restrict it to a specific country.
That said, you can simply append ' United States' or ' usa' to the query before sending:
service.getQueryPredictions({
input: 'pizza near Syd' + ' usa'
}, displaySuggestions);
If you don't want the ", USA" to show within the returned results, you can remove it with JavaScript's replace function:
predictions.forEach(function(prediction) {
var li = document.createElement('li');
li.appendChild(document.createTextNode(prediction.description.replace(', USA', '')));
document.getElementById('results').appendChild(li);
});
Demo: https://jsfiddle.net/sdz4yssL/2/
Also note that if there is a risk of the search terms already including USA or a variation thereof, then you will need to remove any occurrences from the search terms first (typically using regex to ignore case sensitivity), otherwise searching for something like "pizza usa usa" will return no results:
input: (' ' + 'pizza near us Syd usa United States US' + ' ').replace(/ usa /ig,' ').replace(/ US /ig,' ').replace(/ united states /ig,' ') + ' usa'
(I've added a space before and after the query so that the replace functions will still match at the beginning and the very end)

With a bit of searching it was possible to find the solution.
The request was approved and released of earlier this year: Google Request
The documentation of such information can be read from here: Google Documentation
Implementation:
HTML :
<div id="text">
Search Place:
</div>
<div id="locationField">
<input id="autocomplete" placeholder="Enter text" type="text" />
</div>
<div id="map"></div>
Restrict to which country using a global variable, UK for uk, US for Americas etc...
var countryRestrict = {
'country': 'uk'
};
var autocomplete;
Auto complete is then constructed using the following:
autocomplete = new google.maps.places.Autocomplete(
(
document.getElementById('autocomplete')), {
componentRestrictions: countryRestrict
});
places = new google.maps.places.PlacesService(map);
autocomplete.addListener('place_changed', onPlaceChanged);
When the text changes we call the onPlacesChanged function:
function onPlaceChanged() {
var place = autocomplete.getPlace();
if (place.geometry) {
map.panTo(place.geometry.location);
map.setZoom(5);
var marker = new google.maps.Marker({
position: place.geometry.location,
map: map,
});
} else {
document.getElementById('autocomplete').placeholder = 'Enter a Value';
}
}
This calls the get place function and adds a marker to the value you clicked on.
JSFIDDLE: https://jsfiddle.net/hn8091fk/

Have you tried something like this:
function GetAddressPredictions(Search) {
var displaySuggestions = function(predictions, status) {
if (status != google.maps.places.PlacesServiceStatus.OK) {
return;
}
predictions.forEach(function(prediction) {
PredictionArray.push(prediction);
});
};
var service = new google.maps.places.AutocompleteService();
service.getQueryPredictions({
input: Search,
types: ['(cities)'],
componentRestrictions: {country: 'us'}
}, displaySuggestions);
}

Contrary to above, AutocompleteService takes EITHER QueryAutocompletionRequest OR AutocompletionRequest so I think the way you are passing your options is wrong. Is it not simply:
var options = {
input: Search,
types: ['(cities)'],
componentRestrictions: {country: 'us'}
};
var service = new google.maps.places.AutocompleteService();
service.getQueryPredictions(options, displaySuggestions);
Please also keep in mind that this is all for prediction biasing you cannot ask PAC to exclude results, only bias.

searchBox Google Maps with pagination

So what I am trying to do is implement Google Maps with a search box. Currently, the search box retrieves 20 of the top places based on the search result.
What I noticed is there is no pagination with this. Such as if I type in “pizza”, it will give me the top 20 results in the current location bounds. But when I use the google.maps.places.PlacesService(map) textSearch function to obtain a list of pizza searches, I get more than 20 results with pagination.
Is there a way to get pagination on your searchBox or use the textSearch function to provide pagination after you used searchBox?
What I have here is a snippet:
var canvas = element.find('div')[0];
var mapOptions = {
zoom: 5,
minZoom: 2,
};
var searchBox = new google.maps.places.SearchBox('pizza');
var placeService = new google.maps.places.PlacesService(map);
google.maps.event.addListener(searchBox, 'places_changed', locationChange);
function locationChange() {
var places = searchBox.getPlaces();
//Determine if there are additional places not provided by searchbox. Using text
var request = {
query: input.value,
};
var textSearchPlaces = placeService.textSearch(request, callback);
function callback(results, status, pagination) {
if (status == google.maps.places.PlacesServiceStatus.OK) {
var hi = places;
for (var i = 0; i < results.length; i++) {
var place = results[i];
}
}
}
if (places.length === 0) {
return;
}
};
As you can see this is not the most ideal solution to looking using a pagination as I would have to filter through the textSearchPlaces to see if those places are not duplicates of the searchBox results.
I also thought about just removing the searchBox and just going with the textSearch function but I realized I wouldn’t have the autoComplete function that provides suggestions that searchBox provides.

Most likely you are getting OVER_QUERY_LIMIT.
if (status == google.maps.places.PlacesServiceStatus.OK) {
Try queuing the details requests for after you have all the list completed, adding the same timeout logic to check for google.maps.places.PlacesServiceStatus.OVER_QUERY_LIMIT on this line.
if (pagination.hasNextPage) {
//add all places to the list
setTimeout('pagination.nextPage()',2000);
} else {
createMarkers(placesList);
}
You should use google.maps.places.PlacesServiceStatus.OVER_QUERY_LIMIT when using Places.

PlacesService's text search not consistent with Autocomplete

We're seeing an issue where the PlacesService's textSearch is not returning any results for the "Strood Station Car Park, Rochester", whereas the Autocomplete is. I've created this JS Fiddle that shows the demonstrates this behavior: http://jsfiddle.net/anero/b5jh56gy/6/
Is there a way to have a consistent result set for both API calls?
var client = new google.maps.places.PlacesService($("#google-attributions")[0]);
var query = "Strood Station Car Park, Rochester";
var textSearchRequest = {
query: query
};
client.textSearch(textSearchRequest, function (response, status) {
if (status === google.maps.GeocoderStatus.OK && response.length > 0) {
alert('Found place!');
} else {
alert('Did not find place!');
}
});