Using Vega to create a Histogram with Global Mean

Elastic Stack Kibana
1

Hey everyone.
EDIT: I'm using Kibana 7.11

I'm eventually trying to create one of these diagrams using Vega-Lite:

image

It looks easy enough but I'm trying to use pre-aggregated data so I'm starting by just trying to get the histogram to appear.

Here is my Vega Spec:

{
  "$schema": "https://vega.github.io/schema/vega-lite/v4.json",
  "title": "Event counts from all indexes",
  "data": {
    "values": {
      "took": 58,
      "timed_out": false,
      "_shards": {
        "total": 1,
        "successful": 1,
        "skipped": 0,
        "failed": 0
      },
      "hits": {
        "total": 195729,
        "max_score": null,
        "hits": []
      },
      "aggregations": {
        "2": {
          "buckets": [
            {
              "key": 0,
              "doc_count": 79881
            },
            {
              "key": 1000000000,
              "doc_count": 13236
            },
            {
              "key": 2000000000,
              "doc_count": 2979
            },
            {
              "key": 3000000000,
              "doc_count": 5042
            },
            {
              "key": 4000000000,
              "doc_count": 51578
            },
            {
              "key": 5000000000,
              "doc_count": 26798
            },
            {
              "key": 6000000000,
              "doc_count": 6382
            },
            {
              "key": 7000000000,
              "doc_count": 2177
            },
            {
              "key": 8000000000,
              "doc_count": 1043
            },
            {
              "key": 9000000000,
              "doc_count": 641
            },
            {
              "key": 10000000000,
              "doc_count": 498
            },
            {
              "key": 11000000000,
              "doc_count": 428
            },
            {
              "key": 12000000000,
              "doc_count": 400
            },
            {
              "key": 13000000000,
              "doc_count": 373
            },
            {
              "key": 14000000000,
              "doc_count": 346
            },
            {
              "key": 15000000000,
              "doc_count": 271
            },
            {
              "key": 16000000000,
              "doc_count": 245
            },
            {
			NOTE:... [cut due to length]
              "key": 946000000000,
              "doc_count": 1
            }
          ]
        }
      }
    }
  },
  "transform": [
    {
      "flatten": [
        "aggregations.2.buckets"
      ],
      "as": [
        "buckets"
      ]
    }
  ],
  "mark": "bar",
  "encoding": {
    "x": {
      "field": "key",
      "bin": true,
      "type": "nominal"
    },
    "y": {
      "field": "doc_count",
      "type": "quantitative",
      "axis": {
        "title": "Document count"
      }
    }
  },
  "config": {
    "range": {
      "category": {
        "scheme": "elastic"
      }
    },
    "mark": {
      "color": "#54B399"
    },
    "title": {
      "color": "#343741"
    },
    "style": {
      "guide-label": {
        "fill": "#69707d"
      },
      "guide-title": {
        "fill": "#343741"
      },
      "group-title": {
        "fill": "#343741"
      },
      "group-subtitle": {
        "fill": "#343741"
      }
    },
    "axis": {
      "tickColor": "#eef0f3",
      "domainColor": "#eef0f3",
      "gridColor": "#eef0f3"
    },
    "background": "transparent"
  },
  "width": "container",
  "height": "container",
  "autosize": {
    "type": "fit",
    "contains": "padding"
  }
}

Here is my Vega-Lite visualization:

    {
      $schema: https://vega.github.io/schema/vega-lite/v4.json
      title: Event counts from a single index
      data: {
        url: {
          %context%: true
          %timefield%: @timestamp
          index: kpis
          body: {
            aggs: {
              2: {
                histogram: {
                  field: duration
                  interval: 1000000000
                  min_doc_count: 0
                }
              }
            }
            size: 0
          }
          format: {
            property: aggregations.2.buckets
          }
        }
      }
      transform: [{
        flatten: ["aggregations.2.buckets"]
        as: ["buckets"]
      }]
      mark: bar
      encoding: {
        x: {
          field: key
          bin: true
          type: nominal
        }
        y: {
          field: doc_count
          type: quantitative
          axis: {
            title: Document count
          }
        }
      }
    }

I'm getting an error message like this:

    * Infinite extent for field "key": [Infinity, -Infinity]

    * Infinite extent for field "doc_count": [Infinity, -Infinity]

But I have no idea what I'm doing wrong...
Anyone got any ideas?

Thanks in advance.

2

@AquaX the error message is telling you that you are using the wrong path. When I used the Inspector on your data, I see that you have flattened the fields with the parent path buckets. So you have buckets.key and buckets.doc_count, not key and doc_count.

3

I think using format vs a transform would be the way to go.

4

Oh man! Such a simple solution :slight_smile:

image
image1351×767 39.5 KB

Looks like that got me something. Thank you!

I can now add the layer with the global average.

5

Good point! I'll make it more simple. Thank you!

6

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