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:
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"}
];
