I have following drilldown with highcharts.
Where I need to put on click event if I would need to forward to url after drilldown?
http://jsfiddle.net/w6kmxnrc/
drilldown: {
series: [{
name: 'Computer',
id: 'blend.exe',
data: [
['daa', 1] ]
},
{
name: 'Computer',
id: 'chrome.exe',
data: [
['duu', 1] ]
}
]
}
});
});
Yep, add an events object in your drilldown.series objects.
example:
events: {
click: function (event) {
console.log('blend drilldown clicked');
}
}
jsfiddle: http://jsfiddle.net/w6kmxnrc/1/
Check the console when you click on them.
Read more here
Related
im working on network graph highcharts
each node should have a new child but it should not merge with another subnode if its has the same name, like child1, child2, child3, pointing to subchild1,for each individual we should have the individual nodes pointing to each one
fiddle link -> https://jsfiddle.net/GnanaSagar/36k2wmry/1/
You can also use the formatter function for data labels:
series: [{
dataLabels: {
enabled: true,
format: undefined,
formatter: function() {
if (this.key.indexOf('subchild') >= 0) {
return 'subchild1'
}
return this.key
}
},
data: [...,
{
from: 'child1',
to: 'subchild1'
},
{
from: 'child2',
to: 'subchild2'
},
{
from: 'child3',
to: 'subchild3'
}
]
}]
Live demo: https://jsfiddle.net/BlackLabel/n4gd8v3r/
API: https://api.highcharts.com/highcharts/series.networkgraph.dataLabels.formatter
So apparently series.networkgraph.nodes works.
series: [{
dataLabels: {
enabled: true
},
data: [
{from: 'parent', to: 'child1'},
{from: 'parent', to: 'child2'},
{from: 'parent', to: 'child3'},
{from: 'child1', to: 'subchild1.1'},
{from: 'child2', to: 'subchild2.1'},
{from: 'child3', to: 'subchild3.1'}
],
nodes: [{
id: 'subchild1.1',
name: 'subchild1'
},
{
id: 'subchild2.1',
name: 'subchild1'
},
{
id: 'subchild3.1',
name: 'subchild1'
}
]
}]
jsFiddle: https://jsfiddle.net/9g42nqza/ (I have to comment out some of your original code because it was throwing error).
I am working on a bar chart, and for some rows I have a particular column which contains link, now on ready event I want to iterate over all the rows to find out what is the link, if link is type a I want to set element color red, otherwise not.
cols: [
{
id: 'first value',
label: 'name',
type: 'string'
},
{
id: 'second value',
label: 'type',
type: 'number'
},
],
rows: [
{
c: [
{
v: 'apple'
},
{
v: 24,
link : 'type A or type B '
},
]
},
]
Any help about this ?
so here is my code
$('#parent').bind(
'tree.click',
function(event) {
// The clicked node is 'event.node'
var node = event.node;
$('#parent').tree('loadDataFromUrl', 'g/admin/rules/getchildstwo/id/' + node.id, node,
function() {
alert('data is loaded');
}
);
$('#parenthide').val(node.id);
}
);
but callback function is not called and subtree is not loaded into node..i tried and loaded data seperatly with ajax and result is somthing like this:
{
label: 'تست سمپل',
id: 2540,
section: '1',
children: []
},
{
label: 'hshhsh',
id: 2541,
section: '1',
children: []
}
but still loadDataFromUrl not working and filling subtree..can anyone tell me whats wrong with my code or show me a working examlple of loading subtree wuth JQTree?
Try like this
var data = [
{
label: 'تست سمپل', id: 2540,
section: '1',
children: []
},
{
label: 'hshhsh', id: 2541,
section: '1',
children: []},
}
];
$('#parent').tree({
dataUrl: 'loadDataFromUrl',
function() {
alert('data is loaded');
}
});
I am doing a project using Kendo UI controls. In project left side "treeview" and right side "kendogrid" are placed.
Here my requirement is to filter the grid based on treeview nodes, and need to do multi-selection.
For example:eg:10249,10248 Based on this nodes filter the grid.
Here is my fiddle: http://jsfiddle.net/RHh67/7/
Here is tried code:
var tree= $("#treeview").kendoTreeView({
checkboxes: {
checkChildren: true
},
dataSource: [{
id: 1, text: "My Project", expanded: true, spriteCssClass: "rootfolder", items: [
{
id: 2, text: "OrderID", expanded: true, spriteCssClass: "folder", items: [
{ id: 3, text: "10248" },
{ id: 4, text: "10249" },
{ id: 5, text: "10250" },
{ id: 6, text: "10251" },
{ id: 7, text: "10252" }
]
}]
}]
}).data("kendoTreeView");
tree.dataSource.bind("change", function (e) {
var ds = $("#grid").data("kendoGrid").dataSource;
ds.filter([
{"logic":"or",
"filters":[
{
"field":"OrderId",
"operator":"eq",
}
]}
]);
});
Can any one help me find where exactly I am wrong?
The handler for change on the tree should do:
Get selected checkboxes.
Build a filter condition for ticked checkboxes.
Apply filter to the DataSource.
Something like:
$("#treeview").on("change", function (e) {
var selected = $('#treeview :checked').closest('li');
var ds = grid.dataSource;
var filter = {
logic : "or",
filters: []
};
$.each(selected, function (idx, elem) {
var item = tree.dataItem(elem);
if (parseInt(item.text)) {
console.log("item.text", item.text);
filter.filters.push({
field : "OrderID",
operator: "eq",
value : parseInt(item.text)
});
}
});
console.log("filter", filter);
ds.filter(filter);
});
Running here
I can access a list (as a container of items) in a controller but I do not know how to access list items properties.
How to create the correct ComponentQuery rule? I tried 'list > item' but it does not work.
Each item has it's title but I get 'undefined' as output in selectSection.
Ext.define( 'UGP.controller.BeginList',
{
extend: 'Ext.app.Controller',
config:
{
views: [ 'BeginList' ],
control:
{
'list':
{
select: 'selectSection'
}
}
},
selectSection: function()
{
Ext.Msg.alert( 'title=' + this.title );
}
}
);
The BeginList.js with the list component:
Ext.define( 'UGP.view.BeginList',
{
extend: 'Ext.List',
config:
{
fullscreen: true,
itemTpl: '{title}',
data:
[
{ title: 'Chapter 1', id: 0, action: "selectSection" },
{ title: 'Chapter 2', id: 1, action: "selectSection" },
{ title: 'Chapter 3', id: 2, action: "selectSection" },
{ title: 'Chapter 4', id: 3, action: "selectSection" }
]
}
}
);
You can see in the select event documentation that it passes arguments. So you can change the signature of your selectSection function to this :
selectSection: function (list, record) {
Ext.Msg.alert( 'title=' + record.get( 'title' ) );
}
You can also take a look at the itemTap event which usually the one used to detect tap events on a list item.
Hope this helps