GoJS update of an animation property for a link through an ajax call

GoJS
1 
myDiagram.linkTemplate =
    $(go.Link,
      { routing: go.Link.AvoidsNodes, curve: go.Link.JumpGap, corner: 10, reshapable: true, toShortLength: 7 },
      new go.Binding("points").makeTwoWay(),
     
      // mark each Shape to get the link geometry with isPanelMain: true
      $(go.Shape, { isPanelMain: true, stroke: "black", strokeWidth: 7 }),
      $(go.Shape, { isPanelMain: true, strokeWidth: 5 }, 
        new go.Binding("stroke", "colors")),
     $(go.Shape, { isPanelMain: true, stroke: "white", strokeWidth: 3, name: "PIPE", strokeDashArray: [10, 10] }),
      $(go.Shape, { toArrow: "Triangle", scale: 1.3, fill: "gray", stroke: null })
    );


  load();

}
function load() {
            $.ajax({
                    url : "../php/dw_model.php",
                    type : "GET",
                    success : function(data){
                    console.log(data);
                    $.ajax({
                            url : "../php/dw_model_link.php",
                            type : "GET",
                            success : function(data1){
                                    console.log(data1);
                                    myDiagram.model = new go.GraphLinksModel(data, data1);
                                  // Animate the flow in the pipes
                                  var anim = new go.Animation();
                                  anim.easing = go.Animation.EaseLinear;
                                  myDiagram.links.each(function(link) {
                                    anim.add(link.findObject("PIPE"), "strokeDashOffset", 20, 0)
                                  });
                                  // Run indefinitely
                                  anim.runCount = Infinity;
                                  anim.start();
                            },
                            error : function(data1) {
                            }
                    });


                    },
                    error : function(data) {
                    }
            });

Data: php/dw_model.php [{“key”:“P1”,“category”:“Process”,“pos”:“300 120”,“text”:“VIP”,“color”:“red”},{“key”:“P2”,“category”:“Process”,“pos”:“180 220”,“text”:“Routing-maxscale-RDU1”,“color”:“green”},{“key”:“P3”,“category”:“Process”,“pos”:“420 220”,“text”:“Routing-maxscale-RDU2”,“color”:“blue”},{“key”:“P4”,“category”:“Process”,“pos”:“300 300”,“text”:“Master-DB”,“color”:“yellow”}]

php/dw_model_link.php [{“from”:“P1”,“to”:“P2”,“colors”:“green”,“speed”:“20”},{“from”:“P2”,“to”:“P3”,“colors”:“green”,“speed”:“10”},{“from”:“P3”,“to”:“P2”,“colors”:“blue”,“speed”:“100”},{“from”:“P3”,“to”:“P4”,“colors”:“yellow”,“speed”:“200”}]

I understand that the following routine updates each links with animation property of “strokeDashOffset” to 20. I want to be able to update each links “strokeDashOffset” value with the data from the dw_model_link “speed” key.(ie.“speed”:“20”,“speed”:“10” etc). Any help would be appreciated.

2

And what is your question?

3

Sorry I missed copying the last paragraph.

4

When you create an Animation for a Link, you have access to the link’s Link.data object, so you can look at any or all of its properties to decide what to do.

So I do not understand what the question really is.

5

The question is what is the correct command/syntax to set the “strokeDashOffset” property to the Link.data values. So that I can have different speed values for each link. Currently they are all set to 20. I want to be able to set it based on the data I get from the speed value in ajax call php/dw_model_link.php

6

You’ll need to create different Animation instances, ideally one for each speed, but at most one for each link.

7

Can you give me an example of how to create one? And how to use it to set the value?

8

Each Animation gives the appears of motion at a particular speed. So if you want two animations showing different speeds, you have to use two different Animation instances with their own Animation.durations.

Your code just creates a single Animation instance, shared by all Links.

9

Thanks for that Walter. How do I go about writing that code. Sorry I am very new to all this. If you can build me one example code, I can replicate it to my needs. Thanks

10

You started from the Process Flow sample, didn’t you?

I modified it as follows:

      // Animate the flow in the pipes
      myDiagram.links.each(function(link) {
        var animation = new go.Animation();
        animation.easing = go.Animation.EaseLinear;
        animation.duration = Math.max(1, 4 - (link.data.speed || 2)) * 500;
        animation.add(link.findObject("PIPE"), "strokeDashOffset", 20, 0)
        // Run indefinitely
        animation.runCount = Infinity;
        animation.start();
      });

and the model data:

  "linkDataArray": [
{"from":"P1", "to":"V1", "speed": 4},
{"from":"P3", "to":"V2", "speed": 4},
{"from":"V2", "to":"P1", "speed": 4},
{"from":"P2", "to":"V3", "speed": 4},
{"from":"V3", "to":"P3", "speed": 4},
{"from":"V1", "to":"V4", "speed": 2},
{"from":"V4", "to":"P4"},
{"from":"V1", "to":"P2", "speed": 2},
{"from":"P4", "to":"V5"},
{"from":"V5", "to":"P2"}

Basically you need to convert the data in the link data object to some number of milliseconds as the Animation.duration. Longer times means slower motion.