Search code examples
javascriptgraphvisualizationtimelinegojs

Creating graph with timeline in javascript

I would like to create dynamically changing graph with timeline in javascript, That would look something like this. Edit: I would like to decide by myself which node should be in which time slice.

I wonder, is there a library that I can use to do this, or I need to create it by myself ( by simply drawing on canvas )? I tried to find one, however it seems that there are many implementations of timelines and of graphs but the combination of those two is hard to find. The most suitable solution was using gojs. However I can't create a node with two parents in it because it is implemented as a tree data structure.

Solution

  • As that GoJS sample mentions in the text, it is easy to replace the TreeLayout with a LayeredDigraphLayout and the TreeModel with a GraphLinksModel. Here's what I just did to modify the sample.

    Replace go.TreeLayout with go.LayeredDigraphLayout, so that the custom layout no longer inherits from TreeLayout. Change the constructor not to bother setting TreeLayout specific properties. Change the diagram's layout to use LayeredDigraphLayout specific properties:

                layout: $(LayeredTreeLayout,  // custom layout is defined above
                      {
                        angle: HORIZONTAL ? 0 : 90,
                        columnSpacing: 5,
                        layeringOption: go.LayeredDigraphLayout.LayerLongestPathSource
                      }),

    Replace that sample's model with a GraphLinksModel holding the data that you want:

    // define the node data
var nodearray = [
  { // this is the information needed for the headers of the bands
    key: "_BANDS",
    category: "Bands",
    itemArray: [
      { text: "Day 0" },
      { text: "Day 1" },
      { text: "Day 2" },
      { text: "Day 3" },
      { text: "Day 4" },
      { text: "Day 5" }
    ]
  }
];
var linkarray = [
  { from: "A", to: "D" },
  { from: "B", to: "D" },
  { from: "D", to: "E" },
  { from: "D", to: "F" },
  { from: "C", to: "F" }
];

myDiagram.model = $(go.GraphLinksModel,
    { // automatically create node data objects for each "from" or "to" reference
      // (set this property before setting the linkDataArray)
      archetypeNodeData: {},
      nodeDataArray: nodearray,
      linkDataArray: linkarray
    });

    Without having changed any of the templates or the styling, the result is:

    enter image description here

    Just to make sure it works, I also tried setting HORIZONTAL = false:

    enter image description here