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

myDiagram.linkTemplate =
      { 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 })


function load() {
                    url : "../php/dw_model.php",
                    type : "GET",
                    success : function(data){
                            url : "../php/dw_model_link.php",
                            type : "GET",
                            success : function(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;
                            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.

And what is your question?

Sorry I missed copying the last paragraph.

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.

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

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

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

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.

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

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;

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.