# Create visualization using response from Search API

**URL:** <https://discuss.elastic.co/t/create-visualization-using-response-from-search-api/258103>\
**Category:** Kibana\
**Created:** [December 9, 2020, 10:04am UTC](https://discuss.elastic.co/t/create-visualization-using-response-from-search-api/258103 "2020-12-09T10:04:26Z")\
**Posts on this page:** 8\
**Page:** 1

<div class="post-metadata">

**Author:** ![Kapila](https://sea2.discourse-cdn.com/elastic/user_avatar/discuss.elastic.co/kapila/32/84671_2.png) [@Kapila](https://discuss.elastic.co/u/Kapila)\
**Post date:** [December 9, 2020, 10:04am UTC](https://discuss.elastic.co/t/create-visualization-using-response-from-search-api/258103/1 "2020-12-09T10:04:27Z")

</div>

Is it possible to create visualizations in Kibana using response received in SearchAPI in Dev Tools?

---

<div class="post-metadata">

**Author:** ![flash1293](https://sea2.discourse-cdn.com/elastic/user_avatar/discuss.elastic.co/flash1293/32/41227_2.png) [@flash1293](https://discuss.elastic.co/u/flash1293)\
**Post date:** [December 9, 2020, 12:20pm UTC](https://discuss.elastic.co/t/create-visualization-using-response-from-search-api/258103/2 "2020-12-09T12:20:32Z")

</div>

The [Kibana Vega integration](https://www.elastic.co/guide/en/kibana/current/vega-reference.html) is the right tool for this - it allways you to specify a search query and turn the response into a chart using the vega specification language.

---

<div class="post-metadata">

**Author:** ![Kapila](https://sea2.discourse-cdn.com/elastic/user_avatar/discuss.elastic.co/kapila/32/84671_2.png) [@Kapila](https://discuss.elastic.co/u/Kapila)\
**Post date:** [December 10, 2020, 10:10am UTC](https://discuss.elastic.co/t/create-visualization-using-response-from-search-api/258103/3 "2020-12-10T10:10:32Z")

</div>

We are trying to create Vega visualization from response but facing an issue with collapse. Our API request use collapse to get latest record set but seems we cannot use collapse with Vega. Any idea?

---

<div class="post-metadata">

**Author:** ![flash1293](https://sea2.discourse-cdn.com/elastic/user_avatar/discuss.elastic.co/flash1293/32/41227_2.png) [@flash1293](https://discuss.elastic.co/u/flash1293)\
**Post date:** [December 10, 2020, 10:30am UTC](https://discuss.elastic.co/t/create-visualization-using-response-from-search-api/258103/4 "2020-12-10T10:30:38Z")

</div>

Vega works with all search requests, you just have to make sure you are mapping the response object correctly to the chart. Can you share your vega spec?

---

<div class="post-metadata">

**Author:** ![Kapila](https://sea2.discourse-cdn.com/elastic/user_avatar/discuss.elastic.co/kapila/32/84671_2.png) [@Kapila](https://discuss.elastic.co/u/Kapila)\
**Post date:** [December 10, 2020, 10:49am UTC](https://discuss.elastic.co/t/create-visualization-using-response-from-search-api/258103/5 "2020-12-10T10:49:23Z")

</div>

PFB Vega spec

```auto
{
  "$schema": "https://vega.github.io/schema/vega/v5.json",
  "width": 300,
  "height": 300,
  "autosize": "none",
  "description": "Demonstration",
  "data": [
    {
      "name": "table",
      "url": {
        "index": "demo*",
        "body": {
          "aggs": {
            "terms": {
              "terms": {"field": "Status.keyword", "min_doc_count": 0}
            }
          },
          "size": 0,
          "query": {
            "bool": {
              "must": [
                "%dashboard_context-must_clause%",
                {"range": {"@timestamp": {"%timefilter%": true}}}
              ],
              "must_not": ["%dashboard_context-must_not_clause%"],
              "filter": ["%dashboard_context-filter_clause%"]
            }
          },
		  "collapse" : {
			"field" : "ID.keyword" 
		  }
        }
      },
      "format": {"property": "aggregations.terms.buckets"},
      "transform": [{"type": "pie", "field": "doc_count"}]
    }
  ],
  "scales": [
    {
      "name": "color",
      "type": "ordinal",
      "domain": {"data": "table", "field": "key"},
      "range": {"scheme": "set1"}
    }
  ],
  "marks": [
    {
      "name": "sector",
      "type": "arc",
      "from": {"data": "table"},
      "encode": {
        "enter": {
          "fill": {"scale": "color", "field": "key"},
          "align": {"value": "center"},
          "baseline": {"value": "middle"},
          "x": {"signal": "width/2"},
          "y": {"signal": "height/2"}
        },
        "update": {
          "startAngle": {"field": "startAngle"},
          "endAngle": {"field": "endAngle"},
          "padAngle": {"signal": 0.02},
          "innerRadius": {"signal": 80},
          "outerRadius": {"signal": "200 / 2"},
          "cursor": {"value": "pointer"},
          "tooltip": {
            "signal": "{Status: datum.key, Count: datum.doc_count}"
          }
        }
      }
    }
  ]
}

```

---

<div class="post-metadata">

**Author:** ![flash1293](https://sea2.discourse-cdn.com/elastic/user_avatar/discuss.elastic.co/flash1293/32/41227_2.png) [@flash1293](https://discuss.elastic.co/u/flash1293)\
**Post date:** [December 10, 2020, 10:54am UTC](https://discuss.elastic.co/t/create-visualization-using-response-from-search-api/258103/6 "2020-12-10T10:54:22Z")

</div>

`collapse` is a feature of document search, not aggregations. It seems like you are mixing both of these here. I think the right approach here is to use the top hits aggregation [https://www.elastic.co/guide/en/elasticsearch/reference/current/search-aggregations-metrics-top-hits-aggregation.html](https://www.elastic.co/guide/en/elasticsearch/reference/current/search-aggregations-metrics-top-hits-aggregation.html) instead. Use it as a nested aggregation inside of terms. Also, you are using the `doc_count` field, how do you expect it to take `ID.keyword` into account.

The approach I recommend here:

- Build your query in dev tools and make sure it's returning what you want
- Think about how this data can be mapped to a chart
- Go to vega and configure this mapping

---

<div class="post-metadata">

**Author:** ![Kapila](https://sea2.discourse-cdn.com/elastic/user_avatar/discuss.elastic.co/kapila/32/84671_2.png) [@Kapila](https://discuss.elastic.co/u/Kapila)\
**Post date:** [December 10, 2020, 11:04am UTC](https://discuss.elastic.co/t/create-visualization-using-response-from-search-api/258103/7 "2020-12-10T11:04:20Z")

</div>

Thanks a lot Joe, will follow your approach and come back if we face any issue

---

<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:** [January 7, 2021, 11:04am UTC](https://discuss.elastic.co/t/create-visualization-using-response-from-search-api/258103/8 "2021-01-07T11:04:20Z")

</div>

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