Help

Upcoming database upgrades. Airtable functionality will be reduced for ~15 minutes at 06:00 UTC on Feb. 4 / 10:00 pm PT on Feb. 3. Learn more here

Vega-Lite Stacked Bar Graph w/ Multiple Fields

Topic Labels: Extensions
Solved
Jump to Solution
273 2
cancel
Showing results for 
Search instead for 
Did you mean: 

Hi everyone! I’m trying to work with the Vega-Lite extension to show sums of values in multiple fields in a stacked bar chart, but I haven’t been able to get a stacked bar graph to work correctly without manually creating a new “data” array of objects with values.

For example:
Jim Example

I’d like to be able to show something like “Jim worked for 0.5 hours on checking emails, 2 hours on code reviews, 1 hour on development, and 1.5 hours on assisting coworkers, for a total of 6 hours” as a stacked bar chart, where Jim has each number of hours as a different field on the table for a total of 4 fields and 4 bars stacked. Is this possible with Vega-Lite’s integration with Airtable, or even Vega-Lite as a whole? Or am I limited in either how many fields I can stack or how the table data is formatted?

Thanks in advance!

1 Solution

Accepted Solutions
Greg_F
8 - Airtable Astronomer
8 - Airtable Astronomer

Hi @Journey_Ebels ,

I used your data and added 2 more rows. Main point was using the transform and fold to create the array

{
  "$schema": "https://vega.github.io/schema/vega-lite/v4.json",
  "title": "Table 1",
  "width": "container",
  "height": "container",
  "transform": [
    {
      "fold": [
        "Email hours",
        "Dev hours",
        "Code Review hours",
        "Assist hours"
      ],
      "as": [
        "key",
        "value"
      ]
    }
  ],
  "mark": "bar",
  "encoding": {
    "x": {
      "field": "Name",
      "type": "nominal"
    },
    "y": {
      "field": "value",
      "type": "quantitative"
    },
    "color": {
      "type": "nominal",
      "field": "key"
    }
  }
}

This should look like it:
image
I hope this helps!

See Solution in Thread

2 Replies 2
Greg_F
8 - Airtable Astronomer
8 - Airtable Astronomer

Hi @Journey_Ebels ,

I used your data and added 2 more rows. Main point was using the transform and fold to create the array

{
  "$schema": "https://vega.github.io/schema/vega-lite/v4.json",
  "title": "Table 1",
  "width": "container",
  "height": "container",
  "transform": [
    {
      "fold": [
        "Email hours",
        "Dev hours",
        "Code Review hours",
        "Assist hours"
      ],
      "as": [
        "key",
        "value"
      ]
    }
  ],
  "mark": "bar",
  "encoding": {
    "x": {
      "field": "Name",
      "type": "nominal"
    },
    "y": {
      "field": "value",
      "type": "quantitative"
    },
    "color": {
      "type": "nominal",
      "field": "key"
    }
  }
}

This should look like it:
image
I hope this helps!

That’s perfect, thank you so much!