Seems like drilldown event is not triggered in Highcharts Treemap. I need to perform some task like showing alert with current level number on drilldown and drillup events. How can this be done in Treemaps?
At I see at this moment you can catch redraw event and prepare a simple "parser" which check id. Default structure of that is id_1 for first level, id_1_1 for second level. The simplest is use a split, and check length of array. Obviosuly this is very poor solution.
events: {
redraw: function () {
var rootNode = this.series[0].rootNode;
if (rootNode === '') {
alert(' NO DRILLED - LEVEL 0 ')
} else {
if (rootNode.split('_').length == 2) {
alert(' DRILLED - LEVEL 1');
} else if (rootNode.split('_').length >= 2) {
alert(' DRILLED - LEVEL 2');
}
}
}
}
Example: http://jsfiddle.net/ghh1x7vt/1/
Related
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.');
}
}
}
}
},
...
https://jsfiddle.net/4byyuqtc/1/
I'm looking to have the ui-grid select all "children" under a grouping when the grouping line is selected. In this case Kit Kat(1), Mr. Goodbar(1), Krackel(2) and ultimately selecting the actual records (the non bold lines). One would expect that when selecting a parent in a grouping all it's children would get selected as well.
Currently when selecting the 1 grouping above the actual records in the data (the non bold lines) it does select those actual records with the following code:
$scope.gridApi.selection.on.rowSelectionChanged($scope, function (rowChanged) {
console.log(rowChanged.treeLevel);
if (typeof (rowChanged.treeLevel) !== 'undefined' && rowChanged.treeLevel > -1) {
// this is a group header
children = $scope.gridApi.treeBase.getRowChildren(rowChanged);
console.log(children);
children.forEach(function (child) {
if (rowChanged.isSelected) {
$scope.gridApi.selection.selectRow(child.entity);
} else {
$scope.gridApi.selection.unSelectRow(child.entity);
}
});
}
});
I'm not experienced enough with ui-grid at this point to figure out how to cycle through children of the selected line and select all of them.
[EDIT]
With Paul's code below it doesn't select the groupings but it's closer. This screenshot is me selecting the first 337 record. Notice it selects that record and all the lowest child records (which is good because ultimately those are the ones that matter) but visually the grouped records (MFG and Item Desc group) aren't selected and need to be as the user won't ever open the lowest data records so they need to see the groups selected.
I checked the documentation and I don't think there's any exposed API Method. You could recursively select/deselect rows as a solution. Please try out the example below.
$scope.gridApi.selection.on.rowSelectionChanged($scope, function (rowChanged) {
console.log(rowChanged.treeLevel);
if (typeof(rowChanged.treeLevel) !== 'undefined' && rowChanged.treeLevel > -1) {
var children = $scope.gridApi.treeBase.getRowChildren(rowChanged);
selectChildren(children, rowChanged.isSelected);
}
});
function selectChildren(gridRows, selected) {
if (gridRows && gridRows.length > 0) {
gridRows.forEach(function (child) {
if (selected) {
$scope.gridApi.selection.selectRow(child.entity);
} else {
$scope.gridApi.selection.unSelectRow(child.entity);
}
var children = $scope.gridApi.treeBase.getRowChildren(child);
selectChildren(children, selected); //recursively select/de-select children
});
}
}
Here's a working Plunkr: http://plnkr.co/edit/XsoEUncuigj9Cad1vP5E?p=preview
Handling automatic deselection is a bit more tricky though as it seems the api doesn't handle that really well.
UPDATE
So I checked the jsFiddle you shared and managed to get it working with a slight tweak.
I modified the selectionHandler to the following:
onRegisterApi: function(gridApi) {
$scope.gridApi = gridApi;
$scope.gridApi.selection.on.rowSelectionChanged($scope, function(rowChanged) {
if (rowChanged.treeNode.parentRow) { //Added this parent row selection
rowChanged.treeNode.parentRow.setSelected(rowChanged.isSelected);
}
console.log(rowChanged.treeLevel);
if (typeof(rowChanged.treeLevel) !== 'undefined' && rowChanged.treeLevel > -1) {
var children = $scope.gridApi.treeBase.getRowChildren(rowChanged);
selectChildren(children, rowChanged.isSelected);
}
});
Please see this fork of your code: https://jsfiddle.net/1eg5v77w/
The downside with this is that if you select a low level entry (one without children) it will still select its parent. If you really really want this to work as well, you'll have to access the DOM and make some ugly checks.
$scope.gridApi.selection.on.rowSelectionChanged($scope, function(rowChanged, $event) {
var wasHeaderRowClicked = true;
try { //This can be written more beautifully if you used jQuery. But I would still be against it as it relies on the class of the ui-grid never changing when you update your ui-grid version.
wasHeaderRowClicked = $event
.srcElement
.parentElement
.parentElement
.parentElement
.previousElementSibling
.firstChild
.firstChild
.firstChild
.getAttribute('class') === 'ui-grid-icon-minus-squared';
} catch(err) { console.log('Couldnt determine if header row was clicked'); }
if (rowChanged.treeNode.parentRow && wasHeaderRowClicked) {
rowChanged.treeNode.parentRow.setSelected(rowChanged.isSelected);
}
console.log(rowChanged.treeLevel);
if (typeof(rowChanged.treeLevel) !== 'undefined' && rowChanged.treeLevel > -1) {
var children = $scope.gridApi.treeBase.getRowChildren(rowChanged);
selectChildren(children, rowChanged.isSelected);
}
});
Here is the fiddle: https://jsfiddle.net/Lf8p7Luk/1/
I'd also like to add, thanks to this post, that according to the UI-Grid documentation: Group header rows cannot be edited, and if using the selection feature, cannot be selected. They can, however, be exported.
So it is intentional that it's so difficult to get this to work because it's not the intended design. My recommendation would be to alter your logic to either use Tree Levels or get around the selection logic because even though my fork is currently selecting everything, you will most likely run into other issues down the road. For example: I couldn't get automatic deselection to work in the grid when you click on another group header.
If you still have the issue take a look with this..
https://github.com/angular-ui/ui-grid/issues/3911
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 looking for the counterpart/opposite of Reveal.initialize(). A way to programmatically end a reveal.js presentation.
Reveal.js did not implement a method which programmatically ends the presentation. Here is the list of methods available.
If you are looking for destroy the instance of Reveal.js, that is not possible unless Reveal.js team implements it. What you can do is, you can remove the DOM elements on which Reveal event is initialized.
Here is the code using which you can destroy all/any instance(s) of Reveal.js presentation.
Element.prototype.remove = function() {
this.parentElement.removeChild(this);
}
NodeList.prototype.remove = HTMLCollection.prototype.remove = function() {
for(var i = this.length - 1; i >= 0; i--) {
if(this[i] && this[i].parentElement) {
this[i].parentElement.removeChild(this[i]);
}
}
}
document.querySelectorAll('.reveal').remove();
//To remove all containers created by Math Plugin
var mathPluginContainers = document.querySelectorAll("[id^='MathJax']");
mathPluginContainers = Array.prototype.slice.call(mathPluginContainers);
var mathPluginParents = mathPluginContainers.map(function(container) {
return container.parentElement;
});
mathPluginParents.forEach(function (container, index) {
if (container.tagName === 'DIV') {
container.remove();
} else {
container.removeChild(mathPluginContainers[index]);
}
});
Before starting the presentation you can create the DOM tree copy (1) and then, when needed, you can restore it (2).
// (1) create DOM copy
window.saved = document.body.cloneNode(true);
Reveal.initialize({
// initialisation parameters
});
// (2) restore DOM to previous state
document.body.parentNode.replaceChild(window.saved, document.body)
It is stopping the presentation and not making any errors. The only problem might be is that something extra has to be done to be able to start the presentation again.
I have a problem that I can't seem to figure out. I'm trying to have a droppable element conditionally fire a different function based on the class of the item dropped. For the life of me I can't figure out how to do this. Here's the link: http://jsfiddle.net/643PC/22/
The pageContainer accepts Rows. Rows accept Spans. Spans should accept Actions and Fields and fire a different function based on which item is dropped. Any ideas?
Finished function with David's help:
function generalDrop(event, ui) {
var appendTarget = $(this);
if (ui.draggable.hasClass('field-item')) {
fieldDrop(event, ui, appendTarget);
}
else {
actionDrop(event, ui, appendTarget);
}
}
function actionDrop(event, ui, appendTarget) {
$(document.createElement('a'))
.addClass('btn btn-primary')
.attr('href', '#')
.text('Button')
.appendTo(appendTarget)
}
Change your generalDrop function to this:
function generalDrop(event, ui) {
if (ui.draggable.hasClass('field-item')) {
fieldDrop(event, ui);
}
else {
actionDrop(event, ui);
}
}