Develop Reference

show tooltip for each point of highcharts network graph in Angular

I am building networkgraphs using highcharts and highcharts-angular on my Angular application. I am able to display the graph with datalabels successfully. Now, I have to show some tooltip data when I hover on each point/node of the graph. How can I do it? How can I show a tooltip corresponding to each point of the graph?
As of now, I am using the below options to draw the graph and show the tooltip. This tooltip, is showing same information when I hover any point. I need to show a different data for each point. How can I do it?
chartOptions = {
"chart": {
"type": "networkgraph",
"height": "100%"
},
"title": {
"text": "Network graph demo"
},
"subtitle": {
"text": "A Force-Directed Network Graph in Highcharts"
},
"plotOptions": {
"networkgraph": {
"keys": ["from", "to"],
"layoutAlgorithm": {
"enableSimulation":true
}
}
},
"series": [
{
"dataLabels": {
"enabled": true,
"linkFormat": ""
},
"data": [{"from" : "a", "to": "b"},
{"from": "a", "to": "c"},
{"from": "a", "to": "d"} ],
"marker" : {"radius" : 18}
}
],
"tooltip" :
{
"enabled" : true,
"formatter" : function() {
return "<div> <span> My tooltip information </span> </div>"
}
}
}

I use console.log() to explore the objects available to me within the Highcharts API
You'll see in the console output all the accessible information, within which name seems to be what you're after?
Try this:
"tooltip" :
{
"enabled" : true,
"formatter" : function() {
console.log(this.point)
return this.point.name
}
}
Update below, is this close to what you're after?
"tooltip" :
{
"enabled" : true,
"useHTML" : true,
"formatter" : function() {
let linkFrom_li = '';
let linkTo_li = '';
let tooltipHTML = '';
for (let i = 0; i < this.point.linksTo.length; i++) {
linkFrom_li = linkFrom_li + `<li>${this.point.linksTo[i].from}</li>`;
}
for (let i = 0; i < this.point.linksFrom.length; i++) {
linkTo_li = linkTo_li + `<li>${this.point.linksFrom[i].to}</li>`;
}
tooltipHTML = tooltipHTML + `<b>Links from [${this.point.name}]</b>:<ul>${linkFrom_li}</ul>`;
tooltipHTML = tooltipHTML + `<b>Links to [${this.point.name}]</b>:<ul>${linkTo_li}</ul>`;
return tooltipHTML;
}
}

Loading data from JSON file into Tree with checkboxes

I am trying to create a expanding tree for my web application but I am not able to bring data from a JSON file to dynamically fill the tree. I found this code from another post on SOF.
Here is my JSON file called tree_data.json :
{
"Data": {
"id": "0",
"title": "root-not displayed",
"children": {
"id": "1",
"title": "Option 1",
"children": {
"id": "11",
"title": "Option 11",
"children": {
"id": "111",
"title": "Option 111",
"id": "112",
"title": "Option 112"
}
}
}
}
}
Here is javascript code imbedded within HTML:
$.getJSON("tree_data.json", function(treedata) ){
//$.each(treedata.data, function(i, field){
$(function () {
addItem($('#root'), treedata); //first call to add item which passes the main parent/root.
$(':checkbox').change(function () {
$(this).closest('li').children('ul').slideToggle();
});
$('label').click(function(){
$(this).closest('li').find(':checkbox').trigger('click');
});
});//}
function addItem(parentUL, branch) {
for (var key in branch.children) { //for each key in child in data
var item = branch.children[key]; //assign each child in variable item
$item = $('<li>', { //jquery object
id: "item" + item.id
});
$item.append($('<input>', { //add check boxes
type: "checkbox",
id: "item" + item.id,
name: "item" + item.id
}));
$item.append($('<label>', { //add labels to HTML. For every id, display its title.
for: "item" + item.id,
text: item.title
}));
parentUL.append($item);
if (item.children) {
var $ul = $('<ul>', {
style: 'display: none'
}).appendTo($item);
$item.append();
addItem($ul, item); //recursive call to add another item if there are more children.
}
}
}}
I need a lot of help changing this code in order grab the JSON data and creating the tree. Any help would be very appreciated. Thank you.

First of all, you have to encapsulate every children object in a json array, so you can have single or multiple object in each children (like 111 and 112). So change the json to be like that:
{
"Data": {
"id": "0",
"title": "root-not displayed",
"children": [{
"id": "1",
"title": "Option 1",
"children": [{
"id": "11",
"title": "Option 11",
"children": [{
"id": "111",
"title": "Option 111"
},
{
"id": "112",
"title": "Option 112"
}]
}]
}]
}
}
Now, there is a working code base (with working example):
$(function () {
var treedata = JSON.parse('{"Data": {"id": "0","title": "root-not displayed","children": [{ "id":"1","title":"Option 1","children": [{"id": "11","title": "Option 11","children": [{"id": "111","title": "Option 111"},{"id": "112","title": "Option 112"}]}]}]}}'); //JUST FOR MOCKUP THE JSON CALL
addItem($('#root'), treedata.Data); //first call to add item which passes the main parent/root.
$(':checkbox').change(function () {
$(this).closest('li').children('ul').slideToggle();
});
$('label').click(function(){
$(this).closest('li').find(':checkbox').trigger('click');
});
});//}
function addItem(parentUL, branch) {
$.each(branch.children, function(i){
var item = branch.children[i]; //assign each child in variable item
$item = $('<li>', { //jquery object
id: "item" + item.id
});
$item.append($('<input>', { //add check boxes
type: "checkbox",
id: "item" + item.id,
name: "item" + item.id
}));
$item.append($('<label>', { //add labels to HTML. For every id, display its title.
for: "item" + item.id,
text: item.title
}));
parentUL.append($item);
if (item.children) {
var $ul = $('<ul>', {
}).appendTo($item);
addItem($ul, item); //recursive call to add another item if there are more children.
}
});
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div id="root">
</div>
Now just use your getJSON instead of my mockup data and you will be fine i hope :)

Manipulating javascript object with underscore

I have a Javascript object with a format like below
"items":
{
"Groups":[
{
"title":"group 1",
"SubGroups":[
{
"title":"sub1",
"id" : "1",
"items":[
{
"title":"Ajax request 1",
},
{
"title":"Ajax request 2",
}
]
},
{
"title":"sub2",
"id" : "2",
"items":[
{
"title":"Ajax request 3",
},
{
"title":"Ajax request 4",
}
]
}
]
}
]
There are n 'Groups', n 'subGroups' and n 'items'.
What I want to do firstly is get all the items from a particular group based on id. This is achieved using:
_.each(items.Groups, function(o) {
result = _.where(o.SubGroups, {
'id': '1'
});
});
which returns
"items":[{"title":"Ajax request 1",},{"title":"Ajax request 2",}]
Then I want to get the rest of the data, excluding the items and parent group I have just retrieved.
I tried this:
_.each(items.Groups, function(o) {
arr = _.without(o.SubGroups, _.findWhere(o.SubGroups, {id: '2'}));
});
But this only returns me the items like this:
{
"title":"sub2",
"id" : "2",
"items":[{"title":"Ajax request 3"},{"title":"Ajax request 4",}]
}
whereas what I need is this:
"items":
{
"Groups":[
{
"title":"group 1",
"SubGroups":[
{
"title":"sub2",
"id" : "2",
"items":[
{
"title":"Ajax request 3",
},
{
"title":"Ajax request 4",
}
]
}
]
}
]

Just try this:
_.each(items.Groups, function(o) {
arr = _.without(o, _.findWhere(o.SubGroups, {id: '2'}));
});
o should be enough => you want to get Groups and not SubGroups.

Following is a pure JS implementation:
JSFiddle.
var data = {
"Groups": [{
"title": "group 1",
"SubGroups": [{
"title": "sub1",
"id": "1",
"items": [{
"title": "Ajax request 1",
}, {
"title": "Ajax request 2",
}]
}, {
"title": "sub2",
"id": "2",
"items": [{
"title": "Ajax request 3",
}, {
"title": "Ajax request 4",
}]
}]
}]
}
var items = [];
var group = [];
data.Groups.forEach(function(o) {
var _tmp = JSON.parse(JSON.stringify(o));
_tmp.SubGroups = [];
o.SubGroups.forEach(function(s) {
if (s.id == "1") {
items.push(s.items);
} else {
_tmp.SubGroups.push(s);
group.push(_tmp)
}
});
});
function printObj(label, obj) {
document.write(label + "<pre>" + JSON.stringify(obj, 0, 4) + "</pre>")
}
printObj("group", group);
printObj("items", items);

Using underscore and using your logic to filter all subgroups:
//array to store subgroup with ID 1
var results = [];
var d = _.each(data.items.Groups, function(o) {
result = _.where(o.SubGroups, {
'id': '1'
});
//add to results array
results.push(result);
});
//make a clone of the earlier object so that you get the parent structure.
var data1 = _.clone(data);
//set the filtered results to the group
data1.items.Groups = results;
//your data as you want
console.log(data1)
Working code here

set drag and drop child node to display json array in table

So question says by themselves. I did an example here
or or look on this code:
html
<div id="jstree">
<ul>
<li>Root
<ul>
<li>Parent1
<ul>
<li>Child1</li>
<li>Child2</li>
</ul>
</li>
<li>Parent2
<ul>
<li>Child1</li>
<li>Child2</li>
</ul>
</li>
</ul>
</li>
</ul>
</div>
<div class="form-group">
<input id="left" type="file" class="file" data-upload-url="/upload">
</div>
js
var array = [
{
"name": "Parent1",
"id": "1",
"description": "An extended Bootstrap table with radio, checkbox, sort, pagination, and other added features. (supports twitter bootstrap v2 and v3) "
},
{
"name": "Parent2",
"id": "2",
"description": "A jQuery plugin to select multiple elements with checkboxes :)"
},
{
"name": "Parent1",
"id": "3",
"description": "Show/hide password plugin for twitter bootstrap."
}
];
var array2 = [
{
"subname": "Parent101",
"subid": "101",
"description": "An extended Bootstrap table with radio, checkbox, sort, pagination, and other added features. (supports twitter bootstrap v2 and v3) "
},
{
"subname": "Parent202",
"subid": "202",
"description": "A jQuery plugin to select multiple elements with checkboxes :)"
},
{
"subname": "Parent101",
"subid": "303",
"description": "Show/hide password plugin for twitter bootstrap."
}
];
var $table = $('#table');
var $study = $('#jstree');
$(function () {
$table.bootstrapTable({
formatNoMatches: function () {
return "This table is empty...";
}
});
$('#jstree')
.on('select_node.jstree', function(event, data){
// ===== Initialize parent =====
var loMainSelected = data;
uiGetParents(loMainSelected);
function uiGetParents(node) {
try {
var level = node.node.parents.length;
var elem = $('#' + node.node.id);
var parent = node.node.text;
for (var ln = 0; ln <= level - 1; ln++) {
elem = elem.parent();
var child = elem.children()[-1];
if (child != undefined) {
parent = child.text;
}
}
console.log(parent);
}
catch (err) {
console.log('Error in uiGetParents');
}
}
// ===== Click event on node =====
for(var i = 0; i < data.selected.length; i++) {
var node = data.instance.get_node(data.selected[i]).text;
if (node == "Child1") {
$(function () {
$table.bootstrapTable('refreshOptions',
{
data: array,
columns: [
{
title:"Name",
field:"name"
},
{
title:"Id",
field:"id"
},
{
title:"Description",
field:"description"
}
]
});
});
}
else if (node == "Child2"){
$(function () {
$table.bootstrapTable('refreshOptions',
{
data: array2,
columns: [
{
title:"Subname",
field:"subname"
},
{
title:"Subid",
field:"subid"
},
{
title:"Description",
field:"description"
}
]
});
});
}
}
})
.jstree({
"core" : {
"themes": {
"url": true,
"icons": true,
"dots": true
}
}
});
});
I want to create drag and drop node, so user could drag it and drop it into to the droppable window and he'll see the table with data. Separately everything works fine. Jstree is loading, eventHandler on click works well and you can see table by clicking and even drag and drop window works fine and display every file which user will drop into it but how to connect all of this stuff, has anyone idea?

For that you will have to use the dnd plugin and listen to drag-drop event as below. Check demo - Fiddle.
$(document).on('dnd_stop.vakata', function(e, data) {
for (var i = 0; i < data.data.nodes.length; i++) {
var node = $('#jstree').jstree().get_node(data.data.nodes[i]).text;
if (node == "Child1") {
$table.bootstrapTable('refreshOptions', {
data: array,
columns: [{
title: "Name",
field: "name"
}, {
title: "Id",
field: "id"
}, {
title: "Description",
field: "description"
}]
});
} else if (node == "Child2") {
$table.bootstrapTable('refreshOptions', {
data: array2,
columns: [{
title: "Subname",
field: "subname"
}, {
title: "Subid",
field: "subid"
}, {
title: "Description",
field: "description"
}]
});
}
}
});

how to create elements dynamically in HTML using JSON file

I want to create HTML elements dynamically using JSON file.
{"myObject": {
"JAVA": {
"id": "JAVAsubj",
"path": "json/data.json"
},
"C#": {
"id": "JAVAsubj",
"path": "json/data1.json"
},
"C++": {
"id": "JAVAsubj",
"path": "json/data2.json"
}
}
}
This is my JSON file. i want to create HTML buttons dynamically. Buttons should be create like JAVA,C#,C++. if i add something next to C++ then that button should get created dynamically

You can try something like this FIDDLE
however, i changed the myObject to an array of json objects as follows:
var jsonObj = {"myObject":
[
{
title: 'JAVA',
id: "JAVAsubj",
path: "json/data.json"
},
{
title: "C#",
id: "JAVAsubj",
path: "json/data1.json"
},
{
title: "C++",
id: "JAVAsubj",
path: "json/data2.json"
}
]
}
var count = Object.keys(jsonObj.myObject).length;
var container= document.getElementById('buttons'); // reference to containing elm
for(var i=0;i<count;i++){
var obj= jsonObj.myObject[i];
var button = "<input type='button' value="+obj.title+"></input>"
container.innerHTML+=button;
}

First thing you need to do that get your JSON into js object :
var myJSON= {"myObject": {
"JAVA": {
"id": "JAVAsubj",
"path": "json/data.json"
},
"C#": {
"id": "JAVAsubj",
"path": "json/data1.json"
},
"C++": {
"id": "JAVAsubj",
"path": "json/data2.json"
}
}
}
now get the value of your object into dictionary like below :
var dctLanguages = myJSON["myObject"];
now to render buttons dynamically, just do this :
var strHTML = '';
for (var key in dctLanguages)
{
var language = dctLanguages[key];
strHTML += '<input type="button" id="'+language.id+'" value="'+key+'"/>';
}
and append this HTML into your container div as follows :
$(strHTML).appendTo("#container");
Hope this will work for you..

const info = [
{
"id": 1,
"img": "a.jpg",
"name": "Avinash Mehta",
"desc": "I am Web Developer"
},
{
"id": 2,
"img": "c.jpg",
"name": "Avinash",
"desc": "I am Web"
},
{
"id": 3,
"img": "b.jpg",
"name": "Mehta",
"desc": "I am Developer"
},
]
const main = document.querySelector(".main");
window.addEventListener("DOMContentLoaded", function(){
let displayInfo = info.map(function(profile){
return` <div class="profile">
<img src="${profile.img}" alt="">
<h2>${profile.name}</h2>
<p>${profile.desc}</p>
</div>`
});
displayInfo = displayInfo.join("");
main.innerHTML = displayInfo
})

This shoule help you
const info = [
{
"id": 1,
"img": "a.jpg",
"name": "Avinash Mehta",
"desc": "I am Web Developer"
},
{
"id": 2,
"img": "c.jpg",
"name": "Avinash",
"desc": "I am Web"
},
{
"id": 3,
"img": "b.jpg",
"name": "Mehta",
"desc": "I am Developer"
},
]
const main = document.querySelector(".main");
window.addEventListener("DOMContentLoaded", function(){
let displayInfo = info.map(function(profile){
return` <div class="profile">
<img src="${profile.img}" alt="">
<h2>${profile.name}</h2>
<p>${profile.desc}</p>
</div>`
});
displayInfo = displayInfo.join("");
main.innerHTML = displayInfo
})