Overview

Os gráficos Marimekko são usados para visualizar dados categóricos sobre um par de variáveis. Em um gráfico Marimekko, ambos os eixos são variáveis com uma escala de porcentagem que determina tanto a largura quanto a altura de cada segmento. Os gráficos Marimekko funcionam como um Gráfico de Barras Empilhadas 100% bidirecional.

Temos dois modos de operação.

No primeiro modo (que poderíamos chamar de modo de "barras sucessivas"), especificamos para cada série um valor em x, um valor em y e um valor em z para cada mensagem. Isso leva à exibição de uma barra adicional no gráfico, e as barras continuam a ser adicionadas ao gráfico até o limite de quantidade definido pelo usuário, e então cada nova barra substitui a mais antiga, e assim por diante. Esse modo é conveniente para séries temporais onde os dados chegam progressivamente. Aqui, x define a abscissa de cada barra, y a sua altura e z a sua largura.

O segundo modo é o modo XYZ: especificamos para cada série em x, y e z três arrays de mesmas dimensões, que definem explicitamente todos os barras a serem exibidas. O primeiro array define a lista de abscissas, o segundo array define a lista de alturas das colunas e o terceiro array define a lista de larguras das colunas.

"Successive bars" mode

Se um usuário configurar uma série "Series 1", escolhendo para o eixo x a propriedade "abscissa1", para o eixo y a propriedade "height1" e para o eixo z a propriedade "width1", e uma série "Series 2", escolhendo para o eixo x também a propriedade "abscissa1", para o eixo y a propriedade "height2" e para o eixo z a propriedade "width1", ao receber a seguinte mensagem :

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

duas barras são exibidas no gráfico, na abscissa "abscissa1", com alturas de 4 e 1, e largura de 2.

Se uma nova mensagem for recebida :

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

um segundo par de barras é exibido, na abscissa "abscissa2", com alturas de 5 e 2, e largura de 3.

XY Mode

Se um usuário configurar uma série "Series 1", escolhendo para o eixo x o array "abscissas", para o eixo y o array "heights1" e para as larguras o array "widths", e uma série "Series 2", escolhendo para o eixo y o array "heights2", ao receber a seguinte mensagem :

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

o mesmo padrão do exemplo anterior é desenhado. Ao receber novos arrays para x, y e z, os dados recebidos substituem o gráfico existente. O limite de barras é irrelevante aqui e deve ser ignorado.