Overview

Marimekko Charts are used to visualize categorical data over a pair of variables. In a Marimekko Chart, both axes are variables with a percentage scale that determines both the width and height of each segment. The Marimekko Charts work like a two-way 100% Stacked Bar Graph.

We have two operating modes.

In the first mode (which we could call the "successive bars" mode), we specify for each series a value in x, a value in y, and a value in z for each message. This leads to the display of an additional bar in the chart, and bars continue to be added to the chart until the limit quantity defined by the user, then each new bar replaces the oldest one, and so on. This mode is convenient for time series where data arrives progressively. Here, x defines the abscissa of each bar, y its height, and z its width.

The second mode is the XYZ mode: we specify for each series in x, y, and z three arrays of the same dimensions, which explicitly define all the bars to display. The first array defines the list of abscissas, the second array defines the list of column heights, and the third array defines the list of column widths.

"Successive bars" mode

If a user configures a series "Series 1", choosing for the x-axis the property "abscissa1", for the y-axis the property "height1", and for the z-axis the property "width1", and a series "Series 2", choosing for the x-axis also the property "abscissa1", for the y-axis the property "height2", and for the z-axis the property "width1", then upon receiving the following message:

 msg.payload = {
        "abscissa": "abscissa1",
        "height1": 4,
        "width1": 2,
        "height2": 1
    }
return msg;

two bars are displayed on the graph, at abscissa "abscissa1", with heights of 4 and 1, and a width of 2.

If a new message is received:

 msg.payload = {
        "abscissa": "abscissa2",
        "height1": 5,
        "width1": 3,
        "height2": 2
    }
return msg;

a second pair of bars is displayed, at abscissa "abscissa2", with heights of 5 and 2, and a width of 3.

XY Mode

If a user configures a series "Series 1", choosing for the x-axis the array "abscissas", for the y-axis the array "heights1", and for the widths the array "widths", and a series "Series 2", choosing for the y-axis the array "heights2", then upon receiving the following message:

  msg.payload = {
        "abscissas": ["abscissa1", "abscissa2"],
        "heights1": [4, 5],
        "widths": [2, 3],
        "heights2": [1, 2]
    }
return msg;

the same pattern as in the previous example is drawn. Upon receiving new arrays for x, y, and z, the received data replaces the existing graph. The limit on the number of bars is irrelevant here and should be ignored.