How to set GradientLink.startColor and GradientLink.endColor

Kindly let me know on how to set or bind GradientLink.startColor and GradientLink.endColor?

Ah, so I assume you find GradientLink suitable?

What code are you using? How does it not behave as you would like?

Hello Walter,
Kindly find below the code.

myDiagram.model = new go.GraphLinksModel(
 [ // a JavaScript Array of JavaScript objects, one per node;
 // the "color" property is added specifically for this app
  { key: "Alpha", color: "lightblue" },
  { key: "Beta", color: "orange" },
  { key: "Gamma", color: "lightgreen" },
  { key: "Delta", color: "pink" }
 ],
 [ // a JavaScript Array of JavaScript objects, one per link
  { from: "Alpha", to: "Beta" ,linecolor: connectorbrush ,thick :"3",text:"P",tocolor:"lightblue", fromcolor :"orange"},
  { from: "Alpha", to: "Gamma",thick :"3",fromcolor :"yellow" },
  { from: "Gamma", to: "Delta" },
  { from: "Delta", to: "Alpha",scolor : "yellow",ecolor : "blue" }
 ]);
myDiagram.linkTemplate =
 $(go.Link,
   $(go.Shape,new go.Binding("stroke", "linecolor"),new go.Binding("strokeWidth", "thick")), 
   $(   go.Shape,new go.Binding("stroke", "fromcolor"), 
        new go.Binding("fill", "fromcolor"),
      { fromArrow: "Circle" , strokeWidth: 2 },
      { segmentIndex: 0, segmentFraction: 0.5 }
	),
$(   go.Shape, 
     new go.Binding("stroke", "tocolor"), 
     new go.Binding("fill", "tocolor"),
   { toArrow: "BackwardSemiCircle" ,strokeWidth: 2},
   { segmentIndex: 0, segmentFraction: 0.5 }
 ),
$(   go.TextBlock, new go.Binding("text", "text"), 
   { segmentOffset: new go.Point(0, 13) }
  )
``` );



This is for a report that shows all the interfaces of an application. The gradient works fine but as another user specified earlier, the color switches when we replace a node.

I’m finding your code hard to read. Please format and indent it properly.

What do you mean by “the color switches when we replace a node”?

Hello Walter,
I am sorry. I think I lost the formatting while copying.

``` myDiagram.model = new go.GraphLinksModel(
```   [ // a JavaScript Array of JavaScript objects, one per node;
```  // the "color" property is added specifically for this app
```     { key: "Alpha", color: "lightblue" },
```     { key: "Beta", color: "orange" },
```  { key: "Gamma", color: "lightgreen" },
```  { key: "Delta", color: "pink" }
``` ],
``` [ // a JavaScript Array of JavaScript objects, one per link
```  { from: "Alpha", to: "Beta" ,linecolor: connectorbrush ,thick :"3",text:"P",tocolor:"lightblue", fromcolor :"orange"},
```  { from: "Alpha", to: "Gamma",thick :"3",fromcolor :"yellow" },
```  { from: "Gamma", to: "Delta" },
```  { from: "Delta", to: "Alpha",scolor : "yellow",ecolor : "blue" }
``` ]);
```myDiagram.linkTemplate =
``` $(go.Link,
```   $(go.Shape,new go.Binding("stroke", "linecolor"),new go.Binding("strokeWidth", "thick")), 
```   $(   go.Shape,new go.Binding("stroke", "fromcolor"), 
```        new go.Binding("fill", "fromcolor"),
```      { fromArrow: "Circle" , strokeWidth: 2 },
```      { segmentIndex: 0, segmentFraction: 0.5 }
```	),
```$(   go.Shape, 
```     new go.Binding("stroke", "tocolor"), 
```     new go.Binding("fill", "tocolor"),
```   { toArrow: "BackwardSemiCircle" ,strokeWidth: 2},
```   { segmentIndex: 0, segmentFraction: 0.5 }
``` ),
```$(   go.TextBlock, new go.Binding("text", "text"), 
```   { segmentOffset: new go.Point(0, 13) }
```  )
``` );
Assume gradient between green and blue. Node A has green link which gradually changes to blue when reaching node B. If I move node B above node A, link color of node B becomes green and node A becomes blue.
The link color of node A and B are reversed if I move node B above node A . If I move again to its original place i.e) beneath the node A it's normal then.

To be brief, I am using
var connectorbrush = $(go.Brush, “Linear”, { 0.28: “lightblue”, 1.0: “orange” });
.
.
.

{ from: “Alpha”,
to: “Beta” ,
stroke: connectorbrush ,
thick :“3”,
text:“P”,
tocolor:“lightblue”,
fromcolor :“orange”
}

Use triple backquotes on separate lines to surround all of your formatted and indented code. You can edit your previous posts, if you like. For more information:

I have added a screenshot for better understanding. Please have a look.

Scenario 1 :

Scenario 2:

Wait – you asked about the GradientLink class, and yet you are not using it?

http://gojs.net/extras/GradientLink.html

If you modify GradientLink.updateBrush by replacing two lines with these two:

        br.addColorStop(0.4999, this.startColor);  // had been 0.0
        br.addColorStop(0.5000, this.endColor);   // had been 1.0

and if you use a Link template like this:

    myDiagram.linkTemplate =
      $(GradientLink,
        { toShortLength: 1 },
        new go.Binding("startColor"),
        new go.Binding("endColor"),
        $(go.Shape, { strokeWidth: 2 }),
        $(go.Shape, { toArrow: "OpenTriangle" },
          new go.Binding("stroke", "endColor"))
      );

and use this model data:

    myDiagram.model = new go.GraphLinksModel(
      [
        { key: 1, text: "Alpha", color: "lightblue" },
        { key: 2, text: "Beta", color: "orange" },
        { key: 3, text: "Gamma", color: "lightgreen" },
        { key: 4, text: "Delta", color: "pink" }
      ],
      [
        { from: 1, to: 2 },
        { from: 1, to: 3, startColor: "red", endColor: "blue" },
        { from: 3, to: 4, startColor: "orange", endColor: "red" },
        { from: 4, to: 1, startColor: "green", endColor: "purple" }
      ]);

You get these results:

For completeness, here’s the GradientLink sample class, modified to render as a simpler two color link:

  function GradientLink() {
    go.Link.call(this);
    this._startColor = "black";
    this._endColor = "black";
  }
  go.Diagram.inherit(GradientLink, go.Link);

  Object.defineProperty(GradientLink.prototype, "startColor", {
    get: function() { return this._startColor; },
    set: function(value) {
      if (this._startColor !== value) {
        this._startColor = value;
        this.updateBrush();
      }
    }
  });

  Object.defineProperty(GradientLink.prototype, "endColor", {
    get: function() { return this._endColor; },
    set: function(value) {
      if (this._endColor !== value) {
        this._endColor = value;
        this.updateBrush();
      }
    }
  });

  GradientLink.prototype.updateBrush = function() {
    var path = this.path;
    if (path !== null) {
      if (this.startColor === this.endColor) {
        path.stroke = this.startColor;
      } else if (this.pointsCount >= 2) {
        var br = new go.Brush(go.Brush.Linear);
        var p0 = this.getPoint(0);
        var pn = this.getPoint(this.pointsCount - 1);
        var dx = pn.x - p0.x;
        var dy = pn.y - p0.y;
        var ex = (dx > 0) ? 1.0 : 0.0;
        var ey = (dy > 0) ? 1.0 : 0.0;
        br.end = new go.Spot(ex, ey);
        br.start = br.end.opposite();
        br.addColorStop(0.4999, this.startColor);  // 0.0 for a normal gradient
        br.addColorStop(0.5000, this.endColor);  // 1.0 for a normal gradient
        path.stroke = br;
      }
    }
  };

  GradientLink.prototype.computePoints = function() {
    var result = go.Link.prototype.computePoints.call(this);
    if (result) this.updateBrush();
    return result;
  };
  // end GradientLink

Thanks a lot for your detailed description Walter. It’s really helpful.

The solution works fine but I have lost circle from the link. The arrowhead I used is like ForwardSemiCircle+Circle for from and to arrow. Can we specify our own arrow heads like I have shared in my screenshot or do we have to use the predefined ones?

You already did in your link template, didn’t you?

Yes, but basically what ever I have given in fromArrow is not taking effect… It’s just ignoring fromArrow part.

Did you have a question? If so, please explain thoroughly.

Yes Walter. Let me explain it. I have added from arrow head in my link template.

But after adding your code, fromArrow section of code has no effect.

I could not see the fromArrow circle in the graph.

    myDiagram.linkTemplate =
      $(GradientLink,
        new go.Binding("startColor"),
        new go.Binding("endColor"),
        $(go.Shape, { strokeWidth: 2 }),
        $(go.Shape, "Circle",
          { width: 6, height: 6, strokeWidth: 0 },
          new go.Binding("fill", "arrowColor")),
        $(go.Shape,
          {
            geometryString: "m 4,0 b 270 180 0 4 4", strokeWidth: 2,
            segmentOrientation: go.Link.OrientAlong, segmentOffset: new go.Point(4, 0)
          },
          new go.Binding("stroke", "arrowColor")),
        $(go.TextBlock,
          { segmentOffset: new go.Point(0, 11), segmentOrientation: go.Link.OrientUpright },
          new go.Binding("text"))
      );

and this model data:

    myDiagram.model = new go.GraphLinksModel(
      [
        { key: 1, text: "Alpha", color: "lightblue" },
        { key: 2, text: "Beta", color: "orange" },
        { key: 3, text: "Gamma", color: "lightgreen" },
        { key: 4, text: "Delta", color: "pink" }
      ],
      [
        { from: 1, to: 2, arrowColor: "orange" },
        { from: 1, to: 3, startColor: "red", endColor: "blue", text: "A-G" },
        { from: 2, to: 2 },
        { from: 3, to: 4 },
        { from: 4, to: 1, startColor: "green", endColor: "blue", text: "D-A" }
      ]);

produce this:

You may want to fiddle with the semi-circular shape, since I don’t know what you really want to show.

That will do Walter. Thanks a lot for your time and support.