6

we are working at a small startup and would like to use framework GoJS for showing our clients(since they don't understand what a usergroup is) how users join usergroup with which he can administrate other usergroups and draw which permissions to which usergroups they have.

But since we are startup we don't have 3000USD to spend on GoJS library, although I love the framework, its simple and fast to understand. Also, the model of input data is awesome. But probably too much complex for what we need.

To the question... Does anyone knows any good alternative which meets requirements:

  • Route from one element to other and have arrow how relationship is
  • I can set color of single routes (I want administrating route to be red, others will be blue etc)
  • Auto positioning and route draw
  • have linking feature(eats input data) where I just add array of keys {from:x,to:y,"green"} and it links element with #X to element with #Y with arrow from X to Y with color green

What GoJS dont have but would be cool: It will be great achieve this via HTML5+CSS3+JS, still it's hard to make custom layout on GoJS which uses openGL

My achievement before I saw it is trial was this: enter image description here

Input Data

nodeDataArray = [
  { key:1,name: "Group 1", category:"decision", a:"1",  aText:"Add UserGroup", aToolTip:"Test",b:"a",bText:"Delete",bToolTip:"sdas"},  // the root node
  { key:2,name: "Group 2", category:"decision", a:"2",  aText:"Add UserGroup", aToolTip:"Test",b:"b",bText:"Delete",bToolTip:"sdas"},
  { key:3,name: "Group 3", category:"decision", a:"3",  aText:"Add UserGroup", aToolTip:"Test",b:"c",bText:"Delete",bToolTip:"sdas"},
  { key:4,name: "Group 4", category:"decision", a:"4", aText:"Add UserGroup", aToolTip:"Test",b:"d",bText:"Delete",bToolTip:"sdas"},
  { key:5,name: "Group 5", category:"decision", a:"5", aText:"Add UserGroup", aToolTip:"Test",b:"e",bText:"Delete",bToolTip:"sdas"},
  { key:6,name: "Group 6", category:"decision", a:"6",  aText:"Add UserGroup", aToolTip:"Test",b:"f",bText:"Delete",bToolTip:"sdas" }
];

linkDataArray = [
{from:"0", to:"1"},
{from:"1", to:"2"},
{from:"1", to:"3"},

{from:"3", to:"1"},
{from:"1", to:"4"},
{from:"4", to:"5"},
{from:"4", to:"6"}


];
4
  • 1
    I suggest you talk with [email protected], because there might be some discount category that would apply to your situation. Jan 15, 2016 at 20:40
  • Did you make a choice? can you please share? What, and why? Jul 7, 2016 at 15:13
  • 3
    @Mawg Hi, sorry for late response, no I diddnt, becose our company didnt wanted to pay for the service, since we havent seen it as such a killing feature, and decided to go without it for now, but we are planning to make approach with building from ground up, since we dont need all the features big companies use.
    – Wenza
    Jul 22, 2016 at 5:08
  • @Wenza re: "We don't need all the features big companies use". Too bad GoJS does not offer a more limited product version, so you don't have to pay for all the bells and whistles you don't need to use.
    – mg1075
    Apr 10, 2017 at 12:22

2 Answers 2

3

You can almost certainly get what you need by using the dot language with the GraphViz toolkit, (source code here), possibly with the Viz.js javascript client or one of the other implementations such as Canviz

The dot language allows you to specify a set of nodes, with text, colours & styles and connectors also with text, colours & styles and the tools will auto layout the diagram for you and output it in a number of formats including for the Web with Viz.js.

  • Free
  • Widely used
  • Directed graphs with auto layout
2
  • Hello, thank you, this is the closest I have seen... Only one thing which I Viz.js(visjs.org) seems not good for my model becose it is probably linking only straight, they are not able to make those in my preview... For me those straight links does not save enough space and in case of 30elements makes it confusing... Do you know if there is any option to change type of links(routes)?
    – Wenza
    Jan 9, 2016 at 11:18
  • Sorry I do not know Viz.js that well. Jan 9, 2016 at 12:17
3

Essential Diagram for JavaScript supports creating any kind of diagram.

Example Angular example

Diagram JS with user groups

The whole product is available for free through the community license if you qualify (less than 1 million USD in revenue).

I work for Syncfusion.

2

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge that you have read and understand our privacy policy and code of conduct.

Not the answer you're looking for? Browse other questions tagged or ask your own question.