Sure! this code displays 2 values on an image:
{
"$schema": "https://vega.github.io/schema/vega-lite/v5.json",
"description": "Displaying values on image",
"data": {
"url": {
"%context%": true,
"%timefield%": "date_field_name",
"index": "index_name",
"body": {
"size": 1,
"sort": [
{
"date_field_name": {
"order": "desc"
}
}
],
"_source": ["field_name1", "field_name2"]
}
},
"format": {
"property": "hits.hits"
}
},
"transform": [
{
"calculate": "datum._source.field_name1",
"as": "f1value"
},
{
"calculate": "datum._source.field_name2",
"as": "f2value"
}
],
"layer": [
{
"mark": {
"type": "image",
"url": "write image URL here",
"width": 700,
"height": 400,
"align": "center",
"baseline": "middle"
},
"encoding": {
"x": {"value": 415},
"y": {"value": 190}
}
},
{
"mark": {
"type": "text",
"fontSize": 15,
"align": "center",
"baseline": "middle"
},
"encoding": {
"text": {"field": "f1value", "type": "quantitative"},
"x":{"value": 500},
"y": {"value": 145}
}
},
{
"mark": {
"type": "text",
"fontSize": 15,
"align": "center",
"baseline": "middle"
},
"encoding": {
"text": {"field": "f2value", "type": "quantitative"},
"x":{"value": 500},
"y": {"value": 170}
}
},
{
"mark": {
"type": "text",
"fontSize": 15,
"color": "black",
"align": "center",
"baseline": "middle"
},
"encoding": {
"text": {
"value": " write any text/description here"
},
"x": {"value": 430},
"y": {"value": 65}
}
}
]
}
You can do multiple calculations in "transform", for example showing the average too. In my case, I just displayed the recent/last values of field_name1 and field_name2. In the "layer" part, I added 4 layers, 1 for the image and the other two for displaying the last value of field_name1 and last value of field_name2. The last layer is to display a text.