Time Series Charts

Overview

Time series charts are used to visualize continuous time series data over a recorded period.

You can add one or more time series charts to the timeline. Time series charts share the timeline's scale, aligning the data points with the events displayed in the timeline. This lets you identify interesting points or patterns in the data and investigate the particular events that may be related to them.

This example uses a sample of the Gridwatch dataset, which tracks the sources of energy production in the UK.

Default

To add time series charts to your timeline, pass them in the timeSeriesCharts data object:

To add time series charts to your timeline, pass them in the timeSeriesCharts prop:

const data = {
  events : {},
  entities: {},
  timeSeriesCharts: {
    nuclear: {
      color: "#f48c06",
      data: [
        // ... //
      ]
    },
    gas: {
      color: "#b8d0eb",
      data: [
        // ... //
      ]
    },
    wind: {
      color: "#c77dff",
      data: [
        // ... //
      ]
    },
    hydro: {
      color: "#00b4d8",
      data: [
        // ... //
      ]
    },
    solar: {
      color: "#ffcc00",
      data: [
        // ... //
      ]
    },
  }},

<Timeline
events={events}
entities={entities}
timeSeriesCharts={
  nuclear: {
    color: "#f48c06",
    data: [
      // ... //
    ]
  },
  gas: {
    color: "#b8d0eb",
    data: [
      // ... //
    ]
  },
  wind: {
    color: "#c77dff",
    data: [...
    ]
  },
  hydro: {
    color: "#00b4d8",
    data: [
      // ... //
    ]
  },
  solar: {
    color: "#ffcc00",
    data: [
      // ... //
    ]
  },
}
/>;

Set the size and position of the timeline in the timeSeriesCharts options:

timeline.options({
  timeSeriesCharts: {
    sizePercent: 100,
    position: 'bottom',
  },
});

options={{
  timeSeriesCharts: {
    sizePercent: 100,
    position: 'bottom'
  },
}}

Note that if scale wrapping is applied or the scale mode is set to 'nonlinear', time series charts will be hidden.

Styling

Time series charts can be styled and customized using the properties in the TimeSeriesChart Object.

Tsc Styling Example

const timeSeriesCharts = {
  'Default Chart Style': {
    data: [
      // ... //
    ],
  },
  'Custom Chart Style': {
    data: [
      // ... //
    ],
    color: '#c9477b',
    labelColor: '#ffd88f',
    fillAreaAlpha: 0.5,
    lineStyle: 'dashed',
  },
},

Take a look at how the styles can be applied in the Time Series Charts story.

Stacks

If you have more than one time series dataset, the charts can be added to a time series chart stack. This allows you to compare two related time series datasets or save space on the timeline. In this example, the energy types are grouped into 'Renewable' and 'Non-Renewable'.

Default

To stack your time series charts add the timeSeriesChartStack object to your timeline data. Include the chartIds you want to see in each stack.

const data = {
  events: {},
  entities: {},
  timeSeriesChartStacks: {
    Renewable: {
      chartIds: [
        "wind",
        "hydro",
        "solar"
      ]
    },
    Non-Renewable: {
      chartIds: [
        "nuclear",
        "gas"
      ]
    }
  },
  timeSeriesCharts: {
    nuclear: {
      color: "#f48c06",
      data: [
        // ... //
      ]
    },
    gas: {
      color: "#b8d0eb",
      data: [
        // ... //
      ]
    },
    wind: {
      color: "#c77dff",
      data: [
        // ... //
      ]
    },
    hydro: {
      color: "#00b4d8",
      data: [
        // ... //
      ]
    },
    solar: {
      color: "#ffcc00",
      data: [
        // ... //
      ]
    },
  },
}

<Timeline
events={events}
entities={entities}
timeSeriesChartStacks={
  Renewable: {
      chartIds: [
        "wind",
        "hydro",
        "solar"
      ]
    },
    Non-Renewable: {
      chartIds: [
        "nuclear",
        "gas"
      ]
    }
}
timeSeriesCharts={
  nuclear: {
    color: "#f48c06",
    data: [
      // ... //
    ]
  },
  gas: {
    color: "#b8d0eb",
    data: [
      // ... //
    ]
  },
  wind: {
    color: "#c77dff",
    data: [
      // ... //
    ]
  },
  hydro: {
    color: "#00b4d8",
    data: [
      // ... //
    ]
  },
  solar: {
    color: "#ffcc00",
    data: [
      // ... //
    ]
  },
},
}
/>;

When charts are stacked only the label of the stack is shown. The labels for the individual charts are not shown.

Data Points

The properties of time series chart data points are available via the subItem object. When the targetType is 'timeSeriesChart', the subItem object will be returned with the values for that data point.

timeline.on('click', (pointerEvent) => {
  if (pointerEvent.targetType === 'timeSeriesChart') {
    const {index, subId, time, value, x, y} = pointerEvent.subItem;
    alert([
      `Data point at x = ${x}, y = ${y}`,
      `   Time: ${time}`,
      `   Index: ${index}`,
      `   subID: ${subId}`,
      `   Value: ${value}`,
    ].join('\n'));
  }
});

const handleClick = (pointerEvent) => {
  if (pointerEvent.targetType === 'timeSeriesChart') {
    const {index, subId, time, value, x, y} = pointerEvent.subItem;
    alert([
      `Data point at x = ${x}, y = ${y}`,
      `   Time: ${time}`,
      `   Index: ${index}`,
      `   subID: ${subId}`,
      `   Value: ${value}`,
    ].join('\n'));
  }
}
<Timeline
entities={entities}
events={events}
onTimelineClick={handleClick}
/>

The subId will return a string in the form chartId-index.

Data points don't have a width or height, so these parameters will return undefined.

See the Time Series Chart Tooltips story for an example.