Hello everyone,
I hope somebody could help me. I'm trying to make an stacked plot in vega-lite. Everything appears to be fine but for some reason the graph does not allow one bar or (area) to be over the other. Instead of that, they are been depicted in the same origin in the x axis, and overlaped.
this is the code that i have in kibana.
{
$schema: "https://vega.github.io/schema/vega-lite/v2.6.0.json"
mark: area
data: {
url: {
// Context == true means filters of the dashboard will be taken into account
%context%: true
// Specify on which field the time picker should operate
%timefield%: @timestamp
// Specify the index pattern to load data from
index: replayerpattern6
// This body will be send to Elasticsearch's _search endpoint
// You can use everything the ES Query DSL supports here
body: {
// Set the size to load 10000 documents
size: 10000,
// Just ask for the fields we actually need for visualization
_source: ["@timestamp","@version","consumed","consumed_text1","consumed_text2","free","free_text1","free_text2","host", "logLevel", "logdate","max","max_text1","max_text2","message","values","values_names","date_time"]
}
}
format: { property: "hits.hits" }
}
transform: [
{
// Convert _source.@timestamp field to a date
calculate: "toDate(datum._source['@timestamp'])"
as: "time"
}
]// Specify what data will be drawn on which axis
encoding: {
x: {
field: _source.date_time
type: temporal
// Hide the axis label for the x-axis
"axis": {
"domain": false
"tickSize": 0
title: false
}
}
y: {
// Draw the bytes of each document on the y-axis
field: _source.values
type: quantitative
axis: { title: "Resource" }
stack:"true"
aggregate: sum
}
color: {
field: _source.values_names
type: nominal
"scale": {
"domain": [
"max",
"free",
],
"range": [
"#aec7e8",
"#9467bd"
]
}
legend: { title: 'File type' }
}
shape: {
field: ""
type: nominal
}
}
"config": {}
}
and the data looks like this
time values values_names
1 512 300
1 512 194
2 512 95
2 . .
3 . .
3 . .
4 . .
4 .