# How to display aggregations results in bar chart with vega

**URL:** <https://discuss.elastic.co/t/how-to-display-aggregations-results-in-bar-chart-with-vega/133409>\
**Category:** Kibana\
**Created:** [May 27, 2018, 2:28am UTC](https://discuss.elastic.co/t/how-to-display-aggregations-results-in-bar-chart-with-vega/133409 "2018-05-27T02:28:09Z")\
**Posts on this page:** 8\
**Page:** 1

<div class="post-metadata">

**Author:** ![pqt120583](https://avatars.discourse-cdn.com/v4/letter/p/ee59a6/32.png) [@pqt120583](https://discuss.elastic.co/u/pqt120583)\
**Post date:** [May 27, 2018, 2:28am UTC](https://discuss.elastic.co/t/how-to-display-aggregations-results-in-bar-chart-with-vega/133409/1 "2018-05-27T02:28:09Z")

</div>

Currently, I want to display a barchart with y is the number Of customer value and x is the name of bucket field properties ("isActive", "isRegistered", "isBanned") as below query result:

"buckets": [  
{  
"key\_as\_string": "2018-01-01T00:00:00.000Z",  
"key": 1514764800000,  
"doc\_count": 3900,  
"isRegistered": {  
"doc\_count": 1000,  
"NumberOfCustomer": {  
"value": 1000  
}  
},  
"isBanned": {  
"doc\_count": 300,  
"NumberOfCustomer": {  
"value": 48  
}  
},  
"isActive": {  
"doc\_count": 2000,  
"NumberOfCustomer": {  
"value": 952  
}  
}  
}  
]

The above data is the result from below vega code:

```
"data": [
{
  "name": "values",
  "url": {
    "index": "cust*",
    "body": {
      "size": 0,
      "aggs": {
        "all":{
          "date_histogram": {
          "field": "timeStamp",
          "interval": "year"
          },
          "aggs": {
            "isRegistered": {
              "filter": {
                "term": {
                  "status.isRegistered": true
                }
              },
              "aggs":{
                "NumberOfCustomer": {
                  "cardinality": { "field": "customer.customerCode.keyword" }
                }
              }
              
            },
            "isBanned": {
              "filter": {
                "term": {
                  "status.isBanned": true
                }
              },
              "aggs":{
                "NumberOfCustomer": {
                  "cardinality": { "field": "customer.customerCode.keyword" }
                }
              }
              
            },
            "isActive": {
              "filter": {
                "term": {
                  "status.isActive": true
                }
              },
              "aggs":{
                "NumberOfCustomer": {
                  "cardinality": { "field": "customer.customerCode.keyword" }
                }
              }                  
            }
          }               
        }
      }
    }
  }
}    

```

]

 ![image](https://us1.discourse-cdn.com/elastic/original/3X/7/6/763976069c7422dccc8a004431121391d143c72a.png)

I really don't know how to transform above data into table with 3 fields : name (isRegister, isActive, isBanned) , doc\_count (3900, 300, 2000) and numberOfCustomer(1000,48,952).

Please help me, this trouble me a week and I still cannot find the solution.

---

<div class="post-metadata">

**Author:** ![pqt120583](https://avatars.discourse-cdn.com/v4/letter/p/ee59a6/32.png) [@pqt120583](https://discuss.elastic.co/u/pqt120583)\
**Post date:** [May 27, 2018, 10:40am UTC](https://discuss.elastic.co/t/how-to-display-aggregations-results-in-bar-chart-with-vega/133409/2 "2018-05-27T10:40:11Z")

</div>

Hi all,

I found the solution with the adjacency\_matrix aggregations.  
Here's my search code:

GET cust\*/\_search  
{  
"size": 0,  
"aggs" : {  
"interactions" : {  
"adjacency\_matrix" : {  
"filters" : {  
"isActive" : { "terms" : { "status.isActive": [true]} },  
"isBanned" : { "terms" : { "status.isBanned" : [true] }},  
"isRegistered" : { "terms" : { "status.isRegistered" : [true] }}

```
    }
  },
  "aggs":{
        "NumberOfCustomer": {
          "cardinality": { "field": "customer.customerCode.keyword" }
        }
      }
}

```

}  
}

Thanks for viewing.

---

<div class="post-metadata">

**Author:** ![timroes](https://sea2.discourse-cdn.com/elastic/user_avatar/discuss.elastic.co/timroes/32/19712_2.png) [@timroes](https://discuss.elastic.co/u/timroes)\
**Post date:** [May 28, 2018, 7:51am UTC](https://discuss.elastic.co/t/how-to-display-aggregations-results-in-bar-chart-with-vega/133409/3 "2018-05-28T07:51:40Z")

</div>

Hi Thomas,

glad to see you got it solved. I would be interested to hear why you chose to use Vega visualizations for that? This seems like a rather easy use-case that should be solvable completely via the build in chart implementations?

Cheers,  
Tim

---

<div class="post-metadata">

**Author:** ![pqt120583](https://avatars.discourse-cdn.com/v4/letter/p/ee59a6/32.png) [@pqt120583](https://discuss.elastic.co/u/pqt120583)\
**Post date:** [May 28, 2018, 8:33am UTC](https://discuss.elastic.co/t/how-to-display-aggregations-results-in-bar-chart-with-vega/133409/4 "2018-05-28T08:33:22Z")

</div>

Hi Timrose,

Thanks for viewing and replying.

The reason I use vega is to:

1. Display more information in the barchart in top & bottom of each bar
2. Interaction when hit the the bar to navigate to another dashboard

Moreover, I really don't know how to display the nested object property name as x-scale. I'm new to kibana (just a week to get to know and work with), it would be great if you give a instructions or guideline of how to use the build in chart implementation.

Thanks,  
Thomas.

---

<div class="post-metadata">

**Author:** ![timroes](https://sea2.discourse-cdn.com/elastic/user_avatar/discuss.elastic.co/timroes/32/19712_2.png) [@timroes](https://discuss.elastic.co/u/timroes)\
**Post date:** [May 28, 2018, 8:51am UTC](https://discuss.elastic.co/t/how-to-display-aggregations-results-in-bar-chart-with-vega/133409/5 "2018-05-28T08:51:43Z")

</div>

Hi Thomas,

all of that are actually valid reasons. I just try to get a hold on why people start using Vega, to help us prioritize implementation of those features that are missing. So you actually would want to look in the following feature enhancements:

- (1) [Show y-axis value within charts](https://github.com/elastic/kibana/issues/11983) (We are currently working on a new chart component for Kibana, and will most likely implement that, once we have this in place.)
- (2) [Custom drilldowns from dashboard panels](https://github.com/elastic/kibana/issues/12560) (We are already actively preparing for this and finalizing UX for that.)
- [Nested type support](https://github.com/elastic/kibana/issues/1084) As long as I understand you correctly and you are working with real nested fields in your index (and not just subfields).

With having this limitations in mind your configuration for a classical bar chart that visualizes your query above, could look like that (ignore the missing charts, since I don't have data formatted that way):

 ![localhost_5601_wtg_app_kibana](https://us1.discourse-cdn.com/elastic/original/3X/6/3/63bb24b652071a5427a066093820e68df6cff027.png)

Please always feel free to come back with further questions on how to create that kind of charts.

Cheers,  
Tim

---

<div class="post-metadata">

**Author:** ![pqt120583](https://avatars.discourse-cdn.com/v4/letter/p/ee59a6/32.png) [@pqt120583](https://discuss.elastic.co/u/pqt120583)\
**Post date:** [May 28, 2018, 10:04am UTC](https://discuss.elastic.co/t/how-to-display-aggregations-results-in-bar-chart-with-vega/133409/6 "2018-05-28T10:04:19Z")

</div>

Thank Timrose,

It would be great if all of those feature are complete and release.

I tried this implementation before and realized that I couldn't change the filter content in the x-axis to the customized text ( x-axis show "isRegistered" instead of "status.IsRegistered:true").

Now I try with group bar chart and have some limitation, if I cannot resolve it until tomorrow i will post another topic to seek for help.

Thank you very much,  
Thomas.

---

<div class="post-metadata">

**Author:** ![timroes](https://sea2.discourse-cdn.com/elastic/user_avatar/discuss.elastic.co/timroes/32/19712_2.png) [@timroes](https://discuss.elastic.co/u/timroes)\
**Post date:** [May 28, 2018, 10:38am UTC](https://discuss.elastic.co/t/how-to-display-aggregations-results-in-bar-chart-with-vega/133409/7 "2018-05-28T10:38:23Z")

</div>

Actually you can change the label of every filter, by clicking on the small tag icon above the filter you are creating (beside the remove icon). That way you have the chance to specify a different label for that filter.

Cheers,  
Tim

---

<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:** [June 25, 2018, 10:38am UTC](https://discuss.elastic.co/t/how-to-display-aggregations-results-in-bar-chart-with-vega/133409/8 "2018-06-25T10:38:25Z")

</div>

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