Regarding HighChart's cluster module:
I'm trying to figure out how to properly distinguish between a user clicking on an individual point versus clicking on a "cluster" of points. I've tried plotOptions.series.point.events.click as well as plotOptions.scatter.events.click.
I've found some other posts that recommend using the click(event)'s event.point.isCluster field, but during my testing I've observed that for clusters, event.point.isCluster is null and for points it isn't present in the event object at all.
So does this mean I should just check for isCluster's existence only via event.point.hasOwnProperty('isCluster'), such as like this?:
{
...,
plotOptions: {
scatter: {
events: {
click: function(e) {
if (!e.point.hasOwnProperty('isCluster')) {
alert('A point was clicked! Do stuff.');
}
}
}
}
},
...
Related
In high chart there is an event for clicking on the bar. But bar is small in height it is impossible to click on it. Hence I want the event in high chart for further processing.
E.g. I want the event for month name in following example.
Thanks In advance.
If you don't want to use JQuery you can use it as follows
chart.xAxis[0].labelGroup.element.childNodes.forEach(function(label)
{
label.style.cursor = "pointer";
label.onclick = function(){
alert('You clicked on '+this.textContent);
}
});
complete code at http://jsfiddle.net/t07ok5v3/5/
Alternate solution, maintained since Highcharts v3 is to use Custom Events plugin. Plugin adds a lot of new event, natively not supported by Highcharts.
Demo: https://jsfiddle.net/BlackLabel/Utx8g/963/
Events are added the same way as official events in Highcharts, and we don't need to re-inspect every release the DOM:
xAxis: {
labels: {
events: {
click: function () { ... }
}
}
}
I get Error: Object doesn't support property or method 'forEach' when running the solution from Malay Sarkar in Internet Explorer. Here's a workaround I used which works in both Chrome and IE.
for (let i = 0; chart.xAxis[0].labelGroup.element.childNodes.length; i++)
{
chart.xAxis[0].labelGroup.element.childNodes[i].onclick = function(){
alert('You clicked on '+this.textContent);
}
});
I'm trying to get the click and mouseOver handlers to work with Highmaps. I've checked the docs and tried to follow their examples. I inserted the event handler configs just about everywhere where I think it makes sense.
The wanted result is that the click and mouseOver handlers get called when hovering and clicking on the labels (pin icons) in the map.
Fiddle with my non-working code:
http://jsfiddle.net/fyp86hct/1/
One of the Highmaps examples shows that you should be able to do this:
point:
{
events:
{
click: function ()
{
alert("this doesn't work"); // <-- non working event handler
},
mouseOver: function()
{
alert("this doesn't work"); // <-- non working event handler
}
}
}
Unfortunately it is not supported, but you can add shape by renderer and then attach click event.
How implement many custom ListItems, like its implemented in standart blackberry calendar app.
The following screenshot shows what I mean
Especially I interested what is the second control with right arrow.
Thanks.
You can have multiple "types" of list items.
Attach your different types of listItemComponents each with a different type. e.g.
listItemComponents: [
ListItemComponent {
type: "itemA"
Container {
Label {
text: ListItemData.title
textStyle.color: Color.Blue
}
}
},
ListItemComponent {
type: "itemB"
Container {
Label {
text: ListItemData.title
textStyle.color: Color.Red
}
}
}
]
Then add this function to your listview (I'm using a property of "mytype" but you could check any property of the data model or even base it on the indexpath):
function itemType(data, indexPath) {
if (data.mytype == "typea") {
return "itemA";
} else {
return "itemB";
}
}
Now when you add your data to your datamodel make sure you specify "mytype" and the listview will automatically use the ListItemComponent for the relative type.
You can easily have different sized list items, different designs even have them work with different data structures.
Couple of days ago I found this interesting post at http://www.smartjava.org/content/drag-and-drop-angularjs-using-jquery-ui and applied it into my website. However when I progressively using it there is a bug I identified, basically you can not move an item directly from one div to another's bottom, it has to go through the parts above and progress to the bottom. Anyone can suggest where does it goes wrong? The example is at http://www.smartjava.org/examples/dnd/double.html
Troubling me for days already.....
I did this a bit differently. Instead of attaching a jquery ui element inside the directive's controller, I instead did it inside the directive's link function. I came up with my solution, based on a blog post by Ben Farrell.
Note, that this is a Rails app, and I am using the acts_as_list gem to calculate positioning.
app.directive('sortable', function() {
return {
restrict: 'A',
link: function(scope, elt, attrs) {
// the card that will be moved
scope.movedCard = {};
return elt.sortable({
connectWith: ".deck",
revert: true,
items: '.card',
stop: function(evt, ui) {
return scope.$apply(function() {
// the deck the card is being moved to
// deck-id is an element attribute I defined
scope.movedCard.toDeck = parseInt(ui.item[0].parentElement.attributes['deck-id'].value);
// the id of the card being moved
// the card id is an attribute I definied
scope.movedCard.id = parseInt(ui.item[0].attributes['card-id'].value);
// edge case that handles a card being added to the end of the list
if (ui.item[0].nextElementSibling !== null) {
scope.movedCard.pos = parseInt(ui.item[0].nextElementSibling.attributes['card-pos'].value - 1);
} else {
// the card is being added to the very end of the list
scope.movedCard.pos = parseInt(ui.item[0].previousElementSibling.attributes['card-pos'].value + 1);
}
// broadcast to child scopes the movedCard event
return scope.$broadcast('movedCardEvent', scope.movedCard);
});
}
});
}
};
});
Important points
I utilize card attributes to store a card's id, deck, and position, in order to allow the jQuery sortable widget to grab onto.
After the stop event is called, I immediately execute a scope.$apply function to get back into, what Misko Hevery call,s the angular execution context.
I have a working example of this in action, up in a GitHub Repo of mine.
I'm trying to pass data from Series Point on Click
I have 2 examples first one is not working, that what i'd like to use.
But second one is working.
[{"name":"Unknown","data":38.0,"DrillDown":{"Callback":"getActivityStatusReport","Arg":"0"},"selected":0},{"name":"Resolved","data":15.0,"DrillDown":{"Callback":"getActivityStatusReport","Arg":"-99"},"selected":0},{"name":"Open","data":255.0,"DrillDown":{"Callback":"getActivityStatusReport","Arg":"2"},"selected":0}]
Here's jsFiddle
I'm not sure if it's because of the latest Highcharts but the chosen answer doesn't work for me. For Highcharts v3.0.6 I got the right information from the following:
series: {
cursor: 'pointer',
events: {
click: function (ev) {
console.log(ev.point.options.id);
}
}
}
Hope the helps!
In your first example you are passing an array of series objects to options.series. In the second you are passing an array of point objects to the first series. The "this" in the click callback is the point object getting clicked on. In the first, your custom option is stored in the series object, and not that point.
What you need in the first is (fiddle here):
series: {
cursor: 'pointer',
point: {
events: {
click: function () {
alert(this.series.options.DrillDown.Callback); // get the series for the point
}
}
}
}