First TextBlock Disappears in Graduated Panel

#1

I have a graduated node with two stacked textblocks. The problem is that if I just have the day textblock then Sunday shows up, but when I have both textblocks Sunday disappears. How do I get Sunday to appear? See the following screenshot and code below:

image
image.png1319×240 29.5 KB 

    var dateScale =
    $(go.Node,  "Graduated",
        {
            background: "#ccc", //"#fff",
            height: 50,
            graduatedTickUnit: 25,
            layerName: "Foreground",
            isInDocumentBounds: false,
            pickable: false
        },
        $(go.Shape,
            {
                stroke: "#777",
                geometryString: "M0 0 H" + scaleWidth(canvasWidth)
            }
        ),
        $(go.Shape,
            {
                stroke: "#777",
                geometryString: "M 0 0 V25", interval: 7
            }
        ),
        $(go.Shape,
            {
                stroke: "#777",
                geometryString: "M 0 12 V25", interval: 1
            }
        ),
        $(go.TextBlock,
            {
                interval: 7,
                name: "labels",
                font: "10pt sans-serif",
                height: 25,
                width: 175,
                verticalAlignment: go.Spot.Center,
                alignmentFocus: new go.Spot(0, 0, 0, 25),
                graduatedFunction: function(v) {
                    var d = new Date(2020, 1, 9);
                    d.setDate(d.getDate() + v / 25);
                    return d.toLocaleDateString("en-US", { month: "short", day: "2-digit", year: "numeric" });
                }
            }
        ),
        $(go.TextBlock,
            {
                name: "labels",
                font: "10pt sans-serif",
                height: 25,
                width: 25,
                verticalAlignment: go.Spot.Center,
                textAlign: "center",
                alignmentFocus: new go.Spot(0, 0, 0, 0),
                graduatedFunction: function(v) {
                    var d = new Date(2020, 1, 9);
                    d.setDate(d.getDate() + v / 25);
                    var day = d.toLocaleDateString("en-US", { weekday: "short" });
                    day = day == "Sun" ? "Su" : (day == "Thu" ? "Th" : d.toLocaleDateString("en-US", { weekday: "narrow" }));
                    return day;
                }
            }
        )
    )
#2

You may have noticed that shorter-interval tick marks are not drawn at the same place that longer-interval tick marks are drawn. This is to prevent obvious cases of double-marking any particular point.

The same is true for text labels. It thinks that the weekly text has been drawn, so it doesn’t need to draw the daily one.

You could split it up into two separate Graduated Panels.

#3

Great! I have created two graduated panels now. However, they now lie on top of each other. How would I offset the second one below the other? I tried vertical panels but that removes the ability to scroll the graduated panels indefinitely.

#4

Oh, I should have thought of this earlier. You don’t need a second “Graduated” Panel. Just make a duplicate of the frequent TextBlock, but set its TextBlock.interval to 7.

#5

Awesome! That worked.