Develop Reference

Creating an expandable multi-layer System Diagram [closed]

Closed. This question needs to be more focused. It is not currently accepting answers.
Want to improve this question? Update the question so it focuses on one problem only by editing this post.
Closed 5 years ago.
Improve this question
SITUATION: My company has a massively complex and dynamic IT infrastructure. These systems are far too complex to map and present through a diagram. I am trying to create a centralized website that houses all documentation, for all IT teams, with interactive expandable system diagrams, so that teams can drill-down and view as much, or as little of the system as they need without being overwhelmed.
QUESTION: Using DHTML, is it possible to create an interactive diagram that starts out as a simple square with the system name, then once the users clicks on it, that square disappears and expands to reveal more of the system components? Each component would then be clickable, and the process would continue until the system was completely broken down.
NOTE: I apologize if this is ambiguous. I didn't know how else to describe it. Google continues to pull up incorrect results to all queries. All help is appreciated.

What you are looking for is definitely possible. I believe the search terms you should be looking for is diagramming libraries or graph drawing and flow-charting programming libraries. There are a lot of libraries out there, both commercial and open-source. See this related SO question for a number of options.
From your description, I believe the yFiles for HTML diagramming library should be a good match.
There are two demos available online that show scenarios that seem to match your description:
Live Demo Hierarchic Grouping
Live Demo Collapsible Tree
Since this is a library with a huge API you can easily customize the look and feel as well as the data sources to your own specific requirements.
Disclosure: I work for the company that creates that (commercial) library, however I do not represent my employer here. This is my own post and opinion.

I am not sure if I understood correctly your question. But it seems you are looking for a tree diagram. There is this example in D3.

Yes, it is possible, but there are many options to possible designs, so more specific suggestions will not be definitive. The distribution of concerns between client and server ( who does compute what part of the schematics at what time / upon which user action ) should be a reasonable first design choice. Further criteria comprise visualization complexity, data complexity, data source, frequency of data change, ease of development, available development skills and budget.
Today's user agents and computing power allow to run the whole gamut between client-only and server-only processing (almost that is: basic user input ['mouse clicks'] will of course be processed client-side).
The easiest path will probably be to use a client-side library like D3.js on a precomputed data set as #MárioAreias suggests.

Is there any JavaScript libraries for graph operations and algorithms? [closed]

Closed. This question does not meet Stack Overflow guidelines. It is not currently accepting answers.
We don’t allow questions seeking recommendations for books, tools, software libraries, and more. You can edit the question so it can be answered with facts and citations.
Closed last year.
Improve this question
What I need is a JavaScript implementation of pure mathematical graphs. To be clear I DON'T mean graph visualization libraries like sigma.js or d3.js.
The library I'm looking for would implement following features:
creation of directed and undirected graph objects
creation of weighted and unweighted graps objects
adding/removing vertices and edges to/from the graph
adding labels to vertices and edges (i.e. additional meta data)
implementation of basic graph search and traversal algorithms like depth-first-search, breadth-first search, Dijkstra's algorithm, A* and others.
Does anyone know if one already exists?

Now there is a library: graphlib
Graphlib is a JavaScript library that provides data structures for undirected and directed multi-graphs along with algorithms that can be used with them.
Implements:
directed and undirected graphs (does A -> B imply B -> A)
multigraphs (multiple distinct named edges from A -> B)
compound graphs (nodes can have children that form a "subgraph")
Dijkstra algorithm (shortest path)
Floyd-Warshall algorithm (shortest path supporting negative weights)
Prim's algorithm (minimum spanning tree)
Tarjan's algorithm (strongly connected components)
Topological sorting (dependency sort for directed acyclic graphs)
Pre- and postorder traversal (callback on every node)
Finding all cycles and testing if a graph is acyclic
Finding all connected components
NPM, Bower and browser supported, MIT license.

Before few months I created a repository with implementations of different CS algorithms in JavaScript. There are also few algorithms with graphs. I plan to extend it (spanning trees, heuristic algorithms probably chromatic graphs) but since then I think that there are still few algorithms which could help you.

A currently maintained alternative to the deprecated graphlib that also includes Typescript support would be graphology.
It seems to support all the required features when combined with some extensions such as graphology-shortest-path.

With help of StackOverflow's similar question recommendations I found couple questions with similar topic.
First one, Javascript directed acyclic graph library? (Graph visualization is NOT necessary), is close. There nrabinowitz suggests checking out data.js. I quickly browsed through the source of data.js. It really gives interface for handling graphs but only in very basic manner. No traversal algorithms there. It also seems that the goal of data.js is something other than a comprehensive graph library.
Second one, Javascript library for graph operations, almost same question as this but has no real answers yet (at 2013-01-23 17:32). The author c0dem4gnetic references to NetworkX which is very much what I need but unfortunately implemented only in Python.
I would be somewhat excited to implement such a library by myself. Graphs are so cool.

I have made a graph algorithms library https://github.com/devenbhooshan/graph.js in javascript. Library is clean and very simple. It is very easy to use. Just plug the graph.js file in your project and start using it.

There is also js-graph-algorithms, which seems pretty clean and has several algorithms. Its api is pretty basic though.

We have algos in our Java library, we're just trying to find a free slot to add them to our JavaScript library. That doesn't help you now, but might be some use to later viewers.

How to illustrate multigraphs in Javascript? [closed]

Closed. This question does not meet Stack Overflow guidelines. It is not currently accepting answers.
We don’t allow questions seeking recommendations for books, tools, software libraries, and more. You can edit the question so it can be answered with facts and citations.
Closed 2 years ago.
The community reviewed whether to reopen this question last year and left it closed:
Original close reason(s) were not resolved
Improve this question
This question is looking for a practical and easy way for drawing multigraphs using Javascript.
First of all look at this question. None of those libraries support Multigraphs (or Pseudographs ). I mean I can't generate graphs like this:
Is there any jQuery plugin (or javascript library) out there for this purpose ?
I thought i can use WolframAlpha's API and use its images, something like this:
but it have lots of problem:
I can't move nodes or add remove edges interactively.
Only 2000 API calls per month. Not enough.
I can't produce large or intermediate graphs.
They are really ugly!
Please help me if you know some javascript library in order to draw Multigraphs, or anyway to produce such graphs (something like Dracula Graph Library but with ability to draw Multigraphs).

Cytoscape.JS supports multigraphs, is pure Javascript, and uses the new HTML 5 Canvas for performance. Its design intent is general purpose graph visualization/manipulation.
https://js.cytoscape.org/

If you are allowed to use Google Charts API you may refer to this
http://code.google.com/apis/chart/image/docs/gallery/graphviz.html
Example:
https://chart.googleapis.com/chart?cht=gv&chl=graph{C_0--H_0[type=s];C_0--H_1[type=s];C_0--H_2[type=s];C_0--C_1[type=s];C_1--H_3[type=s];C_1--H_4[type=s];C_1--H_5[type=s]}

I'm affraid you will have to do some development yourself. Raphael.js is pretty capable in creating and manipulating svg - would be good starting point

Some of those graph visualization libraries (mentioned in this question) DO support Multigraphs and allow dragging/placement of nodes
jsplumb: http://jsplumb.org/jquery/stateMachineDemo.html
possibly http://js-graph-it.sourceforge.net/ may support multigraphs.
but as far as your issue
4- Its really ugly!
These may not appeal to your aesthetic.

I think paper.js (http://paperjs.org) will get you also pretty close.

You might want to check this one out: www.d3js.org
You'd have to do a lot yourself (make your own SVG and such), but the library is very powerful.

I recently used Graphviz to draw the connections between some authors pubblications.
Graphviz is open source graph visualization software. The Graphviz layout programs take descriptions of graphs in a simple text language, and make diagrams in useful formats, such as images and SVG for web pages, PDF or Postscript for inclusion in other documents; or display in an interactive graph browser.
For example i used a simple DOT file to write all the connection between the authors and I produced a PNG file.
http://www.graphviz.org/
Here there is all the documentation that you need and in the gallery section you can see a lot of output example.
Hoping it could be helpful.

In a commercial scenario, take a look at yFiles for HTML:
It easily supports multi-graphs and does not look too ugly, I believe:
(These graphs have been laid out automatically, manual placement is also possible.)
Of course this is a matter of taste, so if you don't like the look, you can change any aspect of the visualization, like in the style tutorial.
The API offers full interactive editing capabilities and being a pure client-side solution, of course there is no API call count limit.
Large graphs are still a problem with todays' Javascript engines, but only if "large" means more than thousands of elements. With virtualization (considering only what is currently visible in the viewport during rendering), you can get good performance with thousands of elements.
Disclaimer: I work for the company that creates the library, on SO/SE, however I do not represent my employer. My posts and comments are my own.

You can check jsnetworkx (http://jsnetworkx.org/)
It is a js version of python graph library which supports multi-graph. It has a draw function which visualizes the graph using D3.js. It is available for both browser and node.js.

Best bet would be to render them on the server (or use it as an applet) with JGraphT.

Library for Canvas/SVG web-based tree graphs with layout algorithm? [closed]

Closed. This question does not meet Stack Overflow guidelines. It is not currently accepting answers.
We don’t allow questions seeking recommendations for books, tools, software libraries, and more. You can edit the question so it can be answered with facts and citations.
Closed 3 years ago.
Improve this question
I'm looking for a library that can draw interactive (i.e. clickable nodes) tree graphs.
Something like this but with text in the node boxes (i.e. the nodes would be of variable width and height).
Canviz doesn't have a stable release, and from what I can tell ProtoVis can't do text nodes and can only do single-parent nodes with tree layouts. Anyone aware of any libraries to do this in a browser?

A basic tree digram tutorial (you may expand this to get what you want)
http://www.codeproject.com/KB/scripting/graphic_javascript_tree.aspx
These are additional resources you may want to take a look at =)
http://www.graphviz.org/Theory.php
http://directory.google.com/Top/Science/Math/Combinatorics/Software/Graph_Drawing/
Really hope to see this out in javascript in the future, i too have quite a fair bit of usage for such classes =P

You may be interested in Cytoscape.js, an open-source JS graph visualisation and analysis library. It has built-in gestures, support for touch devices, and a rich API that you can use to integrate it into your webapp.
http://js.cytoscape.org
Cytoscape.js has a built-in breadthfirst layout for trees and DAGs, and this layout is very space efficient.
There is also the cytoscape-dagre extension for Cytoscape.js, which allows for using the excellent Dagre tree/DAG layout algorithm: https://github.com/cytoscape/cytoscape.js-dagre
Dagre produces very aesthetic results.
Disclaimer: I work on Cytoscape.js

Have you looked at JIT yet? I did some work with their radial graph, and it was a cinch.

Since that picture in the original post is actually created by a product of the same product family, I would like to add that "yFiles for HTML" is available commercially, too, since 2012.
The picture above has been generated by the Java variant of that library. The Javascript library variant supports all layout algorithms that the Java variant supports, with the same properties and customization capabilities. They are implemented in Javascript and do not require an active server component.
The library uses SVG as the rendering backend by default, but Canvas based renderings can be included, too.
See this live demo browser for an example that shows a similar graph (HTML5-capable browser required).
Disclaimer: I work for the company that creates that library, but on SO/SE I do not represent my employer.

This question is pretty old and pretty high up in Google results so I thought I'd update it. GraphVis does exactly what you want in a desktop, java swing based app but this is not ideal. Their description is a hierarchical graph. I Googled that and came across dagre which is built upon d3. http://cpettitt.github.io/project/dagre-d3/latest/demo/tcp-state-diagram.html
JIT can be made to do it but it's very cumbersome and fragile.

Gantt Chart online [closed]

Closed. This question does not meet Stack Overflow guidelines. It is not currently accepting answers.
Questions asking us to recommend or find a tool, library or favorite off-site resource are off-topic for Stack Overflow as they tend to attract opinionated answers and spam. Instead, describe the problem and what has been done so far to solve it.
Closed 9 years ago.
Improve this question
I need to insert a horizontal bar chart in a web page. The thing I have to do is very similar to a Gantt Chart.
I'd like to use a javascript library for the purpose. I tried jsgantt, but actually it is not very beautiful.
I could evaluate also a server generation of the graph. In case my server side language is Python.
It will be part of an internal project with no internet access, so Google Charts isn't an option.

Have a look at the flot jQuery plugin:
Flot is a pure Javascript plotting library for jQuery. It produces graphical plots of arbitrary datasets on-the-fly client-side.
The focus is on simple usage (all settings are optional), attractive looks and interactive features like zooming and mouse tracking.
The library can produce bar graphs, and is used by our host site - have a look at Stack Overflow Reputation History page.

This is a complete jQuery based Gantt Editor Mit licensed
http://roberto.open-lab.com/2012/08/24/jquery-gantt-editor/
If you want a "complete" review of available ones see here:
http://roberto.open-lab.com/2012/06/14/the-javascript-gantt-odyssey/
I Have recently added SVG based drawing and collapse/expand tree functionality.
See http://roberto.open-lab.com/2014/05/15/jquery-gantt-editor-collapsible-branches/

For me, the best is http://gantter.com/ you don't need registration process, it exports to msproject or pdf.... perfect!

Try one of this:
http://dhtmlx.com/docs/products/dhtmlxGantt/index.shtml - neat chart, option to edit tasks, one serious drawback: lacks timescale change
http://dojotoolkit.org/reference-guide/dojox/gantt.html - free (!!), quite nice, but very hard to customize (unless you modify the source code)
http://bryntum.com/gantt/ - so far, one of my favourites - very easy to customize, but licensing for commercial projects is unclear, you can download trial for 45 days
http://www.tgantt.com/treegrid/www/Gantt.html - actually, this one looks like a space vessel's dashboard and so it is to configure, still struggling to put this in my application

Have a look at http://www.ext-scheduler.com. 100% JavaScript, based on ExtJS. Disclaimer: I wrote it.

JQuery Gantt Chart - the best I tested

I noticed that RadiantQ's jQuery Gantt Chart Package is missing in this discussion. This is relatively new, but has a lot of features, customizable and can be bound to any kind of data. The online demo is here.

For Gantt chart generation see:
http://www.mechanicalcat.net/tech/pytaskplan/
http://www.strout.net/python/piddle/
http://opensched.sourceforge.net/
or there are general charting libs like
http://matplotlib.sourceforge.net/
http://home.gna.org/pychart/
or may be just use gnuplot.

see also Open Flash Chart
it gives support helpers also for the most popular programming languages.

You could use FusionWidget at http://www.fusioncharts.com/widgets/gallery.asp. It's not free, but its Gantt chart works greatly for me.

Maybe you can get some impressions of how it could be done by these examples:
http://www.yuml.me/
http://creately.com/
http://www.chartle.net/
http://www.lovelycharts.com/
http://www.icharts.net/
https://scrumy.com/
http://chartgizmo.com/
http://www.archimy.com/
http://www.gliffy.com/
I hope these are enough for some inspiration.

I like this one, is still under development, "use it at your own risk" but it's very drag and drop
http://ganttapp.appspot.com