Create progress bar

GoJS
1

I creating a progress bar to each node.

image
image.png868×331 8.05 KB

And i have created shape Rectangle for pregress bar.
// add Rectangle progess
(go.Shape, "Rectangle", { width: 180, height: 3, fill: "#f22d4e", strokeWidth: 0, margin: new go.Margin(10, 0, 8, 15), alignment: go.Spot.BottomLeft }), (go.TextBlock, textBlack(), {
width: 230,
height: 15,
font: “bold 9pt ‘Comfortaa’, cursive”,
margin: new go.Margin(0, 0, 5, 0),
textAlign: “right”,
verticalAlignment: go.Spot.Right,
alignment: go.Spot.Bottom
},
// show completion in group node on tree
new go.Binding(“text”, “completion”, function (completion) { return completion + ‘%’; })),
Now, i create for reactange fixed width is 180. I want pass data from data from response api. How i can do it?

2

You want to add a Binding to the Shape that is the red rectangle. Something like:

new go.Binding("width", "completion", function(c) {
    if (!c) c = 0;
    if (c < 0) c = 0;
    else if (c > 100) c = 100;
    return c * 180 / 100;
})

where 180 is the maximum width that it can be, and that data.completion is a percentage value between 0 and 100.

Then whenever you get data you can set the progress bar by executing:

myDiagram.model.commit(function(m) {
    var ndata = m.findNodeDataForKey(...somekey...);
    m.set(ndata, "completion", newpercent);
});

This should update the node’s red progress bar and its textual percentage.

Note that if you have a bunch of things to update, you should do them all in a single transaction, not with a bunch transactions by making multiple calls to commit.

3

thanks for response.
i tried it and display:

image
image.png1393×258 3.87 KB

But I don’t set the position for the red bar to the left. How i can do it?

$(go.Panel, "Auto",
    $(go.Shape, "Rectangle", {
        height: 3,
        fill: "#f22d4e",
        strokeWidth: 0,
        margin: new go.Margin(50, 0, 0, 0),
        alignment: go.Spot.Left,
    }),
new go.Binding("width", "progress", function (completion) { return  completion; }),
4

I said that you should add the Binding to the Shape.

You should not use an “Auto” Panel, which is used for adding a border or background around an element, and thus should always have at least two elements in it.