Not able to visualize percentage on pie using vega

[saumya1 (saumya)]

while doing aggregation on count of string I am getting error as nan%.

{

  "$schema": "https://vega.github.io/schema/vega-lite/v5.json",

  "description": "A simple pie chart with labels.",

  "height": 500,

  "width": 500,

  "data": {

    "values": [

      {"date": "4/15/2020", "brand": "open", "mentions": "inc1"},

      {"date": "4/7/2020", "brand": "close", "mentions": "inc2"},

      {"date": "6/29/2020", "brand": "open", "mentions": "inc3"},

      {"date": "11/7/2020", "brand": "close", "mentions": "inc4"},

      {"date": "10/10/2020", "brand": "resolved", "mentions": "inc5"},

      {"date": "10/25/2020", "brand": "pending", "mentions": "inc6"},

      {"date": "11/7/2020", "brand": "pending", "mentions": "inc7"}

      

    ]

  },

  

  "encoding": {

    "theta": {

      "field": "mentions",

      "stack": true,

      "aggregate": "count",

      "as":"tmen"

    }

  },

    "transform": [{

    "window": [{

      "op": "count",

      "field": "mentions",

      "as": "TotalTime"

    }],

    "frame": [null, null]

  },

  {

    "calculate": "datum.tmen/datum.TotalTime * 100",

    "as": "PercentOfTotal"

  }],

  "layer": [

    {

      "mark": {"type": "arc", "outerRadius": 200},

      "encoding": {

        "color": {

          "field": "brand",

          "type": "nominal",

          "legend": "true",

          "scale": {"range": "category"}

        }

      }

    },

    {

      "mark": {"type": "text", "radius": 250, "fontSize": 16},

      "encoding": {"text": {"field": "brand", "type": "nominal"}}

    },

    {

    "mark": {"type": "text", "radius": 90},

    "encoding": {

  "text": {"field": "PercentOfTotal", "type": "quantitative","aggregate":"mean","format":".2%"}

    }

  }

  ],

  "view": {"stroke": null}

}

Thanks in advance

[aaron-nimocks]

Your datum.tmen doesn't exist so you are getting not a number error. I don't know the solution because I'm not sure what you are trying to do but this the reason.

Just change datum.tmen to a number and you can see it work correctly.

[saumya1 (saumya)]

I want to visualise the brand percentage on pie
e.g, open 10% close 20% like that .
But "mentions " is the string value if m removing the transform and datum.tmen line then am getting brand count e.g,open 2,close 3.But requirement is to show percentage of brand.

[wylie (Wylie Conlon)]

You can use the Elasticsearch normalize pipeline agg to do this, or you can calculate it in vega

[saumya1 (saumya)]

Can u guide how can i utilize it into my section of code .
Thnks in advance

[wylie (Wylie Conlon)]

I copied+pasted your config into the online Vega editor and then saw some errors. One of your most fundamental issues is that you can't mix encoding and transforms: they aren't the same thing.

Since all you want is the percentage of total, you can use one of the Vega-Lite tutorials for joinaggregate:

Join Aggregate

Here's what I did:

{

  "$schema": "https://vega.github.io/schema/vega-lite/v5.json",

  "description": "A simple pie chart with labels.",

  "height": 500,

  "width": 500,

  "data": {

    "values": [

      {"date": "4/15/2020", "brand": "open", "mentions": "inc1"},

      {"date": "4/7/2020", "brand": "close", "mentions": "inc2"},

      {"date": "6/29/2020", "brand": "open", "mentions": "inc3"},

      {"date": "11/7/2020", "brand": "close", "mentions": "inc4"},

      {"date": "10/10/2020", "brand": "resolved", "mentions": "inc5"},

      {"date": "10/25/2020", "brand": "pending", "mentions": "inc6"},

      {"date": "11/7/2020", "brand": "pending", "mentions": "inc7"}

      

    ]

  },

  

  "encoding": {

    "theta": {

      "field": "mentions",

      "stack": true,

      "aggregate": "count"

    }

  },

    "transform": [{

    "window": [{

      "op": "count",

      "field": "mentions",

      "as": "TotalTime"

    }],

    "frame": [null, null]

  },

  {
    "joinaggregate": [{
      "op": "count",
      "as": "groupcount"
    }],
    "groupby": ["brand"]
  },
  {

    "calculate": "datum.groupcount/datum.TotalTime",

    "as": "PercentOfTotal"

  }],

  "layer": [

    {

      "mark": {"type": "arc", "outerRadius": 200},

      "encoding": {

        "color": {

          "field": "brand",

          "type": "nominal",

          "legend": "true",

          "scale": {"range": "category"}

        }

      }

    },

    {

      "mark": {"type": "text", "radius": 250, "fontSize": 16},

      "encoding": {"text": {"field": "brand", "type": "nominal"}}

    },

    {

    "mark": {"type": "text"},

    "encoding": {

  "text": {"field": "PercentOfTotal", "type": "quantitative","aggregate":"mean","format":".2%"}

    }

  }

  ],

  "view": {"stroke": null}

}

[saumya1 (saumya)]

this solution i have tried but not able to display individual percent of total if you can check in data 0 we are getting individual percent of total ,but while displaying it is showing either sum,count,mean but not all.
"aggregate":"count",

[wylie (Wylie Conlon)]

I'm not sure what you're asking. You already got one piece of text displaying outside each slice, you could create the display text using an expression instead of using the field.

[aaron-nimocks]

Not sure why only 2 of them are showing up. Really don't have much experience with Vega-Lite. But I think this is closer to what you are going for.

{
  "$schema": "https://vega.github.io/schema/vega-lite/v5.json",
  "description": "A simple pie chart with labels.",
  "height": 500,
  "width": 500,
  "data": {
    "values": [
      {"date": "4/15/2020", "brand": "open", "mentions": "inc1"},
      {"date": "4/7/2020", "brand": "close", "mentions": "inc2"},
      {"date": "6/29/2020", "brand": "open", "mentions": "inc3"},
      {"date": "11/7/2020", "brand": "close", "mentions": "inc4"},
      {"date": "10/10/2020", "brand": "resolved", "mentions": "inc5"},
      {"date": "10/25/2020", "brand": "pending", "mentions": "inc6"},
      {"date": "11/7/2020", "brand": "pending", "mentions": "inc7"}
    ]
  },
  "encoding": {
    "theta": {"field": "mentions", "stack": true, "aggregate": "count"}
  },
  "transform": [
    {
      "window": [{"op": "count", "field": "mentions", "as": "TotalTime"}],
      "frame": [null, null]
    },
    {
      "joinaggregate": [{"op": "count", "as": "groupcount"}],
      "groupby": ["brand"]
    },
    {"calculate": "datum.groupcount/datum.TotalTime", "as": "PercentOfTotal"}
  ],
  "layer": [
    {
      "mark": {"type": "arc", "outerRadius": 200},
      "encoding": {
        "color": {
          "field": "brand",
          "type": "nominal",
          "legend": "true",
          "scale": {"range": "category"}
        }
      }
    },
    {
      "mark": {"type": "text", "radius": 250, "fontSize": 16},
      "encoding": {"text": {"field": "brand", "type": "nominal"}}
    },
    {
      "mark": {"type": "text", "radius": 100, "fontSize": 16},
      "encoding": {
        "text": {
          "field": "PercentOfTotal",
          "type": "nominal",
          "format":".2%"
        }
      }
    }
  ],
  "view": {"stroke": null}
}

[saumya1 (saumya)]

I want to achieve the same pie chart as above with percentage ,the data set we are getting from tool using logstash, but getting error
"Cannot read property 'number' of undefined"

{

  $schema: https://vega.github.io/schema/vega-lite/v2.json
  title: { text: "pie chart  graph" , color: "Red" }

  // Define the data source
  data: {
    url: { 

      // Apply dashboard context filters when set
      %context%: true
     
      index: test123
      
      
       body: {
        // Set the size to load 10000 documents
        size: 10000,
        // Just ask for the fields we actually need for visualization
        _source: ["result.incident_state.display_value.keyword","result.number.display_value.keyword"]
      }
   }
    format: { property: "hits.hits" }
  }
  
 "encoding": {
    "theta": {"field": "datum._source.", "stack": true, "aggregate": "count"}
  },
  "transform": [
   {calculate: "datum._source.result.number.display_value.keyword", as: "result.number.display_value.keyword"},
  {calculate: "datum._source.result.incident_state.display_value.keyword", as: "result.incident_state.display_value.keyword" },
    {
      "window": [{"op": "count", "field": "result.number.display_value.keyword", "as": "TotalTime"}],
      "frame": [null, null]
    },
    {
      "joinaggregate": [{"op": "count", "as": "groupcount"}],
      "groupby": ["result.incident_state.display_value.keyword"]
    },
    {"calculate": "datum.groupcount/datum.TotalTime", "as": "PercentOfTotal"}
  ],
  "layer": [
    {
      "mark": {"type": "arc", "outerRadius": 200},
      "encoding": {
        "color": {
          "field": "result.incident_state.display_value.keyword",
          "type": "nominal",
          "legend": "true",
          "scale": {"range": "category"}
        }
      }
    },
    {
      "mark": {"type": "text", "radius": 250, "fontSize": 16},
      "encoding": {"text": {"field": "datum._source.result.incident_state.display_value.keyword", "type": "nominal"}}
    },
    {
      "mark": {"type": "text", "radius": 100, "fontSize": 16},
      "encoding": {
        "text": {
          "field": "PercentOfTotal",
          "type": "nominal",
          "format":".2%"
        }
      }
    }
  ],
  "view": {"stroke": null}

}

thanks in advance