Overview

The Bump chart can be used to show the ranking of several series over time. It is quite similar to the Line chart, but instead of graphing some measure on the y-axis, it only shows the ranking of each series at a given time.

We have two operating modes.

In the first mode (which we could call the "successive points" mode), we specify an x-value and a y-value with each message. This leads to displaying an additional point on the graph, and the points continue to be added to the graph until the user-defined limit quantity is reached. Then each new point replaces the oldest one, and so on. This mode is convenient for time series where data arrives progressively.

The second mode is the XY mode: we specify two arrays of the same dimensions for x and y, which explicitly define all the points to display. The first array defines the list of x-coordinates, and the second array defines the list of y-coordinates.

Successive Points Mode

If a user configures a series "Series 1", selecting property "prop1" for the x-axis and property "prop2" for the y-axis, then upon receiving the following message:

 msg.payload = {
    "prop1": "abscisse1",
    "prop2": 4
  }
return msg;

a point appears on the graph, at x-coordinate "abscisse1", and at the y-coordinate position 1. If there were multiple series, at this x-coordinate, the points would be ordered based on their y-values.

If a new message is received:

 msg.payload = {
    "prop1": "abscisse2",
    "prop2": 4
  }
return msg;

a second point appears, at x-coordinate "abscisse 2", and at the y-coordinate position 1. Then a line connects these two points. If there were multiple series, at this x-coordinate, the points would be ordered based on their y-values.

XY Mode

If a user configures a series "Series 1", selecting array "tab1" for the x-axis and array "tab2" for the y-axis, then upon receiving the following message:

msg.payload = {
    "tab1": ["abscisse1", "abscisse2"],
      "tab2": [4, 8]
  }
return msg;

two points appear on the graph, at x-coordinates "abscisse1" and "abscisse2", both at the y-coordinate position 1. A line connects them. Upon receiving new arrays for x and y, the received data replaces the existing graph. The point number limit is irrelevant here and should be ignored. If there were multiple series, at each x-coordinate, the points would be ordered based on their y-values.