Vega: Condition based on drop down value

Elastic Stack Kibana
1

Hello everyone

The graph both x-axis and y-axis value must change automatically when a value is selected from dropdown.

I have a grouped bar chart displaying count of incidents logged on x-axis grouped by year, month on y-axis. There is a "priority" drop down. When priority is selected, the graph must display the values accordingly.

Ex: when I select priority "p1", the graph must display the count of p1 incidents logged grouped by year and month.

Below is the code I am trying in vega online editor.

{
  "$schema": "https://vega.github.io/schema/vega/v5.json",
  "width": 400,
  "height": 200,
  "padding": 5,
  "title": "count of incidents grouped by year & month",
  "data": [
    {
      "name": "table",
      "values": [
        {
          "year": "1885",
          "month": "jan",
          "ticket": 10,
          "priority": "p1",
          "inc": "INC001"
        },
        {
          "year": "1885",
          "month": "jan",
          "ticket": 10,
          "priority": "p1",
          "inc": "INC001"
        },
        {
          "year": "1885",
          "month": "feb",
          "ticket": 17,
          "priority": "p3",
          "inc": "INC002"
        },
        {
          "year": "1885",
          "month": "march",
          "ticket": 20,
          "priority": "p3",
          "inc": "INC003"
        },
        {
          "year": "1885",
          "month": "april",
          "ticket": 15,
          "priority": "p4",
          "inc": "INC004"
        },
        {
          "year": "1990",
          "month": "jan",
          "ticket": 27,
          "priority": "p2",
          "inc": "INC005"
        },
        {
          "year": "1990",
          "month": "feb",
          "ticket": 32,
          "priority": "p3",
          "inc": "INC006"
        },
        {
          "year": "1990",
          "month": "march",
          "ticket": 11,
          "priority": "p4",
          "inc": "INC007"
        },
        {
          "year": "1990",
          "month": "april",
          "ticket": 28,
          "priority": "p4",
          "inc": "INC008"
        },
        {
          "year": "2000",
          "month": "jan",
          "ticket": 16,
          "priority": "p2",
          "inc": "INC009"
        },
        {
          "year": "2000",
          "month": "feb",
          "ticket": 19,
          "priority": "p2",
          "inc": "INC010"
        },
        {
          "year": "2000",
          "month": "march",
          "ticket": 29,
          "priority": "p1",
          "inc": "INC011"
        },
        {
          "year": "2000",
          "month": "april",
          "ticket": 18,
          "priority": "p3",
          "inc": "INC012"
        },
        {
          "year": "2000",
          "month": "april",
          "ticket": 18,
          "priority": "p3",
          "inc": "INC013"
        }
      ],
      "transform": [
        {
          "type": "aggregate",
          "ops": ["count"],
          "fields": ["inc"],
          "as": ["c_inc"],
          "groupby": ["year", "month"]
        }
      ]
    }
  ],
  "signals": [
    {
      "name": "priority",
      "value": "p1",
      "bind": {"input": "select", "options": ["p1", "p2", "p3", "p4"]}
    }
  ],
  "scales": [
    {
      "name": "xscale",
      "type": "band",
      "domain": {"data": "table", "field": "year"},
      "range": "width",
      "padding": 0.2
    },
    {
      "name": "yscale",
      "type": "linear",
      "domain": {"data": "table", "field": "c_inc"},
      "range": "height",
      "round": true,
      "zero": true,
      "nice": true
    },
    {
      "name": "color",
      "type": "ordinal",
      "domain": {"data": "table", "field": "month"},
      "range": {"scheme": "category20"}
    }
  ],
  "axes": [
    {
      "orient": "left",
      "scale": "yscale",
      "tickSize": 0,
      "labelPadding": 4,
      "zindex": 1,
      "title": ["num of inc"]
    },
    {"orient": "bottom", "scale": "xscale", "title": ["year grouped by month"]}
  ],
  "marks": [
    {
      "type": "group",
      "from": {"facet": {"data": "table", "name": "facet", "groupby": "year"}},
      "encode": {"enter": {"x": {"scale": "xscale", "field": "year"}}},
      "signals": [{"name": "width", "update": "bandwidth('xscale')"}],
      "scales": [
        {
          "name": "pos",
          "type": "band",
          "range": "width",
          "domain": {"data": "facet", "field": "month"}
        }
      ],
      "marks": [
        {
          "name": "bars",
          "from": {"data": "facet"},
          "type": "rect",
          "encode": {
            "enter": {
              "x": {"scale": "pos", "field": "month"},
              "width": {"scale": "pos", "band": 1},
              "y": {"scale": "yscale", "field": "c_inc"},
              "y2": {"scale": "yscale", "value": 0},
              "fill": {"scale": "color", "field": "month"}
            }
          }
        },
        {
          "type": "text",
          "from": {"data": "bars"},
          "encode": {
            "enter": {
              "y": {"field": "y2", "offset": -5},
              "x": {"field": "x", "offset": {"field": "width", "mult": 0.5}},
              "fill": [
                {
                  "test": "contrast('white', datum.fill) > contrast('black', datum.fill)",
                  "value": "white"
                },
                {"value": "black"}
              ],
              "align": {"value": "right"},
              "baseline": {"value": "middle"},
              "text": {"field": "datum.value"}
            }
          }
        }
      ]
    }
  ]
}

Thank you

2

You can filter your data by adding another transformation. The result will just be to show the data that is selected in the dropdown. If you need to show all data then will need to adjust that expression.

      "transform": [
        {"type": "filter", "expr": "priority == datum.priority"},
        {
          "type": "aggregate",
          "ops": ["count"],
          "fields": ["inc"],
          "as": ["c_inc"],
          "groupby": ["year", "month"]
        }
      ]
1 Like
3

Thank you @aaron-nimocks

One of the drop down value must be All, to display all the data. And also I am not able to add the legend, legend must be month so that we can easily understand, in which month that incident has been logged. If not legend, we must be able to plot that month name along with year on X-axis.

Can you please help me with the above requirement.

4

For the dropdown issue you can add the below for the filter.

{"type": "filter", "expr": "( priority == 'All' ) ? priority != datum.priority : priority == datum.priority"}

and then change your signal to add the All item.

    {
      "name": "priority",
      "value": "All",
      "bind": {"input": "select", "options": ["All", "p1", "p2", "p3", "p4"]}
    }
5

Thank you @aaron-nimocks

It works.

6

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