Help

Save the date! Join us on October 16 for our Product Ops launch event. Register here.

Help with Vega-lite line chart

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

I’m struggling to get my head around how to draw a line chart in Vega-lite that displays multiple fields. I can get one field working, but am hoping someone can post an example of syntax required to do something like this (example from random values in Google Sheets);

image

Appreciate any help on this. Reading through the Vega-lite documentation is leaving me cross-eyed. :frowning:

Extra points to show how a line can change colour as its value gets highter or lower. :grinning_face_with_big_eyes:

EDIT:
Ok, making progress… point data in 3 different graphs. Now to see if I can layer them.

{
  "title": "Data",
  "repeat": ["Value A", "Value B", "Value C"],
   "columns": 1,
  "spec": {
    "mark": "line",
      "point": true,
    "encoding": {
      "x": {"field": {"repeat": "repeat"}, "bin": true},
      "y": {"aggregate": "count", "type": "quantitative" }
    }
  }
}

image

1 Solution

Accepted Solutions

Omg I think I finally have this sorted…

{  "title": "Data",  
   "width": 1000,
   "height": 400,
  "repeat": {
    "layer": ["Value_A", "Value_B","Value_C"]},
  "spec": {
    "mark": "line",
    "encoding": {
      "x": {"field": "Date", "type": "temporal"},
      "y": {
        "aggregate": "mean",
        "field": {"repeat": "layer"},
        "type": "quantitative",
        "title": "Value"},
        "color": { "datum": {"repeat": "layer"}, "type": "nominal" }
    }
  }
}

image

See Solution in Thread

4 Replies 4

OK, I have made some progress. If I place all data in one values column, then tag it with a type column and add a colour switch, things start to work.

image

{
  "title": "Data",
    "mark": "line",
    "encoding": {
    "x": {"field": "Date", "type": "temporal"},
    "y": {"field": "Data_Value", "type": "quantitative"},
     "color": {"field": "Colour", "type": "nominal"}
    }
}

But as I’m not keen on pre-formatting my data, I’ll appreciate if anyone can help out with the original structure - I’ll continue to learn as time allows and will post here.

EDIT: I’m sure I’m close, in that I just have to format/layer the data with transform… just wish the doco had some simple examples to follow. :frowning:

{
   "repeat": 
    {
    "layer": ["Value_A", "Value_B", "Value_C"]
    },
  "title": "Data",
    "width": 400,
    "height": 400,
    "mark": "line",
    "encoding": {
    "x": {"field": "Date", "type": "temporal"},
    "y": {"field": {"repeat": "layer","type": "quantitative"}
      }
    }
}

Omg I think I finally have this sorted…

{  "title": "Data",  
   "width": 1000,
   "height": 400,
  "repeat": {
    "layer": ["Value_A", "Value_B","Value_C"]},
  "spec": {
    "mark": "line",
    "encoding": {
      "x": {"field": "Date", "type": "temporal"},
      "y": {
        "aggregate": "mean",
        "field": {"repeat": "layer"},
        "type": "quantitative",
        "title": "Value"},
        "color": { "datum": {"repeat": "layer"}, "type": "nominal" }
    }
  }
}

image

Does anyone know the method of linking up line data if there’s gaps?

Example below - where you can see the Vegalite chart showing multiple line plots from my data, and the Airtable chart plot is still only limited to one (and everyone, please vote with Airtable support to see this improved!) - but note how the Vegalite data is broken and not continuous…

image

I couldn't get ChatGPT to do this. You are an absolute beast, sir. A gentleman and a scholar. 🎊