Skip to content

a simple JQuery library to create or edit directed graphs.

License

Notifications You must be signed in to change notification settings

n-yousefi/Arg-Graph

Folders and files

NameName
Last commit message
Last commit date

Latest commit

 

History

39 Commits
 
 
 
 
 
 
 
 
 
 
 
 

Repository files navigation

Note: This repository is no longer in active development or maintenance.

We highly encourage you to consider connect-it instead.

Arg-Graph

Arg-Graph is a simple free library for creating dynamic Directed Graph using JQuery which enables you to draw SVG based connectors (lines, arrows) between DOM nodes via drag and drop.

Directed Javascript graph

Examples/Demos

The best way to become acquainted with the library is to see Demos

How it works

Creating digraph:

You can create a digraph (directed graph) easily by calling the "ArgGraph" function.

<div class="arg-Graph">
</div>
var argGraph=$('.arg-Graph').ArgGraph();

Adding new nodes:

Append html code

You can append new items to the container div, as html code. like this:

<div class="arg-Graph">
     <div id="item1" class="arg-Graph_item" data-neighbors="item2,item3" style="left: 259px; top: 22px;">
        Title
        <span class="arg-Graph_connector-handler"></span>
        <span class="arg-Graph_delete-item"></span>
    </div>
    <div id="item2" class="arg-Graph_item" style="left: 159px; top: 212px;">
        Title
        <span class="arg-Graph_connector-handler"></span>
        <span class="arg-Graph_delete-item"></span>
    </div>
</div>

Now you must refresh the graph by calling 'refresh' function.

argGraph.refresh()

import new item/s

Creating a JavaScript object and import that to the graph:

newItem = {
        "id": "item1",
        "text": "Start",
        "position": {
            "left": "259px",
            "top": "22px"
        },
        "neighbors": [
            "item2",
            "item3"
        ]
    }
argGraph.import(newItem)

Note: You can append multiple items as array object using "import" function.

import JSON object

You can import this object as JSON format by calling "importJson" function.

var json=JSON.stringify(newItem,null,4);
argGraph.importJson(json);

Output

By calling "export"/"exportJson" function you can get a JavaScript/JSON object similar to the import object format:

var json = argGraph.exportJson();

result:
[
    {
        "id": "item7",
        "text": "Test",
        "position": {
            "left": "531.328px",
            "top": "406px"
        },
        "neighbors": [
            "item8"
        ]
    },
    {
        "id": "item8",
        "text": "Deployment",
        "position": {
            "left": "373.328px",
            "top": "463px"
        },
        "neighbors": [
            "item9"
        ]
    },
    {
        "id": "item9",
        "text": "Test",
        "position": {
            "left": "239.328px",
            "top": "515px"
        },
        "neighbors": ""
    }
]

Author

Naser Yousefi