I'm tring to build a tree using Vis.js Network, like genealogy tree.
I've tried various configurations to draw graph like as tree using Vis.js Network.
I've wrote these configs:
{
"interaction": {
"zoomView": true,
"hover": true,
"dragNodes": true
},
"layout": {
"hierarchical": {
"direction": "UD",
"sortMethod": "directed",
"nodeSpacing": 150,
"parentCentralization": false
}
},
"physics": {
"enabled": false
}
}
and:
{
"interaction": {
"zoomView": true,
"hover": true,
"dragNodes": true
},
"layout": {
"hierarchical": {
"direction": "UD",
"sortMethod": "directed",
"nodeSpacing": 150,
"parentCentralization": true
}
},
"physics": {
"enabled": false
}
}
But my tree still growing from left to right like showing in image
My data is dynamic, when I click in a node they can expand. If needed I host to better understanding.
At first interaction the tree looks fine.
Related
I created a dashboard in Kibana and included also some Vega visualizations. My problem is that I cannot make the Vega bar chart responsive in sense of dynamically adjusting the size when the window size changes:
The bar chart on the dashboard
Settings:
autosize: {
type: "fit",
contains: "padding",
resize: true,
}
Bar chart on the dashboard
The bar chart after resizing - data does not adjust to the window
Bar char after resizing
I also tried to follow the instructions here https://vega.github.io/vega-lite/docs/size.html and used setting width or height to "container", but nothing worked, or I am defining them incorrectly.
The complete Vega specification is available below:
{
$schema: https://vega.github.io/schema/vega-lite/v5.json
title: Test
autosize: {
type: "fit",
contains: "padding",
resize: true,
},
// Define the data source
data: {
url: {
%context%: true
%timefield%: time
index: test
body: {
"aggs":{
"date_hist":{
"date_histogram": {
"field": "time",
"calendar_interval": "day",
"format": "strict_date"
},
"aggs":{
"state":{
"terms": {
"field": "f.keyword",
"include":["active","revoked"],
"min_doc_count": 0,
"size": 10000
}
},
"increased":{
"bucket_script": {
"buckets_path": {
"in": "state['active']>_count",
"out": "state['revoked']>_count"
},
"script": "params.in - params.out"
}
},
"active_patients":{
"cumulative_sum": {
"buckets_path": "increased"
}
}
}
}
},
"size":0
}
}
format: {property: "aggregations.date_hist.buckets"}
}
mark: bar
encoding: {
x: {
field: key_as_string
type: ordinal
axis: {title: "Date", "labelAngle": 45}
}
y: {
field: active_patients.value
type: quantitative
axis: {title: " "}
}
"color": {"value": "#00A6CE "}
}
}
I would appreciate any assistance!
You need to create a signal that will listen window resize event.
This signal will read the container width.
"signals": [
{
"name": "width",
"init": "containerSize()[0]",
"on": [{ "events": "window:resize", "update": "containerSize()[0]" }]
}
],
After that, you need to define a range on xscale to read the signal previously created.
"scales": [
{
"name": "xscale",
"type": "band",
"domain": {"data": "table", "field": "your_value"},
"range": [0, { "signal": "width" }],
"padding": 0.05
},
]
I am following this documentation on making href channel inside the encoding of a vega-lite scatter plot.
The data I am using is from an elasticsearch index. This is my code for the plot:
{
$schema: https://vega.github.io/schema/vega-lite/v4.json
data: {
url: {
%context%: true
index: my_index
body: {
size: 10000
}
}
format: {
property: hits.hits
}
}
transform: [
{
calculate: datum._source.price
as: price
}
{
calculate: datum._source.size
as: size
}
{
calculate: "'https://www.example.com/'+datum._source.id"
as: url
}
]
layer: [
{
selection: {
grid: {
type: interval
bind: scales
}
}
mark: {
type: circle
tooltip: true
}
encoding: {
x: {
field: size
type: quantitative
}
y: {
field: price
type: quantitative
}
href: {
field: url
}
}
}
]
}
The code works and on hovering over the scatter points, the mouse changes to a recognised link however the click itself does not work. why is that? the only differences from the documented example is that the data is from elasticsearch and I have a second layer in the plot.
How can I make the hyperlinks work?
To enable the click selection, you need to provide a selection of type: single. Try click the points in the link of editor or try the sample below:
{
"$schema": "https://vega.github.io/schema/vega-lite/v4.json",
"description": "Using `labelExpr` to show only initial letters of month names.",
"data": {"url": "data/seattle-weather.csv"},
"mark": "circle",
"transform": [
{
"calculate": "'https://www.google.com'",
"as": "url"
}
],
"selection": {"select": {"type": "single"}},
"encoding": {
"href": {"field": "url"},
"x": {
"timeUnit": "month",
"field": "date",
"axis": {"labelAlign": "left", "labelExpr": "datum.label[0]"}
},
"y": {"aggregate": "mean", "field": "precipitation"}
}
}
I just started looking at GraphQL and I am wondering if there is a way to filter results that don't have any nodes. Here is a relatively simple example query:
query {
organization(login:"GitHub") {
repositories(first: 20) {
edges {
node {
name
pullRequests(first: 5, states: OPEN){
edges {
node {
title
author{
login
}
updatedAt
}
}
}
}
}
}
}
}
and here is a subset of the results that query returns:
{
"data": {
"organization": {
"repositories": {
"edges": [
{
"node": {
"name": "gitignore",
"pullRequests": {
"edges": [
{
"node": {
"title": "Create new CodeComposerStudio.gitignore",
"author": {
"login": "wolf99"
},
"updatedAt": "2017-07-26T20:31:53Z"
}
},
{
"node": {
"title": "Create PVS.gitignore",
"author": {
"login": "cesaramh"
},
"updatedAt": "2017-05-01T19:42:07Z"
}
},
{
"node": {
"title": "gitignore for Magic Software Enterprises product xpa ",
"author": {
"login": "tommes"
},
"updatedAt": "2017-05-01T19:41:53Z"
}
},
{
"node": {
"title": "Create PSoC.gitignore",
"author": {
"login": "dbrwn"
},
"updatedAt": "2017-05-01T19:41:39Z"
}
},
{
"node": {
"title": "add ThinkPHP gitignore file",
"author": {
"login": "swumao"
},
"updatedAt": "2017-05-01T19:40:53Z"
}
}
]
}
}
},
{
"node": {
"name": "dmca",
"pullRequests": {
"edges": []
}
}
}
]
}
}
}
}
So I'd like to know if there is a way to modify my query so that it would not return the node named dmca since there are no edges on pullRequests.
If you are using githubs graphql api than it seems that there is no way to filter those edges,
But if you're implementing the graphql server then it's possible to know what the edges nodes are and thus filter it in the edge resolver
According to GitHub repositories documentation does not allow that kind of filtering.
first: Int
Returns the first n elements from the list.
after: String
Returns the elements in the list that come after the specified cursor.
last: Int
Returns the last n elements from the list.
before: String
Returns the elements in the list that come before the specified cursor.
privacy: RepositoryPrivacy
If non-null, filters repositories according to privacy
orderBy: RepositoryOrder
Ordering options for repositories returned from the connection
affiliations: [RepositoryAffiliation]
Affiliation options for repositories returned from the connection
isLocked: Boolean
If non-null, filters repositories according to whether they have been locked
isFork: Boolean
If non-null, filters repositories according to whether they are forks of another repository
So I don't think that can be done.
It seems that Amchart is caching the json and it is not drawing the graph nor legend.
First time I open the modal it displays fine, but if I close it and open again it displays all the data in labels (taken from the same JSON), but the chart is not being drawed. Is it a caching issue?
This is the way I am drawing it:
var modelPie = #Html.Raw(jsonPie);
var dataProvider = [];
dataProvider = modelPie.UsefulLifes;
var chartdivdounut = AmCharts.makeChart("chartdivdounut", {
"type": "pie",
"startDuration": 0,
"theme": "light",
"addClassNames": true,
"legend": {
"position": "right",
"marginRight": 0,
"autoMargins": false
},
"innerRadius": "30%",
"defs": {
"filter": [{
"id": "shadow",
"width": "200%",
"height": "200%",
"feOffset": {
"result": "offOut",
"in": "SourceAlpha",
"dx": 0,
"dy": 0
},
"feGaussianBlur": {
"result": "blurOut",
"in": "offOut",
"stdDeviation": 5
},
"feBlend": {
"in": "SourceGraphic",
"in2": "blurOut",
"mode": "normal"
}
}]
},
"dataProvider": dataProvider,
"valueField": "Value",
"titleField": "FieldName",
"showZeroSlices": false,
"labelsEnabled": false,
"export": {
"enabled": true
}
});
chartdivdounut.addListener("init", handleInit);
chartdivdounut.addListener("rollOverSlice", function (e) {
handleRollOver(e);
});
function handleInit() {
chartdivdounut.legend.addListener("rollOverItem", handleRollOver);
}
function handleRollOver(e) {
var wedge = e.dataItem.wedge.node;
wedge.parentNode.appendChild(wedge);
}
enter code here
I realized that the script section in the partial view was being executed just one time.
Seems to be something messed up. I re-wrote that part of the code and it started to work properly.
I'm trying to get a jsTree working with on demand loading of subnodes. My code is this:
jQuery('#introspection_tree').jstree({
"json_data" : {
"ajax" : {
url : "http://localhost/introspection/introspection/product"
}
},
"plugins" : [ "themes", "json_data", "ui" ]
});
The json returned from the call is
[
{
"data": "Kit 1",
"attr": {
"id": "1"
},
"children": [
[
{
"data": "Hardware",
"attr": {
"id": "2"
},
"children": [
]
}
],
[
{
"data": "Software",
"attr": {
"id": "3"
},
"children": [
]
}
]
]
}
.....
]
Each element could have a lot of children, the tree is going to be big. Currently this is loading the whole tree at once, which could take some time. What do I have to do to implement on-demand-loading of child-nodes when they are opened by the user?
Thanks in advance.
Irishka pointed me in the right direction, but does not fully resolve my problem. I fiddled around with her answer and came up with this. Using two different server functions is done only for clarity. The first one lists all products at top level, the second one lists all children of a given productid:
jQuery("#introspection_tree").jstree({
"plugins" : ["themes", "json_data", "ui"],
"json_data" : {
"ajax" : {
"type": 'GET',
"url": function (node) {
var nodeId = "";
var url = ""
if (node == -1)
{
url = "http://localhost/introspection/introspection/product/";
}
else
{
nodeId = node.attr('id');
url = "http://localhost/introspection/introspection/children/" + nodeId;
}
return url;
},
"success": function (new_data) {
return new_data;
}
}
}
});
The json data returned from the functions is like this (notice the state=closed in each node):
[
{
"data": "Kit 1",
"attr": {
"id": "1"
},
"state": "closed"
},
{
"data": "KPCM 049",
"attr": {
"id": "4"
},
"state": "closed"
},
{
"data": "Linux BSP",
"attr": {
"id": "8"
},
"state": "closed"
}
]
No static data is needed, the tree is now fully dynamic on each level.
I guess it would be nice to display by default first level nodes and then the children will be loaded on demand. In that case the only thing you have to modify is to add "state" : "closed" to the nodes whose child nodes are going to be loaded on demand.
You might wish to send node's id in ajax call so you modify your code
"json_data": {
//root elements to be displayed by default on the first load
"data": [
{
"data": 'Kit 1',
"attr": {
"id": 'kit1'
},
"state": "closed"
},
{
"data": 'Another node of level 1',
"attr": {
"id": 'kit1'
},
"state": "closed"
}
],
"ajax": {
url: "http://localhost/introspection/introspection/product",
data: function (n) {
return {
"nodeid": $.trim(n.attr('id'))
}
}
}
}
From jsTree documentation
NOTE:
If both data and ajax are set the initial tree is rendered from the data string. When opening a closed node (that has no loaded children) an AJAX request is made.
you need to set root elements as tree data on page load and then you will be able to retrieve their children with an ajax request
$("#introspection_tree").jstree({
"plugins": ["themes", "json_data", "ui"],
"json_data": {
//root elements
"data": [{"data": 'Kit 1', "attr": {"id": 'kit1'}} /*, ... */], //the 'id' can not start with a number
"ajax": {
"type": 'POST',
"data": {"action": 'getChildren'},
"url": function (node) {
var nodeId = node.attr('id'); //id="kit1"
return 'yuorPathTo/GetChildrenScript/' + nodeId;
},
"success": function (new_data) {
//where new_data = node children
//e.g.: [{'data':'Hardware','attr':{'id':'child2'}}, {'data':'Software','attr':{'id':'child3'}}]
return new_data;
}
}
}
});
See my answer to a similar question here (the old part) for more details
I spended hours on this problem. Finally i got it that way:
$("#resourceTree").jstree({
"types": {
"default": {
"icon": "fa fa-folder-open treeFolderIcon",
}
},
"plugins": ["json_data", "types", "wholerow", "search"],
"core": {
"multiple": false,
"data": {
"url" : function(node){
var url = "rootTree.json";
if(node.id === "specialChildSubTree")
url = "specialChildSubTree.json";
return url;
},
"data" : function(node){
return {"id" : node.id};
}
}
},
});
rootTree.json:
[
{
"text": "Opened root folder",
"state": {
"opened": true
},
"children": [
{
"id" : "specialChildSubTree",
"state": "closed",
"children":true
}
]
}
]
specialChildSubTree.json:
[
"Child 1",
{
"text": "Child 2",
"children": [
"One more"
]
}
]
So i mark the node that become the parent of the ajax loaded subtree with an id, i watch for in the core configuration.
NOTE:
That node must have the "state" : "closed" parameter and it must have
the parameter "children" : true.
I am using jsTree.js in version 3.3.3
Above solution is all fine. Here I am also providing similar working solution and very simple for lazy loading of nodes using ajax call vakata. When your API works like
https://www.jstree.com/fiddle/?lazy
and for getting any child nodes
https://www.jstree.com/fiddle/?lazy&id=2
for explanation and for complete solution you can have a look at https://everyething.com/Example-of-jsTree-with-lazy-loading-and-AJAX-call
<script type="text/javascript">
$(function () {
$('#SimpleJSTree').jstree({
'core' : {
'data' : {
'url' : "https://www.jstree.com/fiddle/?lazy",
'data' : function (node) {
return { 'id' : node.id };
}
}
}
});
});
</script>