Not able to display percentage in pie chart creating in vega

Elastic Stack Kibana
1 
{
 "$schema": "https://vega.github.io/schema/vega-lite/v4.json",
  "description": "A simple pie chart with labels.",
  "data": {
    "values": [
  {"server_name": "server_1","status": "up","up":1,"down":0},
{"server_name": "server_1","status": "down","up":0,"down":1},
{"server_name": "server_1","status": "down","up":0,"down":1},
{"server_name": "server_1","status": "up","up":1,"down":0},
{"server_name": "server_1","status": "up","up":1,"down":0},
{"server_name": "server_1","status": "up","up":1,"down":0},
{"server_name": "server_1","status": "down","up":0,"down":1}
  
    ]
  },
    "transform": [
  {
    "aggregate": [
    {
     "op": "count",
      "field": "status",
      "as": "a_count"

    },
     {
      "op": "mean",
      "field": "up",
      "as": "a_sum"
    }
],
      "groupby": ["status"]
  },{
    "calculate": "datum.a_count*datum.a_sum" ,
    "as": "PercentOfTotal"
  }

  ],
  "encoding": {
    "theta": {"field": "PercentOfTotal", "type": "quantitative", "stack": true},
   
    "color": {"field": "status", "type": "nominal"}
  },
  "layer": [{
    "mark": {"type": "arc", "outerRadius": 80}
  }, {
    "mark": {"type": "text", "radius": 90,"fontSize":20},
    "encoding": {
      "text": {"field": "status", "type": "nominal"}
    }
  },
    {
    "mark": {"type": "text", "radius": 120,"fontSize":20},
    "encoding": {
      "text": {"field": "", "type": "nominal"},
  
      
    }
  }],
  "view": {"stroke": null}
}
2

This vega example may help you

3

{
"$schema": "https://vega.github.io/schema/vega/v4.json",
"description": "A simple pie chart with embedded data.",
"autosize":"none",
"width": 200,
"height": 200,
"data": [
{
"name": "table",
"values": [
{"downloads": 7,"product": "CEP"},
{"downloads": 2,"product": "DAS"},
{"downloads": 5,"product": "ML"},
{"downloads": 7,"product": "ESB"}
]
},
{
"name": "summary",
"source": "table",
"transform": [
{
"type": "aggregate",
"summarize": {"downloads": "sum"}
}
]
},
{
"name": "layout",
"source": "table",
"transform": [
{"type": "cross", "with": "summary"},
{"type": "pie","field": "a.downloads"},
{
"type": "formula",
"as": "percentage",
"expr": "datum.a.downloads / datum.b.sum_downloads * 100"
}
]
}
],
"scales": [
{
"name": "r",
"type": "sqrt",
"domain": {"data": "layout","field": "a.downloads"}
},
{
"name": "color",
"type": "ordinal",
"domain": {"data": "layout","field": "a.product"},
"range": {"scheme":"category10"}
}
],
"marks": [
{
"type": "arc",
"from": {"data": "layout"},
"properties": {
"update": {
"x": {"field": {"group": "width"},"mult": 0.5},
"y": {"field": {"group": "height"},"mult": 0.5},
"startAngle": {"field": "layout_start"},
"endAngle": {"field": "layout_end"},
"innerRadius": {"value": 0},
"outerRadius": {"value": 100},
"stroke": {"value": "#1"},
"fill": {"scale": "color","field": "a.product"},
"fillOpacity": {"value": 1}
},
"hover": {"fillOpacity": {"value": 0.8}}
}
},
{
"type": "text",
"from": {"data": "layout"},
"properties": {
"enter": {
"x": {"field": {"group": "width"},"mult": 0.5},
"y": {"field": {"group": "height"},"mult": 0.5},
"radius": {"value": 140},
"theta": {"field": "layout_mid"},
"fill": {"value": "#000"},
"align": {"value": "center"},
"baseline": {"value": "middle"},
"text": {
"template": "{{datum.percentage | number:'.1f'}} %"
}
}
}
}
]
}
not getting any error but blank screen is coming as output .

4

I'm not what all sure what you are trying to do but on first glace you are trying to use fields layout_start and layout_end which aren't in the data table layout. I am guessing you want startAngle and endAngle.

But in the text mark area you are looking for layout_mid which I am not sure what you need for that. In addition to that your data table has NaN as the percentage so somewhere in your transformations it's not calculating correctly.

image
image1719×875 197 KB

5

I have taken reference from this link

and trying to implement the last one (pie chart with percentage )

6

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