vasturiano/timelines-chart

Timelines Chart

A parallel timelines layout (swimlanes) for representing state of time-series over time. Each timeline segment can be assigned a value on a color scale, either continuous (heatmap mode) or ordinal (for categorical representation). Time-series can be grouped into logical groups, represented as distinct sections. Allows for exploration using drag-to-zoom or a timeline brush.

Check out the examples:

• Categorical
• Continuous (Heatmap)
• Custom Time Format

Quick start

import TimelinesChart from 'timelines-chart';

or using a script tag

<script src="//cdn.jsdelivr.net/npm/timelines-chart"></script>

then

const myChart = new TimelinesChart(<myDOMElement>)
  .data(<myData>);

API reference

Data syntax

[
  {
    group: "group1name",
    data: [
      {
        label: "label1name",
        data: [
          {
            timeRange: [<date>, <date>],
            val: <val: number (continuous dataScale) or string (ordinal dataScale)>
          },
          {
            timeRange: [<date>, <date>],
            val: <val>
          },
          ...
        ]
      },
      {
        label: "label2name",
        data: [...]
      },
      ...
    ],
  },
  {
    group: "group2name",
    data: [...]
  },
  ...
]

Giving Back

If this project has helped you and you'd like to contribute back, you can always buy me a ☕!