# Kibana Vega Calendar

**URL:** <https://discuss.elastic.co/t/kibana-vega-calendar/342223>\
**Category:** Kibana\
**Tags:** vega\
**Created:** [September 4, 2023, 7:18am UTC](https://discuss.elastic.co/t/kibana-vega-calendar/342223 "2023-09-04T07:18:55Z")\
**Posts on this page:** 2\
**Page:** 1

<div class="post-metadata">

**Author:** ![vardhan](https://sea2.discourse-cdn.com/elastic/user_avatar/discuss.elastic.co/vardhan/32/122359_2.png) [@vardhan](https://discuss.elastic.co/u/vardhan)\
**Post date:** [September 4, 2023, 7:18am UTC](https://discuss.elastic.co/t/kibana-vega-calendar/342223/1 "2023-09-04T07:18:55Z")

</div>

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.

 ![Dev Index](https://us1.discourse-cdn.com/elastic/original/3X/1/0/1048784a45d473ef2c80ed8e11718e896de2b12e.png)  
 ![output scrrenshot](https://us1.discourse-cdn.com/elastic/original/3X/4/c/4c97f5741be6687adb5bc98aabcb9ffc69215bd7.png)  
 ![Response](https://us1.discourse-cdn.com/elastic/original/3X/e/1/e1ab1ff7b5870fc9378f7d9680a84ca1cde16bc9.png)

```auto
{

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

            }

          }

        }

      ]

    }

  ]

}

```

---

<div class="post-metadata">

**Author:** ![system](https://us1.discourse-cdn.com/elastic/original/3X/1/a/1ac57faf039f6b580b3f104ef42a2a89e41014de.png) [@system](https://discuss.elastic.co/u/system)\
**Post date:** [October 2, 2023, 7:19am UTC](https://discuss.elastic.co/t/kibana-vega-calendar/342223/2 "2023-10-02T07:19:31Z")

</div>

This topic was automatically closed 28 days after the last reply. New replies are no longer allowed.