JavaScript Racing Dashboard

dashboard xy line point area heatmap realtime gauge datagrid palette

Motorsports industry inspired example of using LightningChart JS.
A dashboard consuming playback data from a multi-lap sports car race, displaying information such as:

  • torque
  • brake
  • steering
  • speed
  • engine rounds per minute
  • tire temperatures
  • fuel
  • accelerations along XZ planes
  • current lap time
  • race position

LightningChart JS excels at applications for industries like motorsports due to the large amount of different data properties plotted across a shared time window.
Regardless whether the use case is real-time monitoring or playing back old recordings, the use case is equally demanding.

This example combines several visualization types in same view:

  • Line series to display torque, brake, steer with a fast 5 second scrolling time window.
  • Two gauges to display speed and engine revolutions.
  • Dynamically colored line series for tire temperatures (hot temperatures show as orange/red).
  • Dynamically colored, fading over time scatter series for XZ accelerations (new samples show as bright white, old samples fade away)
  • Freeform line series to display race track along with a moving marker for the current racer position.
    • A heatmap under this line series displays time loss relative to last lap (red = time lost, green = time gain)
  • And finally a data grid for displaying per-lap information, lap times, positions and fuel levels.