'VEGA-lite chart - combined Area and line chart
I trying to make chart who is combine area and line chart. I have Problem with line chart, which are painted only his part. Maybe is problem in the code, or the input data are incorrect. I try some combinations, but not with successfully output.. See attached files. My code below. Thanks for your helpVega editor; expected output
{
"$schema": "https://vega.github.io/schema/vega-lite/v5.json",
"description": "Machine",
"width":1000,
"height":40,
"config": {
"legend": {"orient": "bottom", "layout": {"bottom": {"anchor": "middle"}},"title": null, "labelFontSize":15, "symbolType":"square"}
},
"data": {
"values": [
{"time": "2022-01-27T05:00:43.674Z", "y":1 , "od":0, "stav":"produkce", "textik": "Havelka"},
{"time": "2022-01-27T07:32:13.671Z", "y": 0, "od":0, "stav":"produkce", "textik": ""},
{"time": "2022-01-27T10:41:13.671Z", "y": 1, "od":0, "stav":"produkce", "textik": ""},
{"time": "2022-01-27T12:32:13.671Z", "y": 0, "od":0, "stav":"produkce", "textik": ""},
{"time": "2022-01-27T07:32:13.671Z", "y": 1, "od":0, "stav":"error", "textik": "Pavlik"},
{"time": "2022-01-27T09:32:13.671Z", "y": 0, "od":0, "stav":"error", "textik": ""},
{"time": "2022-01-27T09:52:13.671Z", "y": 1, "od":0, "stav":"error", "textik": "Pavlik"},
{"time": "2022-01-27T10:41:13.671Z", "y": 0, "od":0, "stav":"error", "textik": ""},
{"time": "2022-01-27T09:32:13.671Z", "y": 1, "od":0, "stav":"nastaveni", "textik": ""},
{"time": "2022-01-27T09:52:13.671Z", "y": 0, "od":0, "stav":"nastaveni", "textik": ""},
{"time": "2022-01-27T10:32:13.671Z", "y": 1.2, "od":1,"stav":"prestavka", "textik": ""},
{"time": "2022-01-27T10:52:13.671Z", "y": 0, "od":0, "stav":"prestavka", "textik": ""},
{"time": "2022-01-27T05:05:43.674Z", "y": 1.2, "od":1,"stav":"prestavka", "textik": ""},
{"time": "2022-01-27T06:05:43.674Z", "y": 0, "od":0, "stav":"prestavka", "textik": ""},
{"time": "2022-01-27T08:22:14.670Z", "axover": 1.2, "textik": ""},
{"time": "2022-01-27T12:32:13.671Z", "axover": 0, "textik": ""}
]
},
"encoding": {
"x": {"title":null,
"timeUnit":"hoursminutes",
"field": "time",
"type":"temporal",
"axis": {"format": "%H:%M","tickCount": 12}
}
},
"layer": [
{
"mark": {"type": "area","interpolate": "step-after", "tooltip":true},
"encoding": {
"y": {
"field": "y",
"type": "quantitative", "stack":false,
"axis": {"title":null, "labels":false, "ticks": false}},
"fillOpacity":{"value":0.5},
"color": {
"field":"stav",
"type":"nominal",
"scale":{
"domain":["produkce","error","nastaveni","kusy","prestavka","program","axover"],
"range":["#00d79f", "#ef0004","yellow","black", "grey","blue", "green"]
}
},
"y2":{
"field":"od"
},
"tooltip": [
{"field":"stav"},
{"field": "time", "type": "temporal","format": "%d.%m.%y - %H:%M"},
{"field":"textik"}
]
}
},
{
"mark": {"type": "line","interpolate": "step-after","point": {"filled":true, "fill":"green"}, "tooltip":true},
"encoding": {
"y": {
"field": "axover",
"type": "quantitative"
},
"tooltip": [
{"field":"axover"},
{"field": "time", "type": "temporal","format": "%d.%m.%y - %H:%M"}
]
}
},
{
"mark": {"type": "text", "baseline":"line-top", "align":"left", "dx":5, "dy":5, "fontSize":12},
"encoding": {
"text":{
"field":"textik",
"type":"nominal"
}
}
}
]
}
Sources
This article follows the attribution requirements of Stack Overflow and is licensed under CC BY-SA 3.0.
Source: Stack Overflow
| Solution | Source |
|---|
