Need help with creating a legend on a layered line chart with vegalite

Questions / Help
,
1

Hello,

I am currently working on a prototype for evaluation of pressurized air consumption data
in livebook with vegalite. I got the following layered chart from my processed raw data, which works fine, in general.

All metrics are per day averages ,so the x-axis represents the timeline and the y-axis the interpolated range of the daily usage in m3/min. The lines represent summed up usage of two air suspension support lines and the used pressurized air for the main production lines.

VegaLite.new(width: 700, height: 400, title: "Vergleich Durchfluss zu Verbrauch")
|> VegaLite.data_from_values(normalized)
|> VegaLite.layers([
  VegaLite.new()
  |> VegaLite.transform(calculate: "datum.Suspension_VL2 + datum.Suspension_VL3", as: "Summe Durchfluss")
  |> VegaLite.mark(:line, color: "#2C73D2")
  |> VegaLite.encode_field(:x, "Startzeit", type: :temporal, title: "Tagesdatum")
  |> VegaLite.encode_field(:y, "Summe Durchfluss", type: :quantitative, title: "Summe Durchfluss"),
  VegaLite.new(width: 400, height: 200, title: "Summe Druchfluss Ringleitungen 1 + 2")
  |> VegaLite.transform(calculate: "datum.Druckluft_BA1_1 - datum.Druckluft_BA1_2 - datum.Instrumentenluft + 6", as: "Summe Verbrauch")
  |> VegaLite.mark(:line, color: "orange")
  |> VegaLite.encode_field(:x, "Startzeit", type: :temporal)
  |> VegaLite.encode_field(:y, "Summe Verbrauch", type: :quantitative, title: "Summe Verbrauch")
  ])

By default, this code renders no legend to the chart.
I tried to get the lineś field name with setting the color field, but using

VegaLite.encode_field(:color "Summe Verbrauch")

renders a huge legend with about 500 points, one for each metric.

Randomluy following some examples from the documentation led to distorted, beautifully multicolored graphs or unexpected results for me, like breaking the line colors in general or rendering only the first entry correctly.

Maybe anyone ca point me in the right direction for creating a legend with a single title for each line layer and the corresponding color as text color or symbol?

Kind regards,
Marcel

2

This demo achieves what I think you’re looking for by calculate-ing a static value into each dataset. The important bit:

      "transform": [
        {
          "calculate": "\"foo\"",
          "as": "label"
        }
      ],
      "encoding": {
        "x": {"field": "x", "type": "quantitative"},
        "y": {"field": "y1", "type": "quantitative"},
        "color": {"field": "label"}
      },
1 Like
3

@al2o3cr good find, and the corresponding code could be:

Vl.new(...)
|> ...
|> Vl.encode_field(:color, "label")
|> Vl.layers([
  Vl.new()
  |> Vl.transform(calculate: "'Label 1'", as: "label")
  |> ...,
  Vl.new()
  |> Vl.transform(calculate: "'Label 2'", as: "label")
  |> ...
])
1 Like
4

@al2o3cr @jonatanklosko Thank you both, that was just the missing piece, I needed. :grinning:

Maybe this is a use case worth mentioning in the documentation,
I found the available information on legend creation and the color attribute very hard to grasp :slight_smile: