How to pass a php result into nodeDataArray and linkDataArray?

GoJS
1

Hello,
I’m trying to make a diagram using GraphLinksModel Class. I used the Minimal GoJS Sample as base and i want to fill var with data coming from a php code.

<?php

$nodeList = array ("K", "I", "J", "L", "M", "X", "Z");
$linesList = array();

foreach($nodeList as $key){
    $linesList[] = "{key: \"{$key}\"&nbsp;}";
}

$nodeListTwo = implode(',<br>', $linesList);
echo $nodeListTwo;

?>

here ist the Output :

{key: "K" },
{key: "I" },
{key: "J" },
{key: "L" },
{key: "M" },
{key: "X" },
{key: "Z" }

I have used this line var nodeDataArray = JSON.parse( ‘<?php echo json_encode($nodeListTwo) ?>’ ); to make sure

var nodeDataArray =
[
{key: "K" },
{key: "I" },
{key: "J" },
{key: "L" },
{key: "M" },
{key: "X" },
{key: "Z" }
]

but it doesn’t work.

Or is there a way to fill var nodeDataArray and var linkDataArray dynamically ? because each letter comes from an (php) Array.

Thank

2

If you have:

var nodeDataArray =
[
{key: "K" },
{key: "I" },
{key: "J" },
{key: "L" },
{key: "M" },
{key: "X" },
{key: "Z" }
]

You can set it on the model,

myDiagram.model.nodeDataArray = nodeDataArray;

And it should work.

3

Thank for your Response

I have it but it has been set manually. As I said I would like to get that content of var nodeDataArray in a “programmatically way”. I want to fill it via my php code because the content of var nodeDataArray will change at times.

I hope you understand my preoccupation … if not clear i could past the code. Thank for your time

4

I’m not sure what you mean by “fill dynamically”, or by "I would like to get that content of var nodeDataArray in a “programmatically way”, but instead of setting the whole node data array at once you can also add or remove from the node data:

myDiagram.model.addNodeData( {key: "L" } );

Similarly you can add or remove link data, etc.

6

You are just trying to generate correct JavaScript to initialize the Diagram in your generated HTML page, yes?

If you could be more specific about what you have generated and what you do not understand, we might be able to help you.

7

exactly

PS: why my entire code which i pasted doesn’t appear? it would be i think easier to understand with the code i shared above

8

I suggest that you edit that post and use triple backquotes surrounding all of your code.

But really, it is your responsibility to generate the JavaScript code that you want. We cannot do your programming for you.

9

no Change

anayway … i have already wrote the code in php and to pass it in var nodeDataArray is the issue. My Intention was not to have a written code but some indications ans why not explanations. Thanks anyway

10

Well, could you at least post the resulting JavaScript? Everything within the script tag.

11

script tag and others tags doesnt work
i write the code but there is nothing inside the tag when i post

12

Were you trying to include the tag when you inserted the generated code? I asked you to insert the code inside your script tag. Use triple backquotes before and after the JavaScript code. Please read: Code Formatting

13 
<script> 
function init() { 
if (window.goSamples) goSamples();  // init for these samples -- you don't need to call this 

	var $ = go.GraphObject.make;  // for conciseness in defining templates 

    myDiagram = $(go.Diagram, "myDiagramDiv",  // create a Diagram for the DIV HTML element 
            { 
				initialContentAlignment: go.Spot.Center,  // center the content 
				"undoManager.isEnabled": true  // enable undo & redo 
            }); 
 
   // define a simple Node template 
    myDiagram.nodeTemplate = 
      $(go.Node, "Auto",  // the Shape will go around the TextBlock 
	   $(go.Shape, "RoundedRectangle", { strokeWidth: 1}, { fill: "white"}),// new go.Binding("fill", "color")
       $(go.TextBlock, 
         { margin: 20 },  // some room around the text 
          // TextBlock.text is bound to Node.data.key 
          new go.Binding("text", "key")) 
      ); 

	var nodeDataArray = <?php echo '[' . implode(', ', $nodeListTwo) . ']' ?>	
						
	var linkDataArray = <?php echo '[' . implode(', ', $linesFamily) . ']' ?>
	  
	myDiagram.model = new go.GraphLinksModel(nodeDataArray, linkDataArray);
} 
</script>

OK. it works now with the tags. thks.

By the way … I have already solved the Problem (as you can see the content of nodeDataArray and linkDataArray) BUT now I was wondering how i can display the result so that the arrows couldn’t cross others Node? (see picture)

thank in advance

14

You need to assign a Layout to your Diagram.layout. Read Get Started with GoJS for an example, and read GoJS Layouts -- Northwoods Software for an overview.

15

Thanks for replying. Well, That picture attests that I have arleady read (may be not well!? that is why I’m asking Help?) those links you sent and displayed using GraphObject.make . My question is about arrows not the diagram (Diagram.layout)itself. Thanks for your time

16

Normally the first priority is to arrange the nodes so that they make sense to the user. That usually results in limited cross-overs of links over nodes and links across links. That’s why I first emphasized using the right Layout.

If you don’t mind using orthogonally routed links, you could try setting Link.routing to be go.Link.AvoidsNodes. It would also help if you set the fromSpot and toSpot to be go.Spot.AllSides. Read more at GoJS Links -- Northwoods Software and GoJS Link Connection Points on Nodes -- Northwoods Software.