Drawing TextBlock's background according to data

GoJS
1

Hi,

I want to draw TextBlock’s background manually (functionally).

(1) draw Bar according to value and color of data.

I attach example image of what I want to do.

scr

Each bar’s width is related to the value (0.5, 0.6, respectively)
and each bar’s color also changes according to value.

I’m really grateful of advice or related example, if any.

Thanks,
Takuya.

2

After some experiment I found the solution.
The way I took is, make go.Panel that has 2 children, go.Shape and go.TextBlock.
and binding Shape’s width, fill property with manual functions.
(I attach core part of the code)

      $(
        go.Panel,
        "TableRow",
        $(go.TextBlock, new go.Binding("text", "name"), {
          column: 0,
          margin: 2,
          font: "bold 10pt sans-serif",
        }),
        $(go.Panel,
          $(go.Shape, "Rectangle",
            new go.Binding("width", "prior", (x) => x * 50 ),
            new go.Binding("fill", "prior", (x) => { return (x < 0.5) ? "yellow" : "lightgreen" }),
            { height: 15 }),
          $(go.TextBlock, new go.Binding("text", "prior")),
          {
            width: 50,
            column: 1,
            margin: 2,
          }
        ),
        $(go.Panel,
          $(go.Shape, "Rectangle",
            new go.Binding("width", "posterior", (x) => x * 50 ),
            new go.Binding("fill", "posterior", (x) => { return (x < 0.5) ? "yellow" : "lightgreen" }),
            { height: 15 }),
          $(go.TextBlock, new go.Binding("text", "posterior")),
          {
            width: 50,
            column: 2,
            margin: 2,
          }
        )
      )

The result is following.
scr2

Thanks,
Takuya.

3

You might want to set Shape.strokeWidth to zero, and set TextBlock.margin to new go.Margin(2, 2, 0, 2).

4

Thanks for advice. it looks much better now. :)

Takuya.