I am not being able to update min/max/avg values in Highcharts when doing zoom.
I am trying to combine these two pieces of code:
1.Update min/max/avg---->http://jsfiddle.net/d_paul/supgh9c1/4/
2.load DB tables based on zoom ---> https://jsfiddle.net/gh/get/library/pure/highcharts/highcharts/tree/master/samples/stock/demo/lazy-loading/
So the code shown here produce a "callback is not a function".
But if i remove the "e"(that is the event that highcharts pass when the user select a zoom) in the function after_Set_Extreme , I get "e" is not defined in that function. And if I add "e" as passing parameter (e,updateLegendLabel) I get same error as before, but now in the afterSetExtremes line. So it seems e(event) is not being recognized.
But if you see the link # 2 above, afterSetExtremes is called without passing "e", but is expected in the function . See function definition..
Can anyone help me to understand what is wrong here?
This is highcharts when doing the actual chart
$('#container2').highcharts('StockChart', {
chart: {
zoomType: 'x',
events: {
load: updateLegendLabel
}
},
......
xAxis: {
events: {
afterSetExtremes: after_Set_Extremes(updateLegendLabel),
},
.....
function after_Set_Extremes(e, callback) {
processed_json_temperatura.length = 0;
processed_json_presion.length = 0;
processed_json_humedad.length = 0;
processed_json_lluvia.length = 0;
processed_json_horas_frio.length = 0;
if (typeof(e.rangeSelectorButton) !== 'undefined') {
........
callback();
}
function updateLegendLabel() {
var chrt = !this.chart ? this : this.chart;
// alert('entre updatelegend')
console.log(this);
chrt.update({
....
}
Combining these two functionalities seems to be very simple, please check this example: https://jsfiddle.net/BlackLabel/oh3ubdLv/
However, in your case after_Set_Extremes function is called only once, when the chart is initialized. You need to create an additional function to pass arguments:
Highcharts.stockChart('container', {
...,
xAxis: {
events: {
afterSetExtremes: function(e) {
after_Set_Extremes(e, updateLegendLabel)
}
}
}
});
function after_Set_Extremes(e, callback) {
callback();
}
function updateLegendLabel() {
console.log('callback');
}
Live demo: http://jsfiddle.net/BlackLabel/ebdtry20/
Related
I want to get the data points which cannot be plotted on the underlying map (i.e. joinBy fails to map the data to the geojson). Is there any way to get the unplotted data?
You can check all points and find which are not plotted, the condition is that point has a value but doesn't have graphic:
chart: {
events: {
load: function () {
var chart = this,
unplottedPoints = [];
$.each(chart.series[0].data, function (i, point) {
if (point.value && !point.graphic) {
unplottedPoints.push(point);
}
});
console.log(unplottedPoints);
}
}
},
In array unplottedPoints you have list of all not rendered points.
Demo: http://jsfiddle.net/spmx9xu3/1/
Yes, I have thoroughly searched google and did not find anything that suits my requirement.
The code i have so far is at the link below:
http://jsfiddle.net/ZKwTY/4/
There are multiple onchange events which call almost the same code, i would like to combine them maybe in a comma separated fashion to call it only once.
something like this
(on1Change, on2Change, on3Change): function () {
this.loadData();
}
is this possible??
Note: these functions are bound to the controls via a framework over which i do not have control, i need to create these functions and the framework would bind these to the respective controls
or you can create your object like this
var ol = {
on1Change: this.loadData,
on2Change: this.loadData,
on3Change: this.loadData,
on4Change: this.loadData,
loadData: function () {
this.loadData1();
this.loadData2();
},
loadData1: function () {
alert('hi from loadData1');
},
loadData2: function () {
alert('hi from loadData2');
}
};
Then if you want to do it once, then declare a object
var ol = {
loadData: function () {
this.loadData1();
this.loadData2();
},
loadData1: function () {
alert('hi from loadData1');
},
loadData2: function () {
alert('hi from loadData2');
}
};// end of object
ol.on1Change = ol.on2Change = ol.on3Change = ol.on4Change = ol.loadData;
add all propteries dynamically after object declaration
use bind()
$("selector").bind(on1Change, on2Change, on3Change): function () {
this.loadData();
}.....
you can try somethig like this http://jsfiddle.net/s4VVY/
i.e. add methods after object create
[1,2,3,4,5].forEach(function(it){ol["on"+it+"Change"] = function(){this.loadData()}})
UPDATE
may be this help
var ol = (function(){
var o = {
loadData: function () {
this.loadData1();
this.loadData2();
},
loadData1: function () {
alert('hi from loadData1');
},
loadData2: function () {
alert('hi from loadData2');
}
}
o.on1Change=o.on2Change=o.on3Change=o.on4Change=function(){ this.loadData();};
return o;
})()
also you can make function bindFunc
function bindFunc(){
var obj = arguments[0],
handler = arguments[1],
properties = Array.prototype.slice.call(arguments,2);
for(var i in properties){
obj[properties[i]] = handler;
}
}
and call as
bindFunc(o,function(){this.loadData();},"on1Change","on2Change","on3Change","on4Change")
I'm trying to pass a class instance about so that I can persist its member variables. I have the following code
var mainNamespace = WinJS.Namespace.define("MainNamespace", {
setupClass: WinJS.Class.define(
function () { },
{
createSetup: function CreateSetup() {
var interactionInst = new mainNamespace.interaction();
drawScreen.DrawScreen(interactionInst);
var backgroundProc = new
mainNamespace.createProc(interactionInst);
}
),
interaction: WinJS.Class.define(
function() {},
{
clickedPos: 0,
handleTouch: function handleTouch(event) {
this.clickedPos = event.x;
console.log("New pos: " + this.clickedPos);
}
),
createProc: WinJS.Class.define(
function (interaction) {
setInterval(this.runProc, 1000, interaction);
},
{
runProc: function runNewProc(interaction) {
console.log(interaction.clickedPos);
}
...
The drawScreen namepsace is as follows:
WinJS.Namespace.define("drawScreen", {
DrawScreen: WinJS.Class.define(
function DrawScreen(interaction) {
/// Do some screen set-up here
canvas.addEventListener("MSPointerUp", interaction.handleTouch, false);
}
)
});
The problem I have is that the interaction.clickedPos never changes. Why does it not change, and am I going about this the right way for a javascript app?
EDIT:
I've now worked out WHY this is happening, but not how to fix it. When interaction.handleTouch fires, this refers to the canvas object, and NOT the interaction object - so I have no access to it's members.
The problem is on the following line:
canvas.addEventListener("MSPointerUp", interaction.handleTouch, false);
here you are passing a reference to the function handleTouch() without any connection to the current instance (interaction). You can change the context of the event handler by using the .bind() method:
canvas.addEventListener("MSPointerUp", interaction.handleTouch.bind(interaction), false);
I am struggling with what seems to be a simple concept which makes me think what I am doing can't be done.
In nodejs, if class objectA.emits('hey there'), can class objectB.on('hey there') repsond with 'yo'?
Object A and B have nothing to do with eachother other than they both extend EventEmitter and are in the same nodejs app.
Sorry if this question has been asked before, I can't find it.
Yes
That's pretty much it.
When dealing with Observer/Publisher-Subscriber patterns (or Mediator Patterns), the point is that it really doesn't matter what type of class it is that's doing the "emitting".
Assuming that A is an emitter:
var B = { doStuff : function () { console.log("Yo!"); } };
A.addListener("someEvent", B.doStuff);
A.emit("someEvent");
If you actually want them to talk back and forth, then you need to manually subscribe them to one another...
Assuming that both A AND B are emitters:
B.doStuff = function () { this.emit("B's event", "Yo!"); };
A.doThing = function (param) { console.log(param); };
B.addListener("B's event", A.doThing);
A.addListener("A's event", B.doStuff.bind(B));
A.emit("A's event");
Alternatively, you should look into a Mediator pattern (which also "emits", but is intended to be 1 object which mediates between many objects who don't know one another, but use the same event-names and pass well-defined data-structures, like a good API should).
Assuming that Mediator is an emitter, and A, B and C aren't:
var A = {
getData : function (request) { /* network call */ this.dataCallback(data); },
dataCallback : function (data) { Mediator.emit("data-recieved", data); }
},
B = {
display : document.getElementById("data-display"),
showData : function (data) { /* make DOM representation */ }
},
C = {
input : document.getElementById("request-input"),
button : document.getElementById("request-button"),
getRequest : function () {
var request = this.input.value;
this.requestData(request);
this.disableButton();
},
requestData : function (request) { Mediator.emit("data-request", request); },
disableButton : function () { this.button.disabled = true; },
enableButton : function () { this.button.disabled = false; }
};
Mediator.addListener("data-request", A.getData.bind(A));
Mediator.addListener("data-received", B.showData.bind(B));
Mediator.addListener("data-received", C.enableButton.bind(C));
C.button.addEventListener("click", C.getRequest.bind(C), false);
So now you've got 3 classes who know nothing about one another, each has its own special purpose, and the only expectations that they have of "one another" are that event-names and data-types are appropriate.
They all know about Mediator.
If you want Mediator to be further abstracted, then you can pass a reference to it when you're making your class:
function A (param1, param2) {
var emitter = null;
this.setEmitter = function (myEmitter) { emitter = myEmitter; };
this.emit = function (evt, data) {
if (!emitter) { return; }
emitter.emit(evt, data);
};
this.subscribe = function (evt, callback) {
if (!emitter) { return; }
emitter.addListener(evt, callback);
};
/* rest of the object */
};
var a = new A();
var b = new A();
a.setEmitter(Mediator);
a.subscribe("some-evt", a.doSomething.bind(a));
b.setEmitter(Mediator);
b.subscribe("other-evt", b.doSomethingElse.bind(b));
a.emit("other-evt", { /* data */ });
a and b don't have to be the same class, here, at all.
And now they DO work in the way that you're imagining.
Both have used Dependency Injection ("Inversion of Control") to point to the same emitter (Moderator), so they're both working off of the same event-list, without even knowing it, and using their own methods to subscribe to Moderators events.
I have an existing jQuery plugin, now I want to extend it. Consider the below mentioned plugin:
$.fn.x = function(option) {
var def = {
a: 1,
b: 2
};
option = $.extend(def, option);
function abc() {
//do something
}
function def() {
//do something
}
};
Now the above one is the plugin I got from somewhere. I need to have custom behavior for abc method, say
function abc() {
//do something else
}
I don't want to change the existing plugin, Can you tell me how could I achieve the same by extending the same or by making my own custom plugin ?
EDIT:
I tried this too with method mentioned below:
(function($) {
$.fn.x = function(option) {
var defaults = {
a: 1,
b: 2
};
option = $.extend(def, option);
function abc() {
//do something
console.log('Base method called');
}
function def() {
//do something
abc();
}
def();
};
})(jQuery);
(function() {
var x = $.fn.x;
$.fn.x.abc = function() {
console.log('Overidden method called');
//_x.abc();
};
})();
$('<div/>').x();
But I am still getting "Base method called" as the console output.
The best route can vary, but something that I've done in the past is to wrap the extension in my own! This works best when you're trying to operate on something that the plugin does without modifying its underlying code.
(function($){
$.fn.extendedPlugin = function(options) {
var defaults = {
//...
};
var options = $.extend(defaults, options);
//Here you can create your extended functions, just like a base plugin.
return this.each(function() {
//Execute your normal plugin
$(this).basePlugin(options);
//Here you can put your additional logic, define additional events, etc
$(this).find('#something').click(function() {
//...
});
});
};
})(jQuery);
I know this isn't terribly specific (it's hard without a specific scenario), but hopefully it'll get you started down the right path!
This is as far as I got. But when I uncomment _x.abc.apply( this, arguments );, it gets stuck in a recursive loop.
Here's the jsfiddle if someone wants to play with and fix it:
http://jsfiddle.net/TLAx8/
// PLUGIN DEFINITION
(function( $ ){
$.fn.x = function(option) {
var def = {
a: 1,
b: 2
};
option = $.extend(def, option);
function abc() {
console.log( 'Plugin method called' );
}
function def() {
//do something
}
};
})( jQuery );
// OVERRIDING THE PLUGIN METHOD
(function(){
var _x = $.fn.x;
$.fn.x.abc = function() {
console.log( 'Overidden method called' );
//_x.abc.apply( this, arguments );
}
})();
// INVOKING THE METHOD
(function() {
$.fn.x.abc();
});