hii team ,
we are trying to create a calendar visualization which compares the total sum value of yesterday's order value and today's order value and show case the difference in percentage.
we are able to create visualization when providing the data manually but trying to achieve the same using the index data, visualization is not populating the expected result. As shown in the screenshots we are getting blank display when running this vega code .
can you please let us known where we went wrong in this code.
{
"$schema": "https://vega.github.io/schema/vega/v5.json",
"description": "A calendar visualization of kibana sample data ecommerce.",
"padding": 5,
"signals": [
{"name": "step", "value": 16},
{"name": "offset", "value": 10},
{"name": "width", "update": "step * 52 + offset * 11"},
{"name": "height", "update": "step * 5"},
{
"name": "scheme", "value": "pinkyellowgreen",
"bind": {
"input": "select",
"options": [
"pinkyellowgreen",
"blueorange",
"brownbluegreen",
"purplegreen",
"purpleorange",
"redblue",
"redgrey",
"redyellowblue",
"redyellowgreen",
"spectral"
]
}
}
],
"data": [
{
"name": "mycalendar",
"url": {
"%context%": "true",
"%timefield%": "order_date",
"index": "sample",
"body": {
"from": 0,
"size": 1000
}
},
"format": {
"type": "json", "parse": {"products.price.sum": "number", "order_date": "date"}
},
"transform": [
{
"type": "window",
"sort": {"field": "order_date", "order": "ascending"},
"ops": ["lag"],
"fields": ["products.price.sum"],
"as": ["prev"]
},
{
"type": "formula",
"expr": "datum.prev ? (datum.products.price.sum - datum.prev) / datum.prev : 0",
"as": "value"
},
{
"type": "formula",
"expr": "year(datum.order_date)",
"as": "year"
},
{
"type": "timeunit", "field": "order_date",
"units": ["year", "week"],
"as": ["w0", "w1"]
},
{"type": "formula", "expr": "timeOffset('day', datum.w0)", "as": "w0"},
{
"type": "timeunit", "field": "order_date",
"units": ["day"],
"as": ["d0", "d1"]
}
]
}
],
"scales": [
{
"name": "y",
"type": "band",
"domain": {"data": "mycalendar", "field": "d0", "sort": true},
"range": {"step": {"signal": "step"}}
},
{
"name": "color",
"type": "linear",
"clamp": true,
"range": {"scheme": {"signal": "scheme"}},
"domain": [-0.06, 0, 0.06]
}
],
"legends": [
{
"fill": "color",
"title": "Daily Change",
"titleFontSize": 12,
"titleOrient": "left",
"titlePadding": 20,
"offset": 15,
"orient": "top",
"type": "gradient",
"direction": "horizontal",
"gradientLength": 250,
"gradientThickness": 10,
"format": "%"
}
],
"layout": {
"columns": 1,
"padding": 15
},
"marks": [
{
"type": "group",
"from": {
"facet": {
"data": "mycalendar",
"name": "values",
"groupby": "year"
}
},
"sort": {
"field": "datum.year",
"order": "descending"
},
"data": [
{
"name": "max",
"source": "values",
"transform": [
{"type": "aggregate", "ops": ["max"], "fields": ["date"]}
]
},
{
"name": "weeks",
"transform": [
{"type": "sequence", "start": 0, "stop": 53, "as": "weeknum"},
{"type": "formula", "expr": "datetime(parent.year, 0, 1 + datum.weeknum * 7)", "as": "date"},
{"type": "timeunit", "units": ["year", "week"], "field": "date", "as": ["w0", "w1"]},
{"type": "formula", "expr": "timeOffset('day', datum.w0)", "as": "w0"},
{"type": "filter", "expr": "datum.date < data('max')[0].max_date"}
]
}
],
"scales": [
{
"name": "x",
"type": "band",
"domain": {"data": "weeks", "field": "w0", "sort": true},
"range": {"step": {"signal": "step"}}
}
],
"axes": [
{
"orient": "left", "scale": "y",
"ticks": false, "domain": false, "labelPadding": 8,
"format": "%a", "formatType": "time",
"title": {"signal": "parent.year"},
"titleAngle": 0, "titleAlign": "right",
"titleX": -8, "titleY": -2, "titleFontSize": 10
},
{
"orient": "top", "scale": "x",
"ticks": false, "domain": false,
"format": "%b", "formatType": "time",
"labelAlign": "left",
"encode": {
"labels": {
"update": {
"x": {
"scale": "x", "field": "value", "band": 0,
"offset": {"signal": "month(datum.value) * offset"}
},
"opacity": {"signal": "date(datum.value) < 8 ? 1 : 0"}
}
}
}
}
],
"marks": [
{
"type": "rect",
"from": {"data": "values"},
"encode": {
"enter": {
"x": {"scale": "x", "field": "w0", "offset": {"signal": "month(datum.date) * offset"}},
"width": {"scale": "x", "band": 1, "offset": -1},
"y": {"scale": "y", "field": "d0"},
"height": {"scale": "y", "band": 1, "offset": -1},
"cornerRadius": {"value": 2},
"tooltip": {"signal": "timeFormat(datum.date, '%a %b %d, %Y') + '\\n' + format(datum.value, '+.2%')"}
},
"update": {
"fill": {"scale": "color", "field": "value"}
}
}
}
]
}
]
}