Drawing multiple lines across diagram

My code:
diagram = $(go.Diagram, ‘canvasDiv’, {
allowMove: false,
allowVerticalScroll: false,
allowHorizontalScroll: false,
initialContentAlignment: go.Spot.TopLeft,
padding: 0 // center
});

  diagram.grid.visible = true;
  diagram.grid.gridCellSize = new go.Size(50, 50);
  diagram.grid.gridOrigin = new go.Point(0, 0)


  diagram.add(
    $(go.Node,
      $(go.Shape,
        {
          geometryString: "M0 100 H" + diagram.viewportBounds.width,
          stroke: "lightgreen"
        })));

        
  diagram.add(
    $(go.Node,
      $(go.Shape,
        {
          geometryString: "M0 50 H" + diagram.viewportBounds.width,
          stroke: "lightgreen"
        })));

This yields me a grid layout diagram, with only one horizontal line from 0,100 to the right end of the canvas.

The second node does not render the horizontal line from 0, 50.

The same happens even when i add the 0,50 Horizontal line node first. This time it renders line from the 0,50 to right end of the canvas, but 0,100 line node does not render.

What am I missing ?

Thanks!

Yes, it does render, but the second one is outside the viewport.

Because you did not specify a position for either Node, the default Diagram.layout (an instance of Layout) had to give each of your Nodes a real Node.position. In this case it puts both nodes next to each other in a row. The first one you see, but the second one is outside of the viewport on the right.

If you hadn’t disabled horizontal scrolling, you would have seen the scrollbar showing that the viewport was only showing half of the diagram. But even with the scrollbars hidden, you could zoom out to see both Nodes.

You need to specify the Node.position for each of your nodes. From your description in this case it sounds as if you want to set both positions to be new go.Point(0, 0). Alternatively you could use the same Shape.geometryString and position one node at (0, 50) and the other at (0, 100).

Or for yet another approach, you could have done:

    myDiagram.add(
      $(go.Node,
        { position: new go.Point(0, 0) },
        $(go.Shape,
          {
            isGeometryPositioned: true,
            geometryString: "M0 50 H" + myDiagram.viewportBounds.width + " M0 100 H" + myDiagram.viewportBounds.width,
            stroke: "lightgreen"
          })));

or

    myDiagram.add(
      $(go.Node,
        { position: new go.Point(0, 50) },
        $(go.Shape,
          {
            isGeometryPositioned: true,
            geometryString: "M0 0 H" + myDiagram.viewportBounds.width + " M0 50 H" + myDiagram.viewportBounds.width,
            stroke: "lightgreen"
          })));

Or any number of other ways of achieving the same goal, with different trade-offs regarding what you allow to happen.

The important point to learn from this is that each Shape has its own coordinate system used by its Geometry, as does each Panel (in this case the Node) for all of its elements (in this case just the one Shape), as does the whole document which determines the position of each Node.

Another point to consider is what should happen when the viewport changes. If the HTML DIV element changes size, or if the user zooms in or out, the Diagram.viewportBounds will change. Therefore you’ll need to implement a “ViewportBoundsChanged” DiagramEvent listener to update your two Shape geometries.

You might be interested in this sample: Absolute positioning within the viewport. Or in some variation of what that sample does.

Thanks so much for the prompt reply. I understand the significance of specifying positions.
Thanks for referring the sample.

The diagram I am building needs absolute positioning, of my nodes… I am manually drawing a scale, and bar graphh points that stretch from leftto right and I want to put them on the canvas at specific x,y coordinates, the ones I would have used if i were using HTML5 canvas x,y
(i.e. 0,0 is on the top left corner and x increases as we go down and y increases as we go right)

One more question: If Position property can be used for absolute positioning, what is need for location ?

They are the same, by default. Until you set Part.locationSpot or part.locationObjectName.

Might you use a “Grid” Panel? GoJS Grid Patterns -- Northwoods Software
Or a “Graduated” Panel? GoJS Graduated Panels -- Northwoods Software

Graduated panels are a great tool… but it does not fit my requirement. I need to show the scales like this

| | |
| 00:00 hrs | 00:15 hrs |
|________ |_________|

and the scale is time.

“Graduated” Panels are typically used for rulers and timelines.