Line Chart

LineChart component

Displays sensor data as points connected by lines.

Properties

• config: Config – chart configuration object describing axes and signals
  • Config:
    • yAxes: Axis[] – an array of axis configuration objects, defaults to [{ visible: true }] (one axis for all the data)
    • signalSets: SignalSet[] – an array of signal set specifications
  • Axis:
    • visible: boolean – determines if the axis is visible, defaults to false
    • label: string – a label to display next to the axis
    • labelOffset: number – offset of the axis label from the axis, defaults to 40
    • includedMin: number – a value that is always displayed on the axis. The real minimum of the axis can be lower if there are lower values in the data.
    • belowMin: number – free space below the data, specified as a multiple of the range of the data
    • limitMin: number – limit to the minimum of the axis, it can't be lower than this value even if there are smaller values in the data
    • includedMax: number – a value that is always displayed on the axis. The real maximum of the axis can be higher if there are higher values in the data.
    • aboveMax: number – free space above the data, specified as a multiple of the range of the data
    • limitMax: number – limit to the maximum of the axis, it can't be higher than this value even if there are higher values in the data
  • SignalSet:
    • cid: string – the identifier of the signal set
    • tsSigCid: string – the identifier of the timestamp signal, defaults to "ts"
    • signals: Signal[] – array of signal specifications
  • Signal:
    • cid: string – the identifier of the signal in the signal set
    • label: string – signal label, the signal is only shown if not null TODO: check
    • enabled: boolean – the signal is shown if true or undefined
    • axis: number – index of an axis for the signal values, defaults to 0
    • color: d3-color.color – color of the line
    • lineWidth: number – width of the line
• height: number – the height of the chart in pixels, defaults to 500
• margin: Margin
• withToolTip: boolean – enables a tooltip displaying signal values, defaults to true
• toolTipExtraProps: ToolTipProps – extra properties for the tooltip
  • ToolTipExtraProps:
    • width: number – determines the width of the tooltip box, defaults to 350
• withBrush: boolean – enables selecting part of a chart to zoom in, defaults to true
• withZoom: boolean – enables zoom
• zoomUpdateReloadInterval: number – milliseconds after the last zoom event ends before new data are fetched; set to null to disable automatic updates of the data
• controlTimeIntervalChartWidth: boolean – TODO, defaults to true
• lineVisibility: function – determines whether lines and points are visible, defaults to lineWithoutPointsAndPointsOnNoAggregation()
  • recommended values (can be imported from ivis package): lineWithoutPointsAndPointsOnNoAggregation(), lineWithPointsOnHover(), lineWithoutPoints(), nolineWithPointsAlways()
• contentComponent: function – React component rendered on top of the chart, mutually exclusive with contentRender
• contentRender: function – the returned value is rendered on top of the chart, mutually exclusive with contentComponent
• onClick: function – TODO
• tooltipContentComponent: function – React component rendered inside the tooltip, mutually exclusive with tooltipContentRender
• tooltipContentRender: function – the returned value is rendered inside the tooltip, mutually exclusive with tooltipContentComponent
• getExtraQueries: function – should return an array of extra queries to fetch data from the server (see ...draw extra data below)
• prepareExtraData: function – processes the data from extra queries before they are saved into the state (see ...draw extra data below)
• getSvgDefs: function – the function should return <defs> SVG element which is placed inside the chart's SVG
• getGraphContent: function – gets the SVG for the content of the chart (see ...draw marks in the chart area below)
• createChart: function – draws the data to the prepared SVG (see ...draw marks in the chart area below)
• compareConfigs: function – function to be used when comparing changes in config property, called only if the default comparison function doesn't find any differences
• lineCurve: function (d3-shape.curve*) – line interpolation between the data points, defaults to d3-shape.curveLinear (straight line)
• lineWidth: number – the width of lines in chart (used only if line width is not set in Signal config), defaults to 1.5

How to...

...set the signalSets from which the data are fetched

Use the config.signalSets property. You can also set the labels and colors of the signals there.

See the Linechart template example for an example of how this can be done using the panel parameters.

...set the limits of y-axis

Set the config.yAxes property. All the values are in the same units as the data. The minimum and maximum of the axis are computed as follows:

1. The min is set to the smaller of the values includedMin (if specified) and the smallest value from the fetched data. Similarly, the max is set to the higher of the values includedMax (if specified) and the highest value from the fetched data.
2. If belowMin is specified, the min is set to min - belowMin * (max - min). Similarly, if aboveMax is specified, the max is set to max + aboveMax * (max - min).
3. If limitMin is specified, the min is clamped so it isn't smaller than limitMin. Similarly, if limitMax is specified, the max is clamped so it isn't higher than limitMax.

Set the limits to exact values

Set both the includedMin and limitMin (or includedMax and aboveMax) to the same value.

...use different y-axes for different signals

Prepare the axes in the config.yAxes property (one item in the array for each axis – up to 4 axes can be rendered simultaneously). If you don't want to set the labels or limits of the axes, you can just put { visible: true } (for each axis) there, the limits will be determined from the data.

When you specify the signals inside the config.signalSets property, use the axis field of Signal configuration to set the axis for the signal. This field is an index of the axis in the config.yAxes array.

...enable zoom and/or brush

Use the withZoom and withBrush properties. They are enabled by default.

If zoom is enabled, the user can use the mouse wheel to zoom in and out. They can also drag the chart with the mouse to pan. Touchscreen controls (pinch zoom) are also available. When the visible region of the chart is changed, new data are fetched automatically after zoomUpdateReloadInterval milliseconds. Set the zoomUpdateReloadInterval to null to disable this behaviour.

If brush is enabled, the user can draw a region with their mouse and the chart will zoom to that region. The CTRL key must be held down to enable this behaviour.

...change the chart's look

• The color of the lines can be set in the color property of the Signal.
• The width of the lines can be set in the lineWidth property of the Signal or in the lineWidth property of the chart (for all signals).
• The interpolation of the lines between points (e.g. using a curve instead of straight line) can be set using the lineCurve property. See d3-shape Curves for list of available curves.

...change the tooltip

Use the tooltipContentComponent or tooltipContentRender properties. See the TooltipContent class in TimeBasedChartBase.js file for reference (that is the default tooltip).

...draw marks in the chart area

1. If you need any <defs> in your SVG, specify them using the getSvgDefs property. The function should return the <defs> SVG element.

2. Use the getGraphContent property to prepare the SVG for your marks. When this function is called, the data and the axes of the chart are not prepared yet so you don't have access to them (that is done in the createChart function, see step 3). This property is a function which gets the LineChart and the paths (SVG prepared for the lines) as arguments and the returned value is rendered inside the chart area. If you modify this function, you should always return the paths, otherwise the rendering of the lines of the LineChart will result in an exception. Example (the marks will be rendered behind the lines):

   const getGraphContent = (base, paths) => {
     return [
       <g ref={node => base.marks = select(node)} key="marks" />,
       ...paths
     ];
   };

3. The createChart function is called whenever the chart needs to be redrawn. Use it to draw the marks to the prepared SVG. The createChart function has the following arguments:

   • base: LineChart – the LineChart object
   • signalSetsData: object (with cids of config.signalSets as keys) – the data returned from the server
   • baseState: object – the state of the LineChart object
   • abs – the time interval currently visible in the chart
   • xScale – the scale to convert values along the x-axis (time) into pixels on screen
   • yScales – the scaleS to convert values along the y-axis into pixels on screen, one for each axis in config.yAxes
   • points: object (with cids of config.signalSets as keys) – data representing the points on the chart

...draw extra data (fetched from the server) in the chart

This is similar to the previous section with some additional steps:

1. To fetch the data, use the getExtraQueries property. The function gets the LineChart object and the currently displayed time interval (abs argument in the createChart function) as its arguments and should return an array of queries (of shape { type, args }). The queries are then executed.

2. To process the results of the queries, use the prepareExtraData property. This function gets the LineChart object, the results from the standard ("timeSeries") queries and the results of the extra queries as its parameters. The results are then saved into the LineChart's state, which can be then accessed as the baseState argument in the createChart function.