I am trying to plot the data in a vertical bar chart and I've followed this writeup.
The only difference is that I'm trying to fetch the data directly via a Elasticsearch Query.
However, I'm unable to get the Tooltip working. Here's my Vega Visualisation Code
{
"$schema": "https://vega.github.io/schema/vega/v5.json",
"width": 400,
"height": 200,
"padding": 5,
data:{
name: "ES_DATA",
url:{
%context%: true
"index": "Students",
"body":{
"size": 2000,
"_source": ["Name","Age","Gender","DOB"]
}
}
format: { property: "hits.hits" }
}
transform: [
// Since @timestamp is a string value, we need to convert it to a unix timestamp
// so that Vega can work on it properly.
{
// Convert _source.@timestamp field to a date
calculate: "toDate(datum._source['DOB'])"
// Store the result in a field named "time" in the object
as: "time"
},
{calculate: "datum._source.Name", as: "Name"},
{calculate: "datum._source.Age", as: "Age"}
]
"signals": [
{
"name": "tooltip",
"value": {},
"on": [
{"events": "rect:mouseover", "update": "datum"},
{"events": "rect:mouseout", "update": "{}"}
]
}
],
"scales": [
{
"name": "xscale",
"type": "band",
"domain": {"data": "ES_DATA", "field": "_source.Name"},
"range": "width",
"padding": 0.05,
"round": true
},
{
"name": "yscale",
"domain": {"data": "ES_DATA", "field": "_source.Age"},
"nice": true,
"range": "height"
}
],
"axes": [
{ "orient": "bottom", "scale": "xscale" },
{ "orient": "left", "scale": "yscale" }
],
"marks": [
{
"type": "rect",
"from": {"data":"ES_DATA"},
"encode": {
"enter": {
"x": {"scale": "xscale", "field": "_source.Name"},
"width": {"scale": "xscale", "band": 1},
"y": {"scale": "yscale", "field": "_source.Age"},
"y2": {"scale": "yscale", "value": 0}
},
"update": {
"fill": {"value": "steelblue"}
},
"hover": {
"fill": {"value": "red"}
}
}
},
{
"type": "text",
"encode": {
"enter": {
"align": {"value": "center"},
"baseline": {"value": "bottom"},
"fill": {"value": "#333"}
},
"update": {
"x": {"scale": "xscale", "signal": "tooltip.Name", "band": 0.5},
"y": {"scale": "yscale", "signal": "tooltip.Age", "offset": -2},
"text": {"signal": "tooltip.Age"},
"fillOpacity": [
{"test": "isNaN(tooltip.Age)", "value": 0},
{"value": 1}
]
}
}
}
]
}
I'm able to render the data in both X and Y axes but I'm unable to make the tooltip work (I don't see any data on hovering, although it works perfectly in the tutorial). What am I missing?
P.S. - Please let me know if my question stands unclear on any aspect. I'd try to explain it all over again.