Vega Pie Chart not Rendering

Elastic Stack Kibana
1

I am trying to make a simple pie chart in vega, but it won't render. I think there is something wrong with the data structure. I have tried many vega transforms, but I can't get it to work.

Am I doing something wrong?

Vega Configuration

{
  "$schema": "https://vega.github.io/schema/vega/v3.3.json",
  "title": "Event counts from all indexes",
  "data": [
    {
      "name": "table",
      "url": {
        "%context%": true,
        "%timefield%": "lastupdated",
        "index": "queueitems-*",
        "body": {
          "aggs": {
            "kategori": {
              "terms": {"field": "kategori.keyword"}
            }
          }
        },
        "size": 0
      },
      "format": {
        "property": "aggregations.kategori.buckets",
        "as": "values"
      },
      "transform": [{"type": "pie", "field": "doc_count"}]
    }
  ],
  "scales": [
    {
      "name": "color",
      "type": "ordinal",
      "domain": {"data": "table", "field": "key"},
      "range": {"scheme": "category20"}
    }
  ],
  "marks": [
    {
      "type": "arc",
      "from": {"data": "table"},
      "encode": {
        "enter": {"fill": {"scale": "color", "field": "key"}}
      }
    }
  ]
}

Response from _search in network console in browser

{
    "took": 6,
    "timed_out": false,
    "_shards": {
        "total": 105,
        "successful": 105,
        "skipped": 0,
        "failed": 0
    },
    "hits": {
        "total": 98,
        "max_score": 0.0,
        "hits": []
    },
    "aggregations": {
        "kategori": {
            "doc_count_error_upper_bound": 0,
            "sum_other_doc_count": 0,
            "buckets": [
                {
                    "key": "Automatisert",
                    "doc_count": 52
                },
                {
                    "key": "Out of Scope",
                    "doc_count": 41
                },
                {
                    "key": "System Exception",
                    "doc_count": 3
                },
                {
                    "key": "Delvis Automatisert",
                    "doc_count": 2
                }
            ]
        }
    }
}

Running VEGA_DEBUG.view.data('table')
bilde

Running JSON.stringify(VEGA_DEBUG.vega_spec)

{"$schema":"https://vega.github.io/schema/vega/v3.3.json","title":"Event counts from all indexes","data":[{"name":"table","format":{"property":"aggregations.kategori.buckets"},"transform":[{"type":"pie","field":"doc_count"},{"type":"nest","keys":["key","doc_count"]}],"values":{"took":76,"timed_out":false,"_shards":{"total":105,"successful":105,"skipped":0,"failed":0},"hits":{"total":47,"max_score":0,"hits":[]},"aggregations":{"kategori":{"doc_count_error_upper_bound":0,"sum_other_doc_count":0,"buckets":[{"key":"Automatisert","doc_count":24,"startAngle":0,"endAngle":3.2084350504746824},{"key":"Delvis Automatisert","doc_count":17,"startAngle":3.2084350504746824,"endAngle":5.481076544560915},{"key":"System Exception","doc_count":6,"startAngle":5.481076544560915,"endAngle":6.283185307179586}]}}}}],"scales":[{"name":"color","type":"ordinal","domain":{"data":"table","field":"key"},"range":{"scheme":"category20"}}],"marks":[{"type":"arc","from":{"data":"table"},"encode":{"enter":{"fill":{"scale":"color","field":"key"}}}}],"config":{"range":{"category":{"scheme":"elastic"}},"arc":{"fill":"#00B3A4"},"area":{"fill":"#00B3A4"},"line":{"stroke":"#00B3A4"},"path":{"stroke":"#00B3A4"},"rect":{"fill":"#00B3A4"},"rule":{"stroke":"#00B3A4"},"shape":{"stroke":"#00B3A4"},"symbol":{"fill":"#00B3A4"},"trail":{"fill":"#00B3A4"}},"autosize":{"type":"fit","contains":"padding"}}
2

@nyuriks Thanks!

3

@PeterSkarmyr hi, could you attach the results of these instructions to your question? Thanks!

1 Like
4

I've added the results to the question. Thanks :slight_smile:

5

@PeterSkarmyr you are missing a few required values for your arc mark. Also, I would recommend always using update encoding rather than enter - because in Kibana the size of the graph might change at any moment, and you don't want to have constants anywhere.

  "marks": [
    {
      "type": "arc",
      "from": {"data": "table"},
      "encode": {
        "update": {
          "fill": {"scale": "color", "field": "key"},
          "startAngle": {"field": "startAngle"},
          "endAngle": {"field": "endAngle"},
          "x": {"signal": "width/2"},
          "y": {"signal": "height/2"},
          "outerRadius": {"signal": "min(width,height)/2.2"}
        }
      }
    }
  ],
1 Like
6

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