Overview

The AreaBump chart is similar to the Bump chart, but instead of only showing the ranking over time, it also shows the values on the y-axis.

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 for each message. This leads to the display of an additional point in the graph, and points continue to be added to the graph until the quantity limit defined by the user 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 be displayed. 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", choosing "prop1" for the x-axis and "prop2" for the y-axis, then upon receiving the following message:

 msg.payload = {
 
  "tab1": ["x-coordinate1", "x-coordinate2"],
    "tab2": [4, 4],
      "tab3": [3, 4],
        "tab4": [1, 6],
          "tab5": [7, 0],
            "tab6": [8, 9]
  }
return msg;

a point is displayed on the graph, at the x-coordinate "x-coordinate1" and the y-coordinate 4. If there were multiple series, at this x-coordinate, the points would be ordered relative to their y-values.

If a new message is received:

 msg.payload = {
"prop1": "x-coordinate2",
    "prop2": 4
}
return msg;

a second point is displayed, at the x-coordinate "x-coordinate 2" and the y-coordinate 4. A thick line then connects these two points. If there were multiple series, at this x-coordinate, the points would be ordered relative to their y-values, and the lines connecting the different points would vary in thickness depending on the respective series values at each x-coordinate.

XY Mode

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

 msg.payload = {
    "tab1": ["x-coordinate1", "x-coordinate2"],
    "tab2": [4, 8]
  }
return msg;

two points are displayed on the graph, at the x-coordinates "x-coordinate1" and "x-coordinate2", 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 limit on the number of points is irrelevant here and should be ignored. If there were multiple series, at each x-coordinate, the points would be ordered relative to their y-values, and the lines connecting the different points would vary in thickness depending on the respective series values at each x-coordinate.