# Use Vega Visualization with Dynamic Data (Index)

**URL:** <https://discuss.elastic.co/t/use-vega-visualization-with-dynamic-data-index/172942>\
**Category:** Kibana\
**Tags:** vega\
**Created:** [March 19, 2019, 10:27am UTC](https://discuss.elastic.co/t/use-vega-visualization-with-dynamic-data-index/172942 "2019-03-19T10:27:38Z")\
**Posts on this page:** 4\
**Page:** 1

<div class="post-metadata">

**Author:** ![suhasgupta1](https://avatars.discourse-cdn.com/v4/letter/s/34f0e0/32.png) [@suhasgupta1](https://discuss.elastic.co/u/suhasgupta1)\
**Post date:** [March 19, 2019, 10:27am UTC](https://discuss.elastic.co/t/use-vega-visualization-with-dynamic-data-index/172942/1 "2019-03-19T10:27:38Z")

</div>

Hi All,

I am beginner in Kibana and Elasticsearch.  
When I try to use index with vegalite visualization, I am getting single bar with undefined CC\_E field instead of showing colors w.r.t. CC\_E(This is nominal field values are alphanumeric) and also I am not getting any EQP(This is alphanumeric field - Unique No. of values in this field are 7) on the x-axis.  
Here is the code snippet.  
{  
"$schema": "[https://vega.github.io/schema/vega-lite/v3.json](https://vega.github.io/schema/vega-lite/v3.json)",  
"data":  
{  
"url": {  
"%context%": true,  
"index": "vizcheck"  
},  
},  
"mark": "bar",  
"encoding":  
{  
"x":  
{  
"field": "EQP",  
"type": "nominal"  
},  
"y":  
{  
"field":"NoObj",  
"aggregate": "count",  
"type": "quantitative"  
}  
,  
"color":  
{  
"field": "CC\_E",  
"type": "nominal"  
}  
}  
}

I was looking for stacked bar graph. If any one can help I will be very thankful to you.

Thanks & Regards  
Suhas Gupta

---

<div class="post-metadata">

**Author:** ![suhasgupta1](https://avatars.discourse-cdn.com/v4/letter/s/34f0e0/32.png) [@suhasgupta1](https://discuss.elastic.co/u/suhasgupta1)\
**Post date:** [March 20, 2019, 9:54am UTC](https://discuss.elastic.co/t/use-vega-visualization-with-dynamic-data-index/172942/2 "2019-03-20T09:54:20Z")

</div>

Hi All,

I am able to find the answer and posting it here.  
{  
"$schema": "[https://vega.github.io/schema/vega-lite/v2.3.1.json](https://vega.github.io/schema/vega-lite/v2.3.1.json)",  
"autosize":  
{  
"type": "pad",  
"resize": false  
},  
"data":  
{  
"url": {  
"%context%": true,  
"index": "vizcheck"  
"body":  
{  
"aggs" : {  
"eqpt\_buckets": {  
"composite" : {  
"size": 5000,  
"sources" :  
[  
{  
"EPID":  
{"terms" :  
{  
"field": "EPID"  
}  
}  
},  
{  
"DATE":  
{"terms" :  
{"field": "DATE"  
}  
}  
},  
{  
"CC\_E":  
{"terms" :  
{"field": "CC\_E"  
}  
}  
},  
{  
"NoObj":  
{  
"terms":  
{"field": "NoObj"  
}  
}  
}  
]  
}  
}  
}  
}  
}  
"format": {property: "aggregations.eqpt\_buckets.buckets"}

```
},
  "transform": 
    [
      {"calculate": "datum.key.EPID", 
        "as": "EPID"
      },
      {"calculate": "datum.key.DATE", 
        "as": "DATE"},
      {"calculate": "datum.key.CC_E", 
      "as": "CC_E"
      },
      {"calculate": "datum.key.NoObj",
      "as": "NoObj"
      }
    ],
"mark": "bar",
 "config": 
 {
    "size": 
    {
      "height": 200,
      "width": 200
    },
}
"encoding": 
{
  "x": 
    {
        "field": "DATE",
        "type": "temporal",

    },
  "y": 
    {
        "field":"NoObj", 
        "aggregate": "sum",
        "type": "quantitative"
    }
    ,
  "color": 
    {
      "field": "CC_E", 
      "type": "nominal"
    },
  "row":
    {
      "field": "EPID",
      "type": "nominal"
    }
}

```

}

Main problem with earlier code was we need data to be formatted in the way bar graph needs. So first in the data group we are writing query to get the data and then using the same in below part of the code to draw the chart.

Thanks & Regards  
Suhas Gupta

---

<div class="post-metadata">

**Author:** ![lukas](https://sea2.discourse-cdn.com/elastic/user_avatar/discuss.elastic.co/lukas/32/6812_2.png) [@lukas](https://discuss.elastic.co/u/lukas)\
**Post date:** [March 20, 2019, 2:30pm UTC](https://discuss.elastic.co/t/use-vega-visualization-with-dynamic-data-index/172942/3 "2019-03-20T14:30:56Z")

</div>

Glad you were able to find the solution! If you don't mind, could you mark this question as resolved? Thanks!

---

<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:** [April 17, 2019, 2:31pm UTC](https://discuss.elastic.co/t/use-vega-visualization-with-dynamic-data-index/172942/4 "2019-04-17T14:31:01Z")

</div>

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