TimeSlicedLineChart

Plot two datasources against each other for 2D charts.

Screenshot of component TimeSlicedLineChart demo

Usage

In situations where the signal's property needs to be plotted in relation to another variable, a 2D chart might make more sense than a LineChart.

Screenshot of component TimeSlicedLineChart basic

Instead of using a normal LineChart and RealTimeDomain, we provide a TimeSlicedLineChart and RealTimeSlicingDomain which are designed to process and render data on the x and y axis simultaneously.

Both variables need to be in the same DataSource. Refer to the DataSource guide to combine different messages.

import {
TimeSlicedLineChart,
RealTimeSlicingDomain,
HorizontalAxis,
VerticalAxis,
} from '@electricui/components-desktop-charts'
const accelDS = new MessageDataSource('accelerometer')
  1. <ChartContainer>
  2. <TimeSlicedLineChart
  3. dataSource={accelDS}
  4. xAccessor={event => event.acc_x}
  5. yAccessor={event => event.acc_y}
  6. />
  7. <RealTimeSlicingDomain window={1000} />
  8. <VerticalAxis />
  9. <HorizontalAxis />
  10. </ChartContainer>

Fog

Chart readability improves when less data is 'stored' onscreen, especially when used with noisy sensor data.

By specifying a Fog component, older data fades out. This is achieved under the hood by configuring a shader based on the near and far planes of the ChartContainer orthographic camera.

Screenshot of component TimeSlicedLineChart fog
import { Fog } from '@electricui/components-desktop-charts'
<Fog color="#fff" />

Prop Reference

PropTypeDefaultOptionalDescription
colorColor

Color

| string | number
Yes

The color of the line

dataSourceDataSourceReference

DataSourceReference

DataSources may be transformed by the mutator functions, this specifies if the function expects the 'original' reference or the transformed final DataSource.

Type: DataSource<T>

<any>
No

A reference to a DataSource for event injestion.

lineWidthnumberYes

The thickness of the line

maxItemsnumberYes

The maximum number of events to store in the cache. Must be set statically. By default it is 10,000

xAccessorEventDataAccessor

EventDataAccessor

Type: (eventData: any, time: number) => number

No

An accessor on the Events data to produce the x axis of data.

yAccessorEventDataAccessor

EventDataAccessor

Type: (eventData: any, time: number) => number

No

An accessor on the Events data to produce the y axis of data.

Failed to grab component information for RealTimeSlicingDomain
Failed to grab component information for Fog