# Question on Vega Circle plot

**URL:** <https://discuss.elastic.co/t/question-on-vega-circle-plot/339734>\
**Category:** Kibana\
**Tags:** vega\
**Created:** [July 31, 2023, 8:25pm UTC](https://discuss.elastic.co/t/question-on-vega-circle-plot/339734 "2023-07-31T20:25:51Z")\
**Posts on this page:** 3\
**Page:** 1

<div class="post-metadata">

**Author:** ![vkon](https://avatars.discourse-cdn.com/v4/letter/v/4da419/32.png) [@vkon](https://discuss.elastic.co/u/vkon)\
**Post date:** [July 31, 2023, 8:25pm UTC](https://discuss.elastic.co/t/question-on-vega-circle-plot/339734/1 "2023-07-31T20:25:51Z")

</div>

Hi,

I'm using Elastic 7.17 version and trying to create Circle visualization using Vega.  
I have the below sample data;

```auto
[
{"stage":"s1","indicator":"i1","score":3,"maxscore":4},
{"stage":"s1","indicator":"i1","score":1,"maxscore":4},
{"stage":"s1","indicator":"i2","score":2,"maxscore":4},
{"stage":"s1","indicator":"i2","score":0,"maxscore":4},
{"stage":"s1","indicator":"i3","score":4,"maxscore":4},
{"stage":"s1","indicator":"i3","score":4,"maxscore":4},
{"stage":"s2","indicator":"i1","score":3,"maxscore":4},
{"stage":"s2","indicator":"i1","score":1,"maxscore":4},
{"stage":"s2","indicator":"i2","score":4,"maxscore":4},
{"stage":"s2","indicator":"i2","score":0,"maxscore":4},
{"stage":"s2","indicator":"i3","score":3,"maxscore":4},
{"stage":"s2","indicator":"i3","score":0,"maxscore":4}
]

```

I'm calculating score % for each 'Stage' with some weightage for each 'Indicator' using below formula;

```auto
(sum(score,kql='indicator: i1')/sum(maxscore,kql='indicator: i1')*100*0.5)+(sum(score,kql='indicator: i2')/sum(maxscore,kql='indicator: i2')*100*0.3)+(sum(score,kql='indicator: i3')/sum(maxscore,kql='indicator: i3')*100*0.2)

So, for the able sample data, the score% will look like below;
stage1 = 25+7.5+20 = 52.5%
stage2 = 25+15+7.5 = 47.5%

```

Based on below scoring% range, I need to represent each stage as Red, Yellow and Green  
-- 0% - 50% ---\> RED  
-- 50% - 80% ---\> YELLOW  
-- 80% - 100% --\> GREEN

I'm looking to achieve as below;  
 ![Desired_Stage_Score_View](https://us1.discourse-cdn.com/elastic/original/3X/2/5/251046ac462da455f2aa6c59fda398933d809dfc.png)

Please let me know;

1. Can the Circle visualization be achieved using Vega with the Data set and Formula mentioned above?
2. Can the above score calculation formula be used in Vega as is, if so, how to achieve it (I couldn't find any documentation on the same) ?
3. Is there any sample Circle Vega code I can refer to (not the 'Arc' mark type) ?

Thanks in Advance!

---

<div class="post-metadata">

**Author:** ![vkon](https://avatars.discourse-cdn.com/v4/letter/v/4da419/32.png) [@vkon](https://discuss.elastic.co/u/vkon)\
**Post date:** [July 31, 2023, 8:29pm UTC](https://discuss.elastic.co/t/question-on-vega-circle-plot/339734/2 "2023-07-31T20:29:12Z")

</div>

Using Lens 'Metric' and 'Table' I'm able to achieve below visualizations with the formula, but, couldn't achieve the 'Circular' visualization;

 ![Achieved_Stage_Score_View](https://us1.discourse-cdn.com/elastic/original/3X/9/5/958fbdf498234fab54e255e6301981bb4577f803.png)

---

<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:** [August 28, 2023, 8:29pm UTC](https://discuss.elastic.co/t/question-on-vega-circle-plot/339734/3 "2023-08-28T20:29:27Z")

</div>

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