In Anystock/AnyChart, I want to listen to the point event when the mouse clicks.
So, I added the following code as a script.
anychart.onDocumentReady(function () {
// create data table
var table = anychart.data.table();
// add data
table.addData([
['2015-12-24', 511.53, 514.98, 505.79, 506.40],
['2015-12-25', 512.53, 514.88, 505.69, 510.34],
['2015-12-26', 511.83, 514.98, 505.59, 507.23],
['2015-12-27', 511.22, 515.30, 505.49, 506.47],
['2015-12-28', 511.53, 514.98, 505.79, 506.40],
['2015-12-29', 512.53, 513.88, 505.69, 510.34],
['2015-12-30', 511.83, 512.98, 502.59, 503.23],
['2015-12-31', 511.22, 515.30, 505.49, 506.47],
['2016-01-01', 510.35, 515.72, 505.23, 508.80]
]);
// map loaded data
var mapping = table.mapAs({'open': 1, 'high': 2, 'low': 3, 'close': 4});
// create a stock chart
var chart = anychart.stock();
// add a series using mapping
chart.plot(0).ohlc(mapping).name('ACME Corp. Stock Prices');
// set container id for the chart
chart.container('container');
// initiate chart drawing
chart.draw();
// add a mount event listener - It is fine.
chart.listen('click', function(e){
alert(e);
});
// add a point event listener - It does not work.
chart.listen('pointClick', function(e){
alert(e);
});
});
The mouse event was being raised successfully, but the point event did not work.
How does we add the point event listener into anychart.stock() on AnyChart?
If anyone has a solution already, it would be great if you could share it.
Unfortunately, the current version of AnyStock (8.3.0) doesn't support point related events as basic charts. If you want to show additional information about the point you can show it in the point tooltip using formatter function - https://api.anychart.com/anychart.core.ui.Tooltip#format
Related
I'm using azure map.
What's happening is that I have 2 layers. A layer that have Circles and a layer with polygons.
I have a functionality in which a popup appear when I click on a specific circle.
The issue occur when I add the polygon layer after the circle layer.
It's like the polygon layer is being drawn on top of the circle layer. In which it prevent the popup from appearing when clicking on the circle.
Here's how I'm adding the polygon layer:
showFetchedResultOnMap(facilities) {
const self = this;
if (facilities && facilities.length > 0) {
self.cleanRestrictionLayer();
//Create a data source and add it to the map.
self.datasource = new atlas.source.DataSource();
self.map.sources.add(self.datasource);
//Add a data set to the data source.
self.CleanMap();
//Create a data source and add it to the map.
var datasource = new atlas.source.DataSource();
self.map.sources.add(datasource);
self.map.imageSprite.add(self.chosenCategory, 'assets/svg/' + self.chosenCategory + '.svg')
.then(function () {
facilities.forEach(cat => {
datasource.add(new atlas.data.Feature(new atlas.data.Point([cat.longitude, cat.latitude])));
});
//Add a layer for rendering point data as symbols.
self.map.layers.add(new atlas.layer.SymbolLayer(datasource, self.chosenCategory, {
iconOptions: {
//Pass in the id of the custom icon that was loaded into the map resources.
image: self.chosenCategory,
//Optionally scale the size of the icon.
size: 0.1
}
}));
});
}
}
Anyone have an Idea about how I can fix this??
I'm not seeing a polygon layer in the code you provided. That said, when you add layers to the map, the order in which you add them is the z-index by default. Last one added goes on top. That said, when adding the layer using the map.layers.add function, there is a second parameter you can add in which can be another layer or layer id. When this is specified the layer you are adding will be inserted below that second specified layer. Here is the doc on this: https://learn.microsoft.com/en-us/javascript/api/azure-maps-control/atlas.layermanager?view=azure-maps-typescript-latest#add-layer---layer----string---layer-
Here is a short example:
map.layers.add(new atlas.layers.BubbleLayer(datasource, 'myBubbles'));
map.layers.add(new atlas.layers.PolygonLayer(datasource, 'myPolygons'), 'myBubbles');
enter code hereI have a window in which I have a form with trigger fields. So by trigerring I mean , if I select a value from first combo, its trigerring the succeding combos with their's first values. This is working fine when I open the window for the first time. But if close it and open it for the second time, it will generate error as me.store.loading is undefined.
I am using on load event of combo to fire the next combo with its first value. Please see code below which I have put in the render event of a field in that window.
Thanks,
sj
me.control({
'addinp #renderCmp':{
render:me.registerTriggerCalls
}
})
registerTriggerCalls : function() {
var stcombo = Ext.getCmp('StField');
stcombo.store.on('load', function(store, record, opts)
{debugger;
if (store.totalCount <= 0)
{ return; }
stcombo.setValue(store.getAt(0).data.stThru);
stcombo.fireEvent('select', stcombo);
});
var adcombo = Ext.getCmp('AdField');
adcombo.store.on('load', function(store, record, opts)
{
if (store.totalCount <= 0)
{ return; }
adcombo.setValue(store.getAt(0).data.adDate);
adcombo.fireEvent('select', adcombo);
});
}
When does the store get created/destroyed? Are you creating a new store with each combo box or are you reusing a global store each time?
In the comments above, I give you a way to troubleshoot, but if you're reusing the same store object over and over, you either need to use a managed listener (preferred) or unregister your handlers when your combo boxes are destroyed.
var stcombo = Ext.getCmp('StField');
stcombo.mon(store, 'load', function(store, record, opts)
{
if (store.totalCount <= 0)
{ return; }
stcombo.setValue(store.getAt(0).data.stThru);
stcombo.fireEvent('select', stcombo);
});
var adcombo = Ext.getCmp('AdField');
adcombo.mon(store, 'load', function(store, record, opts)
{
if (store.totalCount <= 0)
{ return; }
adcombo.setValue(store.getAt(0).data.adDate);
adcombo.fireEvent('select', adcombo);
});
Assuming that's the case, what's happening is that the life span of your store and your combo box is disconnected. The listeners are tied to the store's life span which doesn't have visibility to the combo box's life span. Hence, the old listeners don't get removed until the store is destroyed which is obviously bad -- for a number of reasons -- but causing your exception because the closure references a destroyed combo box.
A managed listener solves this by essentially tying the listener's life span to the combo box instead of the store.
I'm using ExtJS 4.2.1 and have a fairly simple setup: JSON-based store and a gridpanel that reads from that store. An add button's click event calls out to the function below.
My goal is to add a blank row to the grid and immediately begin editing it using the Ext.grid.plugin.CellEditing plugin that's enabled on the gridpanel.
var addNewRow = function() {
// start add logic
var row = {
'name': '',
'email': '',
'description': ''
};
store.add(row);
// start auto-edit logic
var index = store.indexOf(row); // -1
var grid = Ext.ComponentQuery.query('gridpanel[itemId=upperPane]')[0];
var plugin = grid.getPlugin('upperPaneEditor');
plugin.startEdit( index, 0 );
};
While debugging this, index is set to -1 and that does not work. I tested the plugin.startEdit()'s functionality with (0, 0) to edit the first column of the first row and it works fine. I tried moving the auto-edit logic to various event handlers try to get it to work:
The store's add event fired after the add and reflected the correct index but the element wasn't present yet in the gridpanel for the plugin to grab it.
The gridpanel's afterrender event didn't fire after the add
The gridpanel's add event fired but only after double-clicking on a cell manually to edit it. It also ended up in a loop with itself.
I'm not sure of what else to try at this point.
Your row is a model config object, not a model instance, therefore store.indexOf returns -1.
Try:
var inst = store.add(row)[0];
...
var index = store.indexOf(inst);
If I have a store backed combobox selection that fires an event under ExtJS 4, how do I go about getting the full object that is represented by that selection?
In general, you can use the findRecordByValue method on the combobox:
combobox.on('change', function(combobox, newValue, oldValue) {
// Get the old and the new records.
// NOTE: The underlying store is not guaranteed to
// contain an associated record.
var oldRecord = combobox.findRecordByValue(oldValue);
if (oldRecord) {
// Do something...
}
var newRecord = combobox.findRecordByValue(newValue);
if (newRecord) {
// Do something...
}
});
Figured this out almost immediately after posting my question.
My problem was that I was binding to the wrong event, I was using 'change' instead of 'selection'.
The selection event gives you the record with the full object contained in it.
I'm trying to shake a window, but got error mess in console. My code:
var win = new qx.ui.window.Window ("Login");
win.setLayout (new qx.ui.layout.Grow);
win.add (view);
this.effect = new qx.fx.effect.combination.Shake (
win.getContainerElement ().getDomElement ());
return win;
Where view is a GroupBox instance (from demobrowser/animation/login).
As you have found out by yourself: the DOM element of the window is not there at the moment you create the shake object. In qooxdoo we create all DOM elements at once, so that the browser don't have to render more often than needed.
At the time window fires the "appear" event (you could also use the "resize" event), the DOM element has been created. Be sure to use addListenerOnce() instead of addListener()! Otherwise you will create a new shake effect every time the window gets visible again, if it has been hidden. ;-)
Sorry for noise!
If I create an effect in "appear" listener - code works well.
win.addListener ("appear", function (e)
{
this.effect = new qx.fx.effect.combination.Shake (
win.getContainerElement ().getDomElement ());
}, this);
var win = new qx.ui.window.Window("Login");
win.setLayout(new qx.ui.layout.Grow);
win.add(view);
win.addListener("appear", function(){
var effect = new qx.fx.effect.combination.Shake(win.getContainerElement().getDomElement());
effect.start();
}, this);
return win;