I have a Highmaps-map of the world, and display data for some countries. Getting a click handler for these countries is simple. (see also highmaps get country name on click event)
However, I would like to be able to also detect clicks on countries without data.
I found I can add a generic click handler to the map, but the event does not give me the selected country.
Any hints?
Relevant part of the options:
options: {
chart: {
events: {
click: function (e) { console.log( e);},
All points without data are rendered as null points by default, so you need to only enable nullInteraction property:
series: [{
nullInteraction: true,
point: {
events: {
click: function() {
console.log(this.name)
}
},
},
...
}]
Live demo: https://jsfiddle.net/BlackLabel/wnfrza5j/1/
API Reference: https://api.highcharts.com/highmaps/series.map.nullInteraction
Related
For one of our charts, we load it in batches, which could take a while. We'd like to disable the export menu (i.e., not allow it to open when the user clicks it) while the batches are loaded and enable it again once the last batch is in the chart. How does one go about doing that? Ideally, some indication that it's disabled (e.g., dimming, grey text) would also be nice to have.
For further info, the code for creating the menu is something along these lines:
chart.exporting.menu = new am4core.ExportMenu();
chart.exporting.menu.items = [
{
label: "...",
menu: [
{
type: "custom",
label: "CSV",
title: "Download CSV,
options:
{
callback: function()
{
// function for downloading CSV data
}
}
}]
}];
if (needPrintOption)
{
chart.exporting.menu.items[0].menu.push(
{
label: "Print",
title: "Print Chart",
type: "custom",
options:
{
callback: function()
{
// function to print chart contents
}
}
});
}
The menu is created when the chart is created. Essentially, I want the top level (labeled "...") to be disabled (ideally with some visual indication) while the chart is loading or being updated. (I don't want to have to create and destroy the menu, as we do have a live mode where the data in the chart is added to periodically. It would be less jarring for the user, visually, to disable the menu when I don't want user interaction with it and re-enable it when user interaction is allowed.)
You can use ready event:
chart.events.on('ready', () => {
chart.exporting.menu = new am4core.ExportMenu();
});
I would like to change the "pen" icon of the ListItem of type DetailAndActive
I found already following solution for it: UI5 StandardListItem DetailAndActive change Icon
But this once dosn't work with binding items from a model.
I tried therefore to also create a custom list control.
sap.m.List.extend('my.List', {
metadata: {
properties: {},
aggregations: {
items: {
type: "my.StandardListItem",
multiple: true,
singularName: "item"
}
}
},
renderer: {}
});
The binding itself is working. But the detailIcon dosn't change.
See sample at http://jsbin.com/kijisanepa/edit?js,output
In your excample you overwrite the "setDetailIcon" Method which was generated from SAP-Framework.
setDetailIcon: function(icon) {
console.log(icon)
this.DetailIconURI = sap.ui.core.IconPool.getIconURI(icon);
},
so in the method you need to call
this.setProperty("detailIcon", icon);
This set the value of your property and trigger a rerender.
If you dont want to rerender your listItem, use
this.setProperty("detailIcon", icon, true);
I have a map of the United States rendered in Highmaps, with enableDoubleClickZoomTo set to true. I've gotten stuck trying to discern what state a user has double clicked on to zoom the map, and wondered if there was information buried in the redraw event that would help me calculate this.
Here's a fiddle of the issue: http://jsfiddle.net/tjnicolaides/x8q1d1cs/
$('#container').highcharts('Map', {
chart: {
events: {
redraw: function (event) {
console.log(event);
console.log(this.getSelectedPoints());
}
}
},
mapNavigation: {
enabled: true,
enableDoubleClickZoomTo: true
},
series: [{
data: data,
mapData: Highcharts.maps['countries/us/us-all'],
joinBy: 'hc-key',
allowPointSelect: true,
states: {
hover: {
color: '#BADA55'
},
select: {
color: 'purple'
}
}
}]
});
When I console.log event after double clicking on a state, I'm getting a large object with information about the state of the entire chart.
If I single click to select a state, and then double click to zoom in on it, I get information about the state from this.getSelectedPoints() - however, it is not reasonable to expect that anything will be selected prior to zooming. In some maps, it may be disabled altogether. I included it here as a demonstration of the type of output I was originally hoping to get from redraw. Calculating a postal code, state name, or index to filter the original series with would be acceptable.
I think the easiest way to detect that point by wrapping Pointer.onContainerDblClick, like this:
(function (H) {
H.wrap(H.Pointer.prototype, "onContainerDblClick", function (p, event) {
console.log(this.chart.hoverPoint); // hovered point - may not exist, e.g. when clicking on the blank space
p.call(this, event);
});
})(Highcharts)
And live demo: http://jsfiddle.net/x8q1d1cs/8/
I have the following code (sloppy, I know...first javascript app). I am trying to get a combobox to populate with a list of features that fall under a given release (as selected in the first combobox). Almost everything is now working correctly, except everytime I click the feature combobox for the first time, it loads ALL features and completely ignores the filter. Even if I change the release box first, the feature box still populates with all features only on first click. Subsequent times it shows the correctly filtered features.
Even stranger, I've tried writing the total records in the Feature Store to the console, so I can see when this happens. When the feature combobox is first created, it has the correct number of records in it. However, as soon as I click the feature combobox for the first time, it triggers the "load" listener of the combobox, and pulls in all the features, ignoring the filter completely.
I'm so boggled, I've tried so many things to debug this, and at this point have no other options. Does anyone have any ideas as to why it would load the correct data first, then reload it and ignore the filters on first click?
Ext.define('CustomApp', {
extend: 'Rally.app.App',
componentCls: 'app',
launch: function() {
var relComboBox = Ext.create("Rally.ui.combobox.ReleaseComboBox", {
fieldLabel: 'Choose a Release',
width: 300,
listeners: {
ready: function(combobox) {
this._releaseRef = combobox.getRecord().get("_ref");
this._loadFeatureInfo();
},
select: function(combobox) {
this._releaseRef = combobox.getRecord().get("_ref");
this._loadFeatureInfo();
},
scope: this
}
});
this.add(relComboBox);
},
_loadFeatureInfo: function() {
var featureStore = Ext.create("Rally.data.WsapiDataStore", {
model: "portfolioitem/Feature",
fetch: ["Name", "_ref"],
autoLoad: true,
filters: [
{
property: "Release",
operator: "=",
value: this._releaseRef
}
],
listeners: {
load: function(store) {
this._updateFeatureBox(store);
},
scope: this
}
});
},
_createFeatureBox: function(featureStore) {
this._featureComboBox = Ext.create("Rally.ui.combobox.ComboBox", {
fieldLabel: 'Choose a Feature to move',
store: featureStore,
listeners: {
select: function (combobox) {
this._featureRef = combobox.getRecord().get("_ref");
//calls method to get and display children of this feature in a grid
},
scope: this
}
});
this.add(this._featureComboBox);
},
_updateFeatureBox: function(featureStore) {
if (this._featureComboBox === undefined) {
this._createFeatureBox(featureStore);
} else {
this._featureComboBox.clearValue();
this._featureComboBox.bindStore(featureStore);
//calls method to get and display children of this feature in a grid
}
}
This is probably an issue caused by the featureStore loading twice: once when you created it, and the combobox also tells it to load again once the user opens the combobox to pick a Feature.
I encountered a very similar issue with a combobox on Stories, and I'd betcha dollars to donuts that Matt Greer's answer:
Strange Load behavior with Rally.ui.combobox.ComboBox
To my question, is the answer to yours too...
I would like to send data with setActiveItem() when doing view change from this store:
Ext.define('SkSe.store.Places',{
extend:'Ext.data.Store',
config:{
autoDestroy: true,
model:'SkSe.model.Places',
//hardcoded data
data: [
{
name: 'Caffe Bar XS', //naziv objekta
icon: 'Icon.png', //tu bi trebala ići ikona kategorije kojoj pripada
stamps: 'stamps1' //broj "stampova" koje je korisnik prikupio
},
{
name: 'Caffe Bar Mali medo',
icon: 'Icon.png',
stamps: 'stamps2'
},
{
name: 'Caffe Bar VIP',
icon: 'Icon.png',
stamps: 'stamps3'
}
]
//dynamic data (Matija)
//remember to change the icon path in "Akcije.js -> itemTpl"
/*proxy:{
type:'ajax',
url:'https://maps.googleapis.com/maps/api/place/search/json?location=-33.8670522,151.1957362&radius=500&types=food&name=harbour&sensor=false&key=AIzaSyCFWZSKDslql5GZR0OJlVcgoQJP1UKgZ5U',
reader:{
type:'json',
//name of array where the results are stored
rootProperty:'results'
}
}*/
}
});
This is my my details controller that should get data from places store:
Ext.define('SkSe.controller.Details', {
extend: 'Ext.app.Controller',
config: {
refs: {
placesContainer:'placesContainer',
Details: 'details'
},
control: {
//get me the list inside the places which is inside placesContainer
'placesContainer places list':{
itemsingletap:'onItemTap'
//itemtap:'onItemTap'
}
}
},
onItemTap:function(list,index,target,record){
console.log('omg');
var addcontact= Ext.create('SkSe.view.Details',
{
xtype:'details',
title:record.data.name,
data:record.data
});
var panelsArray = Ext.ComponentQuery.query('details');
console.log(panelsArray);
Ext.Viewport.add(addcontact);
addcontact.update(record.data.name);
Ext.Viewport.setActiveItem(addcontact);
console.log(record.data.name);
}
});
I would like to send name record from the places.js model above. I heard that you can't pass data with setActiveItem but should create a function that updates view(No I can't use pop and push here).
I'm not very familiar with sencha touch syntax and I'm not sure what functions to use to do that, clearly update function is not that.
I switched up your logic slightly but have provided a working example of what I think you are trying to do.
SenchaFiddle is a little different from what I get running on my machine but you should be able to get the idea.
The initial list loaded gets the data from your store, and on itemtap will push a new view onto the viewport.
You will need to add a navigation button to get back to the list from view.View as well as a better layout for the details. I would suggest nested containers or panels with custom styles to get the details just right. Alternatively you can just drop a full html snippet in there with all the data laid out like you want.
Would be happy to help more.
Fiddle: http://www.senchafiddle.com/#XQNA8