almende / vis Goto Github PK
View Code? Open in Web Editor NEW⚠️ This project is not maintained anymore! Please go to https://github.com/visjs
⚠️ This project is not maintained anymore! Please go to https://github.com/visjs
Can I manually call a method to redraw the timeline?
Thanks
I have to add a new node but a specific location. After that I want my node to be movable. I use the update method to change the x, y to undefined, but it doesn't work. I can't drag the node.
Is there a specific way to write some in order to succeed that or not? Am I missing something?
Would be possible to add the double click functionality on the graph nodes?
Thanks for the awesome js lib :)
The tiny little thing i want is two lines between nodes.
if i put the edge like this,
edges.push({
from : 1,
to : 2,
length : LENGTH_MAIN,
color : 'red',
label : "bad",
style : "arrow"
});
edges.push({
from : 2,
to : 1,
length : LENGTH_MAIN,
color : 'green',
label : "ANOTHER",
style : "arrow"
});
it only shows one :(
I love this new library. Is editing /add/ delete works within vis?
I've been using this library a lot for a project and it's really neat to see how quickly it's been getting updated and how much work has been done on it lately and I was thinking that I would like to contribute if possible. I'd like to look into the feasibility of implementing an adaptive time step for the graph layout. This addition would change the length of the renderTimestep based on the total energy of the system and should help to avoid local minima in layout. I also think that although tricky, implementing it should be relatively straight forward. Essentially, the timestep stays the same while the energy is decreasing, increases as the energy continues to decrease, and gets smaller if the energy increases from one tick to the next. A more in depth description of the method is described in section three of this paper: http://www.mathematica-journal.com/issue/v10i1/contents/graph_draw/graph_draw_3.html
If I were interested in implementing this, where could I get the sum of the current total forces in the current layout? I'm not an expert with javascript yet and I can't tell where I can grab that figure from. I could loop through all nodes and do a vector sum of fx and fy but I feel like that's already being done somewhere else and I would be adding unnecessary calculations.
I'd love to try and contribute to this project, even in a small way. Please let me know if this is something that you think can be done.
This is a feature request!
First of all let me tell you this library is really well designed and easy to use. It's a really nice job. Also the documentation and the examples are comprehensive and clear.
Now let's get to my request: I'm using the timeline with grouping like in the groups example (n. 5). I would like to change the background color for today so that it's clear what is happening today. Unfortunately I couldn't find any css or javascript way to do this at the moment.
Let me know your thoughts about this.
Thanks
Luigi
is there a way to cluster nodes based on similar attributes (e.g. groups)?
created ./vis.js
created ./vis.min.js
jake aborted.
ReferenceError: navigator is not defined
at /Users/gillingh/Code/vis-upstream/vis.js:70:28
at Object. (/Users/gillingh/Code/vis-upstream/vis.js:1447:3)
at s (/Users/gillingh/Code/vis-upstream/vis.js:26:227)
at /Users/gillingh/Code/vis-upstream/vis.js:26:278
at Object.hammerjs (/Users/gillingh/Code/vis-upstream/vis.js:3772:69)
at s (/Users/gillingh/Code/vis-upstream/vis.js:26:227)
at e (/Users/gillingh/Code/vis-upstream/vis.js:26:398)
at /Users/gillingh/Code/vis-upstream/vis.js:26:416
at a (/Users/gillingh/Code/vis-upstream/vis.js:25:54)
at Object. (/Users/gillingh/Code/vis-upstream/vis.js:25:231)
when using
edges: style: 'arrow'
and
nodes:
image: 'http://server/icon.png', shape: 'image'
the central image is not transparent
example: http://i60.tinypic.com/2qu6exs.png
without 'arrow' style, transparent png: http://i61.tinypic.com/zo6rmd.png
thanks.
Hi!! Great library by the way, thank you so much!
As the title states, is it possible to have multiple edges connecting two nodes but when using hierarchical layout? I'm using the hierarchical layout so I can assign levels for each node because I need to mantain an order in the nodes (left to right order) but in some cases I need to display two edges connecting two nodes. Is there any possibility to achieve this?
Thanks!!
Congratulations for the excellent work.
Wonder if it is possible to set the range of dates / times (example at night)
to compress visually.
thanks
Hi,
Firstly thank you for your amazing work. I'm a student currently using Vis.js to represent dynamic data within an xslt page. I have managed to get everything up and displaying, but I can't seem to work out how to do a hyperlink.
I've tried a href, the elongated a attribute method for xsl and passing the a href statement as a variable into the contents section. None of which has given me any luck.
Any help is greatly appreciated,
Trent.
Has this feature been implemented yet? I did not see any reference to it in the documentation.
Is there some plans to make a GWT wrapper ?
Thanks !
Julien
@josdejong Hi there, you mentioned with this issue almende/chap-links-library#157 that this new library would be suited for vertical timelines, is that still the case?
We most likely are needing a vertical timeline. Your CHAP Links Libarary's Timeline plugin seems to be suitable for our needs, though we would need it to render vertically. It's needed for a web application so we might be willing to put in the hours needed for refactoring the plugin to our needs.
Is vis.js more suitable for that purpose? How should we proceed with vertical timeline?
I'd like to be able to select also an edge of the graph and it would be nice to give back node/edge objects not only the id.
Hi. Thanks a lot for your great software.
Is there any roadmap for vis wrt. chap-links ? I understand from #1 (comment) that you want to have a clean, generic and modular approach with vis.js, but are there any criteria for integration?
More specifically, I am interested in the timeline component. I need features that are in either implementation but not in both: the ClusterGenerator from chap-links (because stacking events does not scale with a great number of events), and the ability to specify the displayed groups from vis.js. Do you have any advice on the way to go?
Hi guys!
First of all, I want to thank you for your wonderful (and useful) library.
I use your library a lot (sna) and I was wondering if you can or will include any functions about network measures and/or indices (like density, connectivity, betweenness or centrality). I think it would be really useful for network analysis.
Anyway, thank you again and please keep developing this great tool.
Kind regards.
I saw the issues about the overlapping multiple edges between the same 2 nodes, but the edge labels at that case are still overlapping even when the smooth curves option is on.
Is there any chance you can fix it by positioning the labels in the middle of the edges instead of the 2 nodes halfway?
Thanks!
Hey, I have a question: Do you have an option for a static graph layout?
Thanks!
Would be nice to be able to attach 'end' of item to 'update function' of current time with build in functionality. So if you monitor the page without refreshing, it will show items in the present tense.
Is there a way to store custom JSON data in a graph node/edge
When we create a graph with multiple edges from same node to other node, the edges are overlapping each other.
Example:
var nodes = [
{id: 1, label: 'a', shape: 'image', image: 'a.png'},
{id: 2, label: 'b', shape: 'image', image: 'b.png'}
];
var edges = [
{id: 1, from: 1, to: 2, label: 'edge1', style: 'arrow'},
{id: 2, from: 1, to: 2, label: 'edge2', style: 'arrow'}
];
If I fx in the 01_basic.html example file, sets options with height = 100%, then alle browsers crashes IE, Chrome, etc). If I set it to 100%, then I will have to set (css) body height and the div height to 100% as well.
This code crashes the browser...
<!DOCTYPE HTML>
<html>
<head>
<title>Timeline | Basic demo</title>
<style type="text/css">
body, html {
font-family: sans-serif;
}
</style>
<script src="../../dist/vis.js"></script>
<link href="../../dist/vis.css" rel="stylesheet" type="text/css" />
</head>
<body>
<div id="visualization"></div>
<script type="text/javascript">
var container = document.getElementById('visualization');
var items = [
{id: 1, content: 'item 1', start: '2013-04-20'},
{id: 2, content: 'item 2', start: '2013-04-14'},
{id: 3, content: 'item 3', start: '2013-04-18'},
{id: 4, content: 'item 4', start: '2013-04-16', end: '2013-04-19'},
{id: 5, content: 'item 5', start: '2013-04-25'},
{id: 6, content: 'item 6', start: '2013-04-27'}
];
var options = {
height: '100%'
};
var timeline = new vis.Timeline(container, items, options);
</script>
</body>
</html>
This code works....
<!DOCTYPE HTML>
<html>
<head>
<title>Timeline | Basic demo</title>
<style type="text/css">
body, html {
font-family: sans-serif;
height: 100%;
}
#visualization {
height: 100%;
}
</style>
<script src="../../dist/vis.js"></script>
<link href="../../dist/vis.css" rel="stylesheet" type="text/css" />
</head>
<body>
<div id="visualization"></div>
<script type="text/javascript">
var container = document.getElementById('visualization');
var items = [
{id: 1, content: 'item 1', start: '2013-04-20'},
{id: 2, content: 'item 2', start: '2013-04-14'},
{id: 3, content: 'item 3', start: '2013-04-18'},
{id: 4, content: 'item 4', start: '2013-04-16', end: '2013-04-19'},
{id: 5, content: 'item 5', start: '2013-04-25'},
{id: 6, content: 'item 6', start: '2013-04-27'}
];
var options = {
height: '100%'
};
var timeline = new vis.Timeline(container, items, options);
</script>
</body>
</html>
Can this be fixed?
Thanks
timeline not show when have 1 or 2 item box
help me please
With lots of events in the screen instead of just hiding them or doing something else, the events just overlap the legend making it pretty hard to use.
If using dataManipulation: true and graph.on('select'....), after click the edit button and then the close(x), the DIV will no longer update.
var options = {
stabilize: false,
navigation: true,
keyboard: true,
dataManipulation: true
};
graph.on('select', function(params)
{
if (params.nodes>0)
{
$('#info').load('".BASE_URL."/includes/ajax/getInfo.php?id=' + params.nodes );
}
});
Thanks in advance.
Modifying the padding option given to the timeline changes nothing as far as the stacking goes, even if you modify the CSS to match.
Hi,
I love vis. It fits almost all my requirements perfectly. But, I have one issue: I use graphviz to generate the dot script with Left to Right Layout like this.
digraph G {
graph [ rankdir = LR, id = "viewport" ];
...
}
But, when I render it on html, vis ignores it, I assume. Can you tell me how it could be implemented ?
UPDATE: Saw a couple of test cases in the repo dealing with LR, but it doesn't work for my case.
Here's the graph:
Here's my dot file:
digraph G {
graph [ rankdir = LR, id = "viewport" ];
"CA1 LTP";
"pjacob-nuclear";
"pCREB";
"LTP";
"Neuronal death";
"dendritic complexity";
"palpha-CaMKII T286";
"CA1 LTD";
"CA1 synaptic transmission";
"hippocampal learning";
"NMDAR";
"visual learning";
"peIF2alpha";
"translation";
"CA1 LTP" -> "pjacob-nuclear" [ label = "0.125↑" ];
"pjacob-nuclear" -> "pCREB" [ label = "0.375↑↓" ];
"pjacob-nuclear" -> "LTP" [ label = "0.125↑" ];
"pjacob-nuclear" -> "Neuronal death" [ arrowhead = tee, label = "0.125↑" ];
"pjacob-nuclear" -> "dendritic complexity" [ label = "NaN" ];
"CA1 LTP" -> "palpha-CaMKII T286" [ style = "dashed", label = "0.1125↑" ];
"palpha-CaMKII T286" -> "CA1 LTP" [ label = "0.2421875↓" ];
"palpha-CaMKII T286" -> "CA1 LTD" [ style = "dashed", label = "0.1875↓" ];
"palpha-CaMKII T286" -> "CA1 synaptic transmission" [ label = "0.125↓" ];
"palpha-CaMKII T286" -> "hippocampal learning" [ label = "0.125↓" ];
"palpha-CaMKII T286" -> "NMDAR" [ style = "dashed", label = "0.125↓" ];
"palpha-CaMKII T286" -> "visual learning" [ label = "0.125↓" ];
"CA1 LTP" -> "peIF2alpha" [ style = "dashed", label = "0.125↑" ];
}
Any time you set the height option on the timeline while also using groups, the height appears to only apply to the first group instead of the entire timeline
This can be demonstrated by taking the http://visjs.org/examples/timeline/05_groups.html and simply adding the height option as done below.
<!doctype html>
<html>
<head>
<title>Timeline | Basic demo</title>
<script src="http://visjs.org/vis.js"></script>
<style type="text/css">
body, html {
font-family: sans-serif;
}
</style>
</head>
<div id="visualization"></div>
<script>
var now = moment().minutes(0).seconds(0).milliseconds(0);
var groupCount = 3;
var itemCount = 20;
// create a data set with groups
var names = ['John', 'Alston', 'Lee', 'Grant'];
var groups = new vis.DataSet();
for (var g = 0; g < groupCount; g++) {
groups.add({id: g, content: names[g]});
}
// create a dataset with items
var items = new vis.DataSet();
for (var i = 0; i < itemCount; i++) {
var start = now.clone().add('hours', Math.random() * 200);
var group = Math.floor(Math.random() * groupCount);
items.add({
id: i,
group: group,
content: 'item ' + i +
' <span style="color:#97B0F8;">(' + names[group] + ')</span>',
start: start,
type: 'box'
});
}
// create visualization
var container = document.getElementById('visualization');
var options = {
groupsOrder: 'content',
height: 700
};
var timeline = new vis.Timeline(container);
timeline.setOptions(options);
timeline.setGroups(groups);
timeline.setItems(items);
</script>
</body>
</html>
Hi, I was trying to set the classname for items, but it doesn't show up when I inspect the element in Firebug. It works when I add it to groups.
This is the code I was trying:
// create a data set with groups
var names = ['Alston', 'John', 'Lee', 'Grant'];
var groups = new vis.DataSet();
for (var g = 0; g < groupCount; g++) {
groups.add({ id: g, content: names[g], className: names[g] });
}
// create a dataset with items
var items = new vis.DataSet();
for (var i = 0; i < itemCount; i++) {
var start = now.clone().add('hours', Math.random() * 200);
var group = Math.floor(Math.random() * groupCount);
var classname = Math.floor(Math.random() * groupCount);
items.add({
id: i,
group: group,
content: 'hello' + group,
start: start,
type: 'box',
className: names[classname]
});
}
I gave it a small stylesheet to test.
.Lee
{
background-color: #E6F367;
border-color: #E6F367;
}
the group 'Lee' gets the yellow background, but the items don't look like they have the class' Lee'. Am I missing something here?
Thanks,
Meghna
It will be really cool if I could set a color for selected edges (selected node's edges).
Thanks!
Hi,
In chap-links there's a "className" for items, so we can specify our own css on every item. Is that not possible in "vis"?
Thanks
:)
Is it possible those specific edges not to cover each other?
Phew .. this was a hard one to track down.
Setting the rootpanel border to none in css inside the BODY TAGS, stops the timeline from updating. If you place it inside the HEAD tags it works.
So this DOESN'T work...
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<meta http-equiv="Cache-Control" content="no-cache, no-store, must-revalidate" />
<meta http-equiv="Pragma" content="no-cache" />
<meta http-equiv="Expires" content="0" />
<title>Timeline | Basic demo</title>
<style type="text/css">
body, html {
font-family: sans-serif;
}
</style>
<script type="text/javascript" src="/_base/assets/plugins/vis/dist/vis.js"></script>
<link href="/_base/assets/plugins/vis/dist/vis.min.css" rel="stylesheet" />
</head>
<body>
<style type="text/css">
.vis.timeline.rootpanel {
border: none;
}
</style>
<div id="visualization"></div>
<script type="text/javascript">
var container = document.getElementById('visualization');
var items = [
{ id: 1, content: 'item 1', start: '2013-04-20' },
{ id: 2, content: 'item 2', start: '2013-04-14' },
{ id: 3, content: 'item 3', start: '2013-04-18' },
{ id: 4, content: 'item 4', start: '2013-04-16', end: '2013-04-19' },
{ id: 5, content: 'item 5', start: '2013-04-25' },
{ id: 6, content: 'item 6', start: '2013-04-27' }
];
var options = {};
var timeline = new vis.Timeline(container, items, options);
</script>
</body>
</html>
This DOES work...
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<meta http-equiv="Cache-Control" content="no-cache, no-store, must-revalidate" />
<meta http-equiv="Pragma" content="no-cache" />
<meta http-equiv="Expires" content="0" />
<title>Timeline | Basic demo</title>
<style type="text/css">
body, html {
font-family: sans-serif;
}
.vis.timeline.rootpanel {
border: none;
}
</style>
<script type="text/javascript" src="/_base/assets/plugins/vis/dist/vis.js"></script>
<link href="/_base/assets/plugins/vis/dist/vis.min.css" rel="stylesheet" />
</head>
<body>
<div id="visualization"></div>
<script type="text/javascript">
var container = document.getElementById('visualization');
var items = [
{ id: 1, content: 'item 1', start: '2013-04-20' },
{ id: 2, content: 'item 2', start: '2013-04-14' },
{ id: 3, content: 'item 3', start: '2013-04-18' },
{ id: 4, content: 'item 4', start: '2013-04-16', end: '2013-04-19' },
{ id: 5, content: 'item 5', start: '2013-04-25' },
{ id: 6, content: 'item 6', start: '2013-04-27' }
];
var options = {};
var timeline = new vis.Timeline(container, items, options);
</script>
</body>
</html>
Since I'm using the timeline in partial vies in MVC, I would prefer being able to set the rootpanel border inside the body tags.
Don't know if there's a better way to remove the border?
:)
I think that Range must be subscribed to 'div.groupset' for 'zoom' event (may be 'move' too), not to rootPanel, to give a chance to scroll timeline vertically on touch devices, when having a lot of groups. In other words: exclude 'div.label-set' from zoom/move mouse listeners
I've tried with this code, but it doesn change padding of items nor spacing between items.
Am I doing something wrong?
Here's my code...
<!DOCTYPE HTML>
<html>
<head>
<title>Timeline | Basic demo</title>
<style type="text/css">
body, html {
font-family: sans-serif;
}
</style>
<script src="../../dist/vis.js"></script>
<link href="../../dist/vis.css" rel="stylesheet" type="text/css" />
</head>
<body>
<div id="visualization"></div>
<script type="text/javascript">
var container = document.getElementById('visualization');
var items = [
{id: 1, content: 'item 1', start: '2013-04-20'},
{id: 2, content: 'item 2', start: '2013-04-14'},
{id: 3, content: 'item 3', start: '2013-04-18'},
{id: 4, content: 'item 4', start: '2013-04-16', end: '2013-04-19'},
{id: 5, content: 'item 5', start: '2013-04-25'},
{id: 6, content: 'item 6', start: '2013-04-27'}
];
var options = {
'padding': 1,
'margin.item': 2
};
var timeline = new vis.Timeline(container, items, options);
</script>
</body>
</html>
:)
Thanks
Hi guys,
I thought that it could be nice if the navigation control buttons will have the "glow effect" on every keypress (only when the keyboard option is enabled of course) like on mouseover.
It's really nice to have and not that important...
Thanks!
If i take the cursor to the canvas, scroll down and up, the canvas image gets bigger and small. In my application, this is very awkward, because it has a lot of info in this page. The user have to scoll down to see other infos, but it is zooming the canvas, if the cursor is inside the canvas div :(
Is there a option with this? I checked the api ref in your site. but it seems like doesn't have this option :(
and also, can i prevent dragging the image canvas?
Is there a status page? (not sure where else to go for this)
I was confused on another ticket whether a bug was resolved or not, and there are many features yet to be migrated from the old code, I understand. It would be helpful ----for everyone, I think---- if we can get some kind of update.
We acknowledge there is not enough time to devote to cool projects like this and I'd like to help if I can. For example, I am especially interested in MIN, MAX, START, END config settings right now.
I am probably NOT the kind of coder who can just grab stuff and get it done on my own... BUT... I can do a lot of work IF you can tell me what to do. Is this something where some section of code in the OLD version just needs to be copied to a specific spot(s?) in the NEW and tested? Maybe some repetitive process someone like me can crank out? If so, I am good at that kind of thing and might provide some manpower to help progress.
Either way, it would be good to know what the NEAR TERM... say, next 6 months.. MIGHT yield (accepted there are no promises). Just trying to get a sense of things.
I do appreciate your/everyone's work. I'd like to contribute but am in a quandary as to which direction is best for me right now.
thanks!
It will be great if there will be an option that the graphs will initially appear in the zoom extended mode (like the zoom extent option in the navigation controls) after stabilization.
Even with "stabilize: true" it sometimes appears with too high zoom and only part of the graph is shown.
Thanks!
Is there a way/planned way to be able to toggle what timezone the timeline uses? It would be very useful for me to be able to toggle the display from localtime as it defaults into UTC.
I am creating a graph containing 40-50 nodes on a screen of a resolution 1920 x 1200. I have both the width and the height set to 100% but the graph only takes up about a 450px x 450px area in the middle of the page.
If I zoom in using the mouse wheel then the graph will take up the entire screen and looks great; is it possible to have the graph take up more space when it initially loads.
I have the font size set to 12 but they are much smaller than this. Is it possible to set a minimum font size to force the graph to take up more space? If not, is there another way to force the graph to be bigger?
Cheers,
Phil
A declarative, efficient, and flexible JavaScript library for building user interfaces.
🖖 Vue.js is a progressive, incrementally-adoptable JavaScript framework for building UI on the web.
TypeScript is a superset of JavaScript that compiles to clean JavaScript output.
An Open Source Machine Learning Framework for Everyone
The Web framework for perfectionists with deadlines.
A PHP framework for web artisans
Bring data to life with SVG, Canvas and HTML. 📊📈🎉
JavaScript (JS) is a lightweight interpreted programming language with first-class functions.
Some thing interesting about web. New door for the world.
A server is a program made to process requests and deliver data to clients.
Machine learning is a way of modeling and interpreting data that allows a piece of software to respond intelligently.
Some thing interesting about visualization, use data art
Some thing interesting about game, make everyone happy.
We are working to build community through open source technology. NB: members must have two-factor auth.
Open source projects and samples from Microsoft.
Google ❤️ Open Source for everyone.
Alibaba Open Source for everyone
Data-Driven Documents codes.
China tencent open source team.