VEGA-lite chart - combined Area and line chart - vega-lite

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"
}
}
}
]
}

Related

How to position text at the top edge of a VegaLite chart?

I am trying to create a VegaLite chart with labelled highlighted areas which are specified in a separate dataset using [min_x, max_x] coordinates.
I've managed to highlight the area itself using a rect mark, but I'm struggling to properly position the label at the top edge of the chart.
This is the end result I'm trying to achieve. In this example I'm using the dy property of the text mark to position the label. Unfortunately this only works when the chart height is known in advance, which doesn't work for my use case.
If there is a better way to achieve the result I want, please let me know. This is the Vegalite specification for the chart above, without previously mentioned dy property:
{
"$schema": "https://vega.github.io/schema/vega-lite/v5.json",
"datasets": {
"test_data": [
{"x": 0, "y": 1.5},
{"x": 5, "y": 2},
{"x": 9, "y": 4},
{"x": 14, "y": 0}
],
"highlight_data": [
{"from_x": 2.3, "to_x": 3, "label": "AAA"},
{"from_x": 6.3, "to_x": 8, "label": "BBB"}
]
},
"data": {"name": "test_data"},
"layer": [
{
"data": {"name": "highlight_data"},
"transform": [
{"calculate": "(datum.from_x + datum.to_x) / 2", "as": "mean_x"}
],
"layer": [
{
"mark": {"type": "rect", "opacity": 0.3},
"encoding": {
"x": {"field": "from_x", "type": "quantitative"},
"x2": {"field": "to_x"},
"color": {"value": "#fcfc00"}
}
},
{
"mark": {"type": "text"},
"encoding": {
"text": {"field": "label"},
"x": {"field": "mean_x", "type": "quantitative"}
}
}
]
},
{
"mark": {"type": "line"},
"encoding": {
"x": {"field": "x", "type": "quantitative", "title": "X Label"},
"y": {"field": "y", "type": "quantitative", "title": "Y Label"}
}
}
],
"title": "Title",
"width": 800,
"height": 500
}
You can reference height inside an expression to make it dynamic.
"dy": { "expr": "-height + (height/2) -10"}
{
"$schema": "https://vega.github.io/schema/vega-lite/v5.json",
"datasets": {
"test_data": [
{"x": 0, "y": 1.5},
{"x": 5, "y": 2},
{"x": 9, "y": 4},
{"x": 14, "y": 0}
],
"highlight_data": [
{"from_x": 2.3, "to_x": 3, "label": "AAA"},
{"from_x": 6.3, "to_x": 8, "label": "BBB"}
]
},
"data": {"name": "test_data"},
"layer": [
{
"data": {"name": "highlight_data"},
"transform": [
{"calculate": "(datum.from_x + datum.to_x) / 2", "as": "mean_x"}
],
"layer": [
{
"mark": {"type": "rect", "opacity": 0.3},
"encoding": {
"x": {"field": "from_x", "type": "quantitative"},
"x2": {"field": "to_x"},
"color": {"value": "#fcfc00"}
}
},
{
"mark": {"type": "text", "dy": { "expr": "-height + (height/2) -10"}},
"encoding": {
"text": {"field": "label"},
"x": {"field": "mean_x", "type": "quantitative"}
}
}
]
},
{
"mark": {"type": "line"},
"encoding": {
"x": {"field": "x", "type": "quantitative", "title": "X Label"},
"y": {"field": "y", "type": "quantitative", "title": "Y Label"}
}
}
],
"title": "Title",
"width": 800,
"height": 500
}

Vega-Lite: Can I merge data sources?

I have time series data in the format:
"data": {"values":[
{"time":nnn,"Pressure":1},
{"time":nnn,"Pressure":2},
{"time":nnn,"Pressure":3}
] }
and another as:
"data": {"values":[
{"time":nnn,"Flow":1},
{"time":nnn,"Flow":2},
{"time":nnn,"Flow":3}
] }
If the time stamp is the same how can I merge it in to one array as this:
"data": {"values":[
{"time":nnn,"Pressure":1,"Flow":1},
{"time":nnn,"Pressure":2,"Flow":2},
{"time":nnn,"Pressure":3,"Flow":3}
] },
You can join datasets using a Lookup Transform. Here is a quick example using data similar to what you mentioned in the question (view in vega editor):
{
"datasets": {
"data1": [
{"time": 0, "Pressure": 1},
{"time": 1, "Pressure": 2},
{"time": 2, "Pressure": 3}
],
"data2": [
{"time": 0, "Flow": 1},
{"time": 1, "Flow": 2},
{"time": 2, "Flow": 3}
]
},
"data": {"name": "data1"},
"transform": [
{
"lookup": "time",
"from": {"data": {"name": "data2"}, "key": "time", "fields": ["Flow"]}
}
],
"mark": "line",
"encoding": {
"x": {"field": "Pressure", "type": "quantitative"},
"y": {"field": "Flow", "type": "quantitative"}
}
}

Use multi selection along all values for same y-value marked points

I have a vega-lite visualization in kibana. The config goes like:
encoding: {
x: {field: "time", timeUnit: "yearmonthdaydatehoursminutes", type: "temporal", axis : {title: null}}
y: {field: "user", type: "nominal", axis : {title: null}}
}
layer : [
{
"selection": {
"select": {"type": "multi"}
},
"mark": { "type" : "point", "cursor": "pointer"},
"encoding": {
"opacity" : {"condition" : {"selection": "select", "value": 1},
"value": 0.3}
}
]
This basically multi selects based on clicking the point in visualization as shown below:
Requirement: I want to select all values falling on the same y-axis on one click of any one point (not only that point as in figure). Is this possible through vega-lite? Basically need an if condition with the y value of selected point.
I went over the documentation (though it was haunting) and some other examples to figure out, but no help. Any help will be appreciated.
If you want the selection to apply to all points with the same y-axis value, you can pass encodings=["y"] within the selection specification:
"selection": {"select": {"type": "multi", "encodings": ["y"]}}
There is no way for selections to respond when clicking the background of the chart. But a nice trick to achieve this is to create a transparent background element to respond to clicks, and to use "nearest": true within your selection to allow clicking anywhere on the chart surface. Here is an example using Vega-Lite JSON (view live in Vega Editor):
{
"encoding": {"y": {"type": "nominal", "field": "user", "title": null}},
"layer": [
{
"mark": {"type": "rule", "opacity": 0},
"selection": {
"select": {"type": "multi", "encodings": ["y"], "nearest": true}
}
},
{
"mark": {"type": "point", "cursor": "pointer"},
"encoding": {
"opacity": {
"condition": {"value": 1, "selection": "select"},
"value": 0.3
},
"x": {
"type": "temporal",
"field": "time",
"timeUnit": "yearmonthdatehoursminutes",
"title": null
}
}
}
],
"data": {
"values": [
{"time": "1970-01-31T00:00:00.000002019", "user": "B"},
{"time": "1970-02-28T00:00:00.000002019", "user": "B"},
{"time": "1970-03-31T00:00:00.000002019", "user": "C"},
{"time": "1970-04-30T00:00:00.000002019", "user": "E"},
{"time": "1970-05-31T00:00:00.000002019", "user": "E"},
{"time": "1970-06-30T00:00:00.000002019", "user": "F"},
{"time": "1970-07-31T00:00:00.000002019", "user": "F"},
{"time": "1970-08-31T00:00:00.000002019", "user": "A"},
{"time": "1970-09-30T00:00:00.000002019", "user": "F"},
{"time": "1970-10-31T00:00:00.000002019", "user": "A"},
{"time": "1970-11-30T00:00:00.000002019", "user": "E"},
{"time": "1970-12-31T00:00:00.000002019", "user": "A"},
{"time": "1971-01-31T00:00:00.000002019", "user": "D"},
{"time": "1971-02-28T00:00:00.000002019", "user": "C"},
{"time": "1971-03-31T00:00:00.000002019", "user": "C"},
{"time": "1971-04-30T00:00:00.000002019", "user": "A"},
{"time": "1971-05-31T00:00:00.000002019", "user": "D"},
{"time": "1971-06-30T00:00:00.000002019", "user": "E"},
{"time": "1971-07-31T00:00:00.000002019", "user": "D"},
{"time": "1971-08-31T00:00:00.000002019", "user": "A"},
{"time": "1971-09-30T00:00:00.000002019", "user": "A"},
{"time": "1971-10-31T00:00:00.000002019", "user": "D"},
{"time": "1971-11-30T00:00:00.000002019", "user": "B"},
{"time": "1971-12-31T00:00:00.000002019", "user": "E"},
{"time": "1972-01-31T00:00:00.000002019", "user": "F"},
{"time": "1972-02-29T00:00:00.000002019", "user": "A"},
{"time": "1972-03-31T00:00:00.000002019", "user": "B"},
{"time": "1972-04-30T00:00:00.000002019", "user": "D"},
{"time": "1972-05-31T00:00:00.000002019", "user": "F"},
{"time": "1972-06-30T00:00:00.000002019", "user": "B"},
{"time": "1972-07-31T00:00:00.000002019", "user": "F"},
{"time": "1972-08-31T00:00:00.000002019", "user": "A"}
]
}
}

Plot two "columns" of data having two different orders of magnitude using vega-lite

(This is a follow up on this question)
Assume my data looks like:
[
{"date": "2019-01-01", "foo": 10000, "bar": 10, "goo": 30},
{"date": "2019-01-02", "foo": 30000, "bar": 20, "goo": 20},
{"date": "2019-01-03", "foo": 40000, "bar": 20, "goo": 10},
{"date": "2019-01-04", "foo": 20000, "bar": 60, "goo": 20}
]
And my plot is:
{
"$schema": "https://vega.github.io/schema/vega-lite/v3.json",
"description": "Stock prices of 5 Tech Companies over Time.",
"width": 1200,
"height": 450,
"data": { "url": "data.json" },
"mark": {
"type": "line",
"point": true
},
"transform": [
{ "fold": ["foo", "bar", "goo"] }
],
"encoding": {
"x": { "field": "date", "type": "temporal" },
"y": { "field": "value", "type": "quantitative" },
"color": { "field": "key", "type": "nominal" },
"scale": {"zero": false}
},
"resolve": { "scale": { "y": "independent" } }
}
As you can see, due to the different order of magnitude of foo and the other two columns, the plot is not helpful. How can I have a secondary y-axis and (mention it in the legend)?
You can do that by combining layering with the fold transform. Here is how you might modify your example (vega editor link):
{
"$schema": "https://vega.github.io/schema/vega-lite/v3.json",
"width": 1200,
"height": 450,
"data": {
"values": [
{"date": "2019-01-01", "foo": 10000, "bar": 10, "goo": 30},
{"date": "2019-01-02", "foo": 30000, "bar": 20, "goo": 20},
{"date": "2019-01-03", "foo": 40000, "bar": 20, "goo": 10},
{"date": "2019-01-04", "foo": 20000, "bar": 60, "goo": 20}
]
},
"transform": [{"fold": ["foo", "bar", "goo"]}],
"encoding": {
"x": {"field": "date", "type": "temporal"},
"y": {"field": "value", "type": "quantitative"},
"color": {"field": "key", "type": "nominal"}
},
"layer": [
{
"mark": {"type": "line", "point": true},
"transform": [{"filter": "datum.key == 'foo'"}]
},
{
"mark": {"type": "line", "point": true},
"transform": [{"filter": "datum.key != 'foo'"}]
}
],
"resolve": {"scale": {"y": "independent"}}
}
You could then go on to modify the axis titles by specifying the y encoding & title within each layer. Here is an example (vega editor link):
{
"$schema": "https://vega.github.io/schema/vega-lite/v3.json",
"width": 1200,
"height": 450,
"data": {
"values": [
{"date": "2019-01-01", "foo": 10000, "bar": 10, "goo": 30},
{"date": "2019-01-02", "foo": 30000, "bar": 20, "goo": 20},
{"date": "2019-01-03", "foo": 40000, "bar": 20, "goo": 10},
{"date": "2019-01-04", "foo": 20000, "bar": 60, "goo": 20}
]
},
"transform": [{"fold": ["foo", "bar", "goo"]}],
"encoding": {
"x": {"field": "date", "type": "temporal"},
"color": {"field": "key", "type": "nominal"}
},
"layer": [
{
"mark": {"type": "line", "point": true},
"encoding": {
"y": {"field": "value", "type": "quantitative", "title": "Foo Value"}
},
"transform": [{"filter": "datum.key == 'foo'"}]
},
{
"mark": {"type": "line", "point": true},
"encoding": {
"y": {
"field": "value",
"type": "quantitative",
"title": "Bar/Goo Value"
}
},
"transform": [{"filter": "datum.key != 'foo'"}]
}
],
"resolve": {"scale": {"y": "independent"}}
}

Why are tooltip values rounded?

For some reason my tooltips are rounded to the nearest integer?
Any help is appreciated.
Here is the link to chart in the VL editor (version 3.0.0-rc14).
(vega editor link)
{
"width": 300,
"height": 300,
"config": {
"title": {"fontSize": 15},
"numberFormat": ".0f",
"style": {
"bar": {"size": 20},
"guide-title": {"value": "asdf", "fontSize": 15},
"guide-label": {"fontSize": 15}
},
"scale": {"bandPaddingInner": 0.5, "bandPaddingOuter": 0.5},
"legend": {"symbolSize": 100, "titleFontSize": 15, "labelFontSize": 15},
"axis": {"titleFontSize": 15, "labelFontSize": 15, "labelLimit": 1000}
},
"data": {"name": "data-dba50c8bae540866b10e6763560b8ec9"},
"mark": "circle",
"encoding": {
"tooltip": [
{"type": "quantitative", "field": "expressiveness"},
{"type": "quantitative", "field": "customization"}
],
"x": {"type": "quantitative", "field": "expressiveness"},
"y": {"type": "quantitative", "field": "customization"}
},
"$schema": "https://vega.github.io/schema/vega-lite/v2.6.0.json",
"datasets": {
"data-dba50c8bae540866b10e6763560b8ec9": [
{"library": "A", "expressiveness": 0, "customization": 1},
{"library": "B", "expressiveness": 0.4, "customization": 0.7},
{"library": "C", "expressiveness": 1, "customization": 0.7},
{"library": "D", "expressiveness": 0.6, "customization": 0.7},
{"library": "E", "expressiveness": 0, "customization": 1}
]
}
}
Because you set "numberFormat": ".0f" in the config, and that's applied to the tooltip too.