ElasticSearch-Kibana-Vega Plugin

Question

I'm very new with elastic search and kibana . I'm using vega plugin in kibana visualization. But not able to create Bar Chart using elastic search aggs. I'm getting proper result when I'm using kibana dev tools.

I'am attaching the following details with the sample code after run this I'm getting a blank page

Visualization Section:

{
  "$schema": "https://vega.github.io/schema/vega/v3.0.json",
  "autosize": "fit",
  "padding": 6,
  "data": [
    {
      "name": "traffic-revenue",
      "url": {
        "index": "brnl_tms_plaza",
         "body": {
          "size": "0",
          "aggs": {
            "group_by_vehicle_subcat": {
              "terms": {
                "field": "VehicleSubCatCode.keyword"
              }
            }
          }
        },
        "format": {
          "property": "aggregations.group_by_vehicle_subcat.buckets"
        }
      }
    }
  ],
  "scales": [
    {
      "name": "xscale",
      "type": "band",
      "domain": {
        "data": "traffic-revenue",
        "field": "key"
      },
      "range": "width",
      "padding": 0.05,
      "round": true
    },
    {
      "name": "yscale",
      "domain": {
        "data": "traffic-revenue",
        "field": "doc_count"
      },
      "nice": true,
      "range": "height"
    }
  ],
  "axes": [
    {
      "orient": "bottom",
      "scale": "xscale"
    },
    {"orient": "left", "scale": "yscale"}
  ],
  "marks": [
    {
      "type": "rect",

      "from": {
        "data": "traffic-revenue"
      },
      "encode": {
        "enter": {
          "x": {
            "scale": "xscale",
            "field": "key",
            "axis": {"title": "Vehicle category"}
          },
          "width": {
            "scale": "xscale",
            "band": 1
          },
          "y": {
            "scale": "yscale",
            "field": "doc_count",
            "axis": {"title": "Vehicle Rate Count"}
          },
          "y2": {
            "scale": "yscale",
            "value": 0
          }
        },
        "update": {
          "fill": {"value": "steelblue"}
        },
        "hover": {"fill": {"value": "red"}}
      }
    }
  ]
}

Data Set

{
  "took": 7,
  "timed_out": false,
  "_shards": {
    "total": 5,
    "successful": 5,
    "skipped": 0,
    "failed": 0
  },
  "hits": {
    "total": 48,
    "max_score": 0,
    "hits": []
  },
  "aggregations": {
    "group_by_vehicle_subcat": {
      "doc_count_error_upper_bound": 0,
      "sum_other_doc_count": 0,
      "buckets": [
        {
          "key": "LMV",
          "doc_count": 35
        },
        {
          "key": "BUS",
          "doc_count": 3
        },
        {
          "key": "LCV",
          "doc_count": 3
        },
        {
          "key": "MAV-5",
          "doc_count": 3
        },
        {
          "key": "MAV-4 with trailer",
          "doc_count": 2
        },
        {
          "key": "MAV-3 without trailer",
          "doc_count": 1
        },
        {
          "key": "MINI-BUS",
          "doc_count": 1
        }
      ]
    }
  }
}

Answer 1

I would recommend debugging your vega code using static data to make sure it is defined properly.

I'm not sure why, but I was able to get your visualization to draw when I set the autosize property to none and set the height and width explicitly.

Here is a vega specification based off of the one you provided which should run in the online vega editor.

{
  "$schema": "https://vega.github.io/schema/vega/v3.0.json",
  "autosize": "none",
  "width": 400,
  "height": 500,
  "padding": 20,
  "data": [
    {
      "name": "traffic-revenue",
      "values": [
        {"key": "a", "doc_count": 5},
        {"key": "b", "doc_count": 22},
        {"key": "c", "doc_count": 1},
        {"key": "d", "doc_count": 7},
        {"key": "e", "doc_count": 12},
        {"key": "f", "doc_count": 2}
      ]
    }
  ],
  "scales": [
    {
      "name": "xscale",
      "type": "band",
      "domain": {
        "data": "traffic-revenue",
        "field": "key"
      },
      "range": "width",
      "padding": 0.05,
      "round": true
    },
    {
      "name": "yscale",
      "domain": {
        "data": "traffic-revenue",
        "field": "doc_count"
      },
      "nice": true,
      "range": "height"
    }
  ],
  "axes": [
    {
      "orient": "bottom",
      "scale": "xscale"
    },
    {"orient": "left", "scale": "yscale"}
  ],
  "marks": [
    {
      "type": "rect",
      "from": {
        "data": "traffic-revenue"
      },
      "encode": {
        "enter": {
          "x": {
            "scale": "xscale",
            "field": "key",
            "axis": {"title": "Vehicle category"}
          },
          "width": {
            "scale": "xscale",
            "band": 1
          },
          "y": {
            "scale": "yscale",
            "field": "doc_count",
            "axis": {"title": "Vehicle Rate Count"}
          },
          "y2": {
            "scale": "yscale",
            "value": 0
          }
        },
        "update": {
          "fill": {"value": "steelblue"}
        },
        "hover": {"fill": {"value": "red"}}
      }
    }
  ]
}

You may already know this since you have the format tag on your elasticsearch data, but if your visualization is working with statically defined data, and not when you pull data from an elasticsearch query, try looking at the data source directly using the vega debuggging functions described here https://vega.github.io/vega/docs/api/debugging/.

Running the following in the browser console should let you look at the data in the format vega is receiving it. VEGA_DEBUG.view.data("")