CODEWITHSUNDEEP
gojs
user4460837
user4460837

Reputation:

How to query from the database using gojs

I want to get the name the position and the picture of the specific employee from the database and display it in the chart using Gojs. I'm new in Gojs and all I know is the static side. I don't know where to put the query.

<script>
var $ = go.GraphObject.make;

var myDiagram =
$(go.Diagram, "myDiagramDiv",
{
  initialContentAlignment: go.Spot.Center, // center Diagram contents
  "undoManager.isEnabled": true, // enable Ctrl-Z to undo and Ctrl-Y to redo
  layout: $(go.TreeLayout, // specify a Diagram.layout that arranges trees
            { angle: 90, layerSpacing: 40 })
});

// the template we defined earlier
myDiagram.nodeTemplate =
$(go.Node, "Vertical",
{ background: "#44CCFF" },
$(go.Picture,
  { margin: 10, width: 100, height: 100, background: "red" },
  new go.Binding("source")),
$(go.TextBlock, "Default Text",
  { margin: 12, stroke: "white", font: "bold 13px sans-serif" },
  new go.Binding("text", "name")),
$(go.TextBlock, "Default Text",
  { margin: 12, stroke: "white", font: "bold 13px sans-serif" },
  new go.Binding("text", "position"))
);

// define a Link template that routes orthogonally, with no arrowhead
myDiagram.linkTemplate =
$(go.Link,
{ routing: go.Link.Orthogonal, corner: 5 },
$(go.Shape, { strokeWidth: 3, stroke: "#555" })); // the link shape

var model = $(go.TreeModel);
model.nodeDataArray =
[
 { key: "1",              name: "JAMES BRYAN B. JUVENTUD", position: " (Regional Director)",  source: "james.jpg" },
{ key: "2", parent: "1", name: "VERGIL H. MEDIDAS", position: "OIC",   source:   "vergil.jpg" }

];
myDiagram.model = model;
</script>

Upvotes: 0

Views: 1140

Answers (1)

cheky
cheky

Reputation: 46

In java web applications you can use Session Beans for extracting all of your nodes from database and converting them to JSON format and putting the result (by javascript and CDI Beans) in your .xhtml page, i mean the page that finally shows your graph. Also It is better to put all of your GOJS related codes (gojs commands that draw your graph) in a separate .js file and add it to your .xhtml file as mentioned in below example.

for example in head part of your .xhtml page put something like :

<script type="text/javascript" > 
   ....
   var yournodeDataArray = JSON.parse('#{yourCDIBean.extractNodeArray()}');
   ....
</script>
 ..........
<script src="yourGojsDiagram.js"></script>
 ...........

and in yourCDIBean you must have something like following code:

@Named ("yourCDIBean")
@SessionScoped
public class YourCDIBean implements Serializable {
    ......
    //inject your SessionBeans 
    @EJB
    private yoursessionBeanPackage.yourSessionBean  abean ;
    ..............

    public String extractNodeArray() {

       //accessing database by abean that is a SessionBean
       //converting result to jsonArray and then converting it to a string 
       //returning result
    }

For diagrams that have linkDataArray, you can use this way too and then you define your model with simple following command in yourGojsDiagram.js file:

yourDiagram.model = new go.GraphLinksModel(yourNodedataarray, yourLinkdataarray);

I hope it help someone.

Upvotes: 2

Related Questions