How to make a graph in GUI?

Questions & Answers
1

Do anybody here know how to make a graph that can be easily positioned with GUI especially with C#?

2

You’ll have to code your own. I suggest you create your own class Graph with an unknown number of columns and styles. in a Draw function, you can use DrawTexture for the background and each columns according to an array of float.

3

Saturday, August 1, 2015

51370-screen-shot-2015-08-01-at-114625-am.png
51370-screen-shot-2015-08-01-at-114625-am.png1825×1107 73 KB

Extend GraphGUI found in UnityEditor.Graphs. This class is responsible for drawing graph.

public class GraphEditorWindow : EditorWindow
 {
 static GraphEditorWindow graphEditorWindow;
 Graph stateMachineGraph;

 GraphGUIEx stateMachineGraphGUI;
 [MenuItem("Window/Example")]
 static void Do ()
 {
 graphEditorWindow = GetWindow<Grapheditorwindow> ();
 }

....

Create Graph structure. It will contains nodes and edges between nodes.

stateMachineGraph = ScriptableObject.CreateInstance<Graph> ();
 stateMachineGraph.hideFlags = HideFlags.HideAndDontSave;

 //create new node
 Node node=ScriptableObject.CreateInstance<Node>();
 node.title="mile2";
 node.position=new Rect(400,34,300,200);

 node.AddInputSlot("input");
 start=node.AddOutputSlot("output");
 node.AddProperty(new Property(typeof(System.Int32),"integer"));
 stateMachineGraph.AddNode(node);
//create new node
 Node node=ScriptableObject.CreateInstance<Node>();
 node.title="mile";
 node.position=new Rect(0,0,300,200);
 Slot end=node.AddInputSlot("input");
 node.AddOutputSlot("output");
 node.AddProperty(new Property(typeof(System.Int32),"integer"));
 stateMachineGraph.AddNode(node);

//create edge
 stateMachineGraph.Connect(start,end);

GraphGUIEx graphGUI = ScriptableObject.CreateInstance<GraphGUIEx>();
graphGUI.graph = graph;

Draw Graph.

void OnGUI ()
 {
 if (graphEditorWindow && stateMachineGraphGUI != null) {
 stateMachineGraphGUI.BeginGraphGUI (graphEditorWindow, new Rect (0, 0, graphEditorWindow.position.width, graphEditorWindow.position.height));
 stateMachineGraphGUI.OnGraphGUI ();

 stateMachineGraphGUI.EndGraphGUI ();
 }
 }

Override NodeGUI or EdgeGUI for more styling and drawing control.