Time Bar – ReGraph Docs

Time Bar

The time bar shows activity over time, either as histogram bars or a smooth area plot.

Data in the time bar can be represented as instantaneous events or as periods of time with fixed start and end points. Time periods can be unbounded at one end.

Timebar Histogram

The time bar works well with the chart when it acts as a filter, restricting the chart to only show items within the time bar's visible range. Panning or zooming the time bar will update the visible items in the chart. For an example of this, see the Chart and Time Bar story.

Stacked Histograms

Histogram bars can be split into separate 'stacks' by defining the stack.by options property.

ReGraph will look at the data prop on your time bar items, and use your specified stack.by property to split each time bar into stacks.

Timebar Stacked

Smooth Mode

By setting the mode prop, you can view the time bar as a histogram with bars showing activity at discrete intervals, or as a smooth distribution with a continuous line. The height at the top of a bar or the peak of a curve is determined by the sum of values of all items at that point.

Timebar Smooth

In smooth mode, the height of the line between the peaks is based on interpolated values based on the distribution of data. Hover styles, highlighting and stacks are unavailable.

Selection Lines

All time bar modes support up to three selection lines, which can show the trend of a subset of data against the full data set. Note that the scale used for selection lines is different to that of the main bars or curve.

Timebar Selection

Time Zones

Every geographical region has its own standard time zone. Each zone has a UTC offset, which is the difference in hours and minutes from Universal Coordinated Time (UTC).

Many regions observe Daylight Saving Time (DST), where the offset changes during the seasons. Offset rules may also change for upredictable political reasons.

The JavaScript Date constructor treats most input formats as local time. There are two exceptions that use UTC:

Date-time strings with a declared time zone (ISO 8601 standard)
Millisecond numbers

See also the MDN Docs on Date() constructor for more details.

ReGraph has no built-in functionality to manage time zones, and displays dates exactly as they're passed in. The ReGraph API accepts dates as either Date objects or millisecond numbers, but always returns dates as Date objects.

You will need to decide which time zone to use for ReGraph events. The most common choices are either the user’s time zone or UTC.

If users want dates in their local time zone and your server stores dates with time zones, pass the dates directly to the client:

// serverside

// YYYY-MM-DDTHH:mm:ss.sssZ, T = time, Z = UTC time with zero offset
const storedDate = '2019-05-22T15:58:33.592Z';
// send storedDate directly to client

Then create a JavaScript Date object to convert to the user's local time:

// clientside
const dateToUse = Date.parse(storedDate);
<TimeBar
  items={{
    node1: {
      times: [{ time: dateToUse }],
    },
  }}
/>

ReGraph then displays the date in the user’s time zone.

If your dates don’t have time zones, JavaScript creates a Date object assuming the date is in local time already:

// clientside
// date string without a time zone
const zonelessDateString = 'Mon, 11 May 2015 15:00:00';
// date will be shown in the user’s time zone.
const dateInLocalTime = new Date(zonelessDateString);

ReGraph will then display the date as 3pm in the user’s time zone.

Time Filtering

The range returned by time bar's onChange event is in local time.

When filtering time, we recommend converting local Date objects to UTC milliseconds to avoid unwanted time zone conversions:

const ms = Date.UTC(
  localDate.getFullYear(),
  localDate.getMonth(),
  localDate.getDate(),
  localDate.getHours(),
  localDate.getMinutes(),
  localDate.getSeconds(),
  localDate.getMilliseconds(),
);