Graduated Panel with Varying Intervals

GoJS
1

Is it possible to have a graduating panel with varying intervals? What I want to do is have the interval based on the month. For example, if the month is January then the interval would be 31, February would be 28 or 29, and so on. Currently, I have the interval set to 28 (i.e. 4 weeks). As you can see in the image below, the months don’t line up with the first day of each month rather they line up with every four weeks due to my 28 interval:

image
image1317×98 7.13 KB

Here is my code for the month textblock:

// creates the dates textblock
$(go.TextBlock,
    {
        interval: 28,
        name: "months",
        font: "10pt sans-serif",
        stroke: textColor,
        height: cellHeight,
        width: cellWidth * 28,
        verticalAlignment: go.Spot.Center,
        alignmentFocus: new go.Spot(0, 0, -2, cellHeight),
        graduatedFunction: function(v) {
            var d = new Date(Date.parse(startDate));
            d.setDate(d.getDate() + Math.ceil(v / 26 * 7));
            return d.toLocaleDateString("en-US", { month: "short", year: "numeric" });
        }
    }
)
2

Could you just set interval to 1 (or not set it at all) and have graduatedFunction return an empty string for all of the days you don’t want anything to be shown?

3

Brilliant. That worked! I do have another dilemma. Some of the months are disappearing:

image
image1287×92 12.6 KB

Here is the updated code:

// creates the dates textblock
$(go.TextBlock,
    {
        name: "months",
        font: "10pt sans-serif",
        stroke: textColor,
        height: cellHeight,
        width: cellWidth * 28,
        verticalAlignment: go.Spot.Center,
        alignmentFocus: new go.Spot(0, 0, -2, cellHeight),
        graduatedFunction: function(v) {
            var d = new Date(Date.parse(startDate));
            d.setDate(d.getDate() + Math.ceil(v / 26 * 7));
            return d.getDate() == 1 ? d.toLocaleDateString("en-US", { month: "short", year: "numeric" }) : "";
        }
    }
)

This is the code that creates the week numbers:

// creates the weeks textblock
$(go.TextBlock,
    {
        interval: 7,
        name: "weeks",
        font: "10pt sans-serif",
        stroke: textColor,
        height: cellHeight,
        width: cellWidth * 7,
        verticalAlignment: go.Spot.Center,
        alignmentFocus: new go.Spot(0, 0, 0, 0),
        textAlign: "center",
        graduatedFunction: function(v) {
            var d = new Date(Date.parse(startDate));
            d.setDate(d.getDate() + v / 26 * 7);
            return d.toLocaleDateString("en-US", { day: "2-digit" });
        }
    }
)
4

Actually, I should have suggested the TextBlock.graduatedSkip functional property. (It’s new in 2.0 and is also on Shape.) But since you already have your own graduatedFunction function, what you did is probably easiest.

I’m suspecting that it’s not showing because the week separator tick is being shown on that day. Move it to your second “Graduated” Panel, or to a third one.

5

Figured it out, I needed to use Math.round instead of Math.ceil. One last question. I would like to display vertical bars just to the left of the date. I was using interval with it before but now that doesn’t work. I can’t use a graduated function with it so how would I get this to work. This was my old code:

$(go.Shape,
   {
        stroke: strokeColor,
        geometryString: "M 0 0 V50",
        alignmentFocus: go.Spot.Center,
        interval: 28
    }
)

This is the picture of what it would look like without the interval:

image
image1174×66 8.45 KB

Essentially, I just want only one of the bars to show up, just left of the month.

6

Use Shape.graduatedSkip? (EDITED)

7

I think you meant graduatedSkip like you mentioned before. Sorry that this didn’t register the first time. This worked!

$(go.Shape,
    {
        stroke: strokeColor,
        geometryString: "M 0 0 V26",
        alignmentFocus: go.Spot.Bottom,
        graduatedSkip: function(v) {
            var d = new Date(Date.parse(startDate));
            d.setDate(d.getDate() + Math.round(v / 26 * 7));
            return d.getDate() == 1 ? null : true;
        }
    }
)

Going back to my previous question. You are right about the week separator tick being shown on the first day of the month which causes the month to disappear. This is indeed the case (see the image below for Aug 2021). I had to scroll a little further to see this. I have tried placing the block of code after the weeks block and copying the block as a third graduated panel; however, the month still disappears. The bar shape exhibits the same behavior as well. Any other thoughts?

image
image1090×93 12 KB

8

If you’ve gone to the trouble to create a separate “Graduated” Panel just to show one thing, I cannot explain that.

I’m working on providing some extended functionality so that you don’t need to go to such lengths with work-arounds.

9

Figured it out. I needed to add interval: 7 to the duplicate block. Again thank you for you help with everything.