Skip to main content

Station Overview

Station overview chart is a tool to display transportation incidents over time and path. Consist of two approaches - static and animated.

Properties​

Data​

Data​

Defines x and y axis labels, data points and basic lines.
Takes an array of objects, available object properties are:

  • name - links to y axis categories
  • departure - displayed as date/time on left-hand y axis labels
  • arrival - displayed as date/time on right-hand y axis labels
  • lineColor - displayed as colored icon next to date/times y axis labels
  • belongsTo - boolean value whether the row is linked with different row, render differently with link icons
  • stations -
    • an array of objects with following properties:
    • stationIndex - x axis numerical position (starts from 0)
    • status - Default status values, overwritten by statusIndex. one of the string values:
      • arrived - green point with white check mark
      • disruption - red point with white exclamation mark
      • stop - gray point
      • current - dark green point with white arrow right
      • skip - no point
      • turnAround - gray point with white arrow left
      • merge - white point
    • statusIndex - links to statusMap id property, which controls how does the datapoint look
    • lineColor - controls the color of the line from this station to the next one
    • topLabel - it's an object containing properties of top label
      • text - value to be displayed
      • color - text color
      • background - background color
      • offset - offsets vertical position of the label
      • fontSize - determines font size of the label
    • bottomLabel - it's an object containing properties of bottom label
      • text - value to be displayed
      • color - text color
      • background - background color
      • offset - offsets vertical position of the label
      • fontSize - determines font size of the label
    • demand - numerical value which controls the size of the point
    • topIcon - renders icon on top of data point
    • topIconColor - color of the top icon

Lines Data​

Creates lines on top of the chart. Can be used for track representation and animation purposes.
To work properly lines require data which sets amount of row. Data does not require any other property than a name, so valid solution is [{name: 'A'}, {name: 'B'}] to create 2 rows as a space for lines to render in.
Takes an array of objects, avaliable properties are:

  • color - sets the color for full line
  • segments - an array of objects with following properties:
    • color - sets the color of line segment
    • stationIndex - numerical value on X axis (starting from 0) where the line should start (first item) or move to (any consecutive item). Values can be integers or floats to set the line position in between steps
    • row - numerical value on Y axis (starting from 0) where the line should start (first item) or move to (any consecutive item) - if row is being changed (i.e. move from row 3 to row 4) the line is smoothed instead of taking sharp turn. Values can be integers, floats or string where the string is a name of the row
    • statusIndex - links to statusMap id property, which controls how does the datapoint look - can be used to display icons over the lines
    • topLabel - it's an object containing properties of top label
      • text - value to be displayed
      • color - text color
      • background - background color
      • offset - offsets vertical position of the label
      • fontSize - determines font size of the label
    • bottomLabel - it's an object containing properties of bottom label
      • text - value to be displayed
      • color - text color
      • background - background color
      • offset - offsets vertical position of the label
      • fontSize - determines font size of the label

Lines can cross each other and each segment or full line can be colored. As in example:

Sample use case for lines:

Supplement​

Exact same data and format as Data property. Only difference is it does not define rows. Therefore more data can be shown in between stations or rows.

Categories​

X axis categories. Has to be in desired order.
Takes either an array of strings (which represents the labels on X axis), or an array of objects with following properties:

  • name - similarly as in array of strings - represents the labels on X axis
  • icon - icon to be shown below the label
  • isConnected - boolean, renders link icon after the text
  • fontStyle - takes canvas text properties, safest values are: bold or italic or no value at all

Highlight​

An array of names. Makes highlighted data points stand out by dimming the rest. Dimming strength can be controlled with Highlight opacity property.

Status Map​

Defines available data point styles. This property is used by: Animation Frames, Data and Lines.
Takes array of objects with following properties:

  • id - used for identification in data points, i.e. when Data Point uses statusIndex: 1 chart will look for status map elemnt with id 1.
  • name - not used by chart, it's useful for identifying elements
  • color - background color of data point. Can be: hex - #000000, RGBA - rgba(0,0,0,0.5) or HTML color - red that includes: transparent
  • stroke - stroke color of data point. Can be: hex - #000000, RGBA - rgba(0,0,0,0.5) or HTML color - red that includes: transparent
  • icon - icon in the middle of data point
  • iconColor - color of the icon
  • topLabelOffset - offsets position of the top label, numeric value
  • topLabelPrefix - prepends top label label with provided text
  • topLabelSufix - appends top label label with provided text
  • topLabelPadding - controls padding around top label
  • topLabelFontSize - controls font size of the top label
  • bottomLabelOffset - offsets position of the bottom label, numeric value
  • bottomLabelPrefix - prepends botom label with provided text
  • bottomLabelSufix - appends bottom label with provided text
  • bottomLabelPadding - controls padding around bottom label
  • bottomLabelFontSize - controls font size of the bottom label

Descending order​

Shifts data to display latest values on top. Warning - this also shifts "belongs to" behavior, connection icon is flipped and points to the bottom.

Animation​

Animation Frames​

Converts data into smooth animation, works best with lines property, can be used without any lines.
Takes an array of objects, available properties are:

  • name - not used for anything, it's helpful to identify elements in dataset
  • frames - an array of objects defining animation steps. Each "frame" will be rendered once previous is done rendering, total time for all frames is based on Animation Tick Size property. Accepts following properties:
    • xA is an X axis index, numerical, integer or float where the animation of subframe start from
    • yA is an Y axis index, numerical, integer or float where the animation of subframe start from
    • xB is an X axis index, numerical, integer or float where the animation of subframe will head to
    • yB is an Y axis index, numerical, integer or float where the animation of subframe will head to
    • weight - weight of subframe duration in relation to other weights. I.e. if 2 frames are provided with 2 and 4 weights respectively and Animation Tick Size is 600 (ms) then the first frame will take 2/6 out of 600ms and the latter 4/6 of time. Meaning 200ms and 400ms respectively.
    • statusIndex - allows to control the looks of animated data point, it's lined to id in statusMap

Animation Tick Size​

Controls the length of the animation. If data is being polled from an API every X seconds and fed to the chart, that X should be fed to Animation Tick Size property for seamless animation.

Animation Frame Length​

Property with reverse behavior to FPS. It's SPF - seconds per frame. The lower the value the smoother the animation is but the higher the performance toll

Data Keys​

Allows setting expected key names for properties. Therefore allowing to match provided data set to chart expectations.

  • name - identyfing key
  • status - element status
  • demand - dynamically controls size of data point
  • topLabel - top label data object
  • bottomLabel - bottom label data object
  • departure - time of departure
  • arrival - time of arrival
  • lineColor - color of the line
  • stations - an array of station definition objects
  • background - station background
  • colorOverride - color overriding station color
  • belongsTo - whether row should be displayed as dependency set
  • offset - sets an offset
  • stationIndex - X position of station instead of name (counts from 0)
  • statusIndex - id from status map
  • row - Y position of data point
  • hide - prevents rendering

Titles​

Chart title​

Renders on top of the chart.

Chart subtitle text​

Render below title in smaller font.

Tooltips​

Enable Tooltip​

A flag that indicates whether a tooltip should appear when hovering over series on the chart.

Defaults to true

Tooltip Config​

(optional)

Tooltip config accepts a ValueFormatSpec (see Appendix 1: Value Format Spec) object that will be applied to the y values in every series.

It should be noted that in the case where a tooltip is generated by an adaptor for a given series (such as when multi-column tooltips are generated from data, as shown in Generating Tooltips), the supplied Tooltip Configuration will be ignored for that series.

Display​

Display Time Zone​

Takes IANA time zone name. Internet Assigned Numbers Authority time zones. If there's no value borwser time zone is used. Changes timezone of provided dates for departure and arrival.

Date/Time format​

Takes unicode format. Official unicode date formatting. Changes format of provided dates for departure and arrival.

Enforce Chart Height​

Allows fixed height of the chart.

Chart height​

Height in pixels for the chart. Works only when Enforce Chart Height is set to true.

Highlight Opacity​

Range 0.0 - 1.0. Where 1 is no transparency and 0 is fully transparent. Sets the opacity of not highlighted elements to make the highlighted elements stand out.

Label rotation X axis​

Numerical rotation degree. Controls rotation of top labels.

Hide times​

When set to true - prevents render of the departure/arrival times

Hide train icon​

When set to true - prevents render of train icon on Y axis labels

Render column labels​

When set to false - prevents render of X axis labels

Render row labels​

When set to false - prevents render of Y axis labels

Render tracks​

When set to true - renders additional horizontal lines for each row

Spacing​

Margin top​

Defines space for X axis labels. Useful to fit long label names.

Margin bottom​

Defines free space at the bottom of the chart

Margin left​

Defines space for left Y axis labels. Useful to fit long label names or long date/time formats

Margin right​

Defines space for right Y axis labels. Useful to fit long label names or long date/time formats

Column width​

Space taken by each column.

Row Height​

Space taken by each row. Warning - this property is used only when scrolling is enabled. Otherwise row height is scaled to fit all available rows.

Top Labels Offset​

Move all top labels down, this value stacks with per label settings.

Bottom Labels Offset​

Move all bottom labels down, this value stacks with per label settings.

Selection​

Selected Points​

Must be linked. This property stores selected (clicked) elements

Scrolling​

Enable Y Scroll​

Enables scrolling vertically. When there are not enough rows scroll is disabled.

Enable X Scroll​

Enables scrolling horizontally. When there are not enough columns scroll is disabled

Persist scroll​

Allows linking scroll to the store and controlling it with the workflows

Scroll state​

Property used with Persist Scroll this is actual scroll value, must be linked to the store

Enable Set In view​

Enables Set In View property. Works similar to Persist Scroll with one exception - Persist scroll will always scroll to target position, Set in View makes sure element is visible, if it's visible then no scrolling is triggered.

Set in view​

Property used with Enable Set In View. This is target element to ensure it's in view.