Create X Axis percentage chart of total

[markus_buchner]

I am struggling getting used to kibana charting - or its not possible at all. I have a really simple index structure like:

RequestId: 1234
Duration(in seconds): 1,3

What I want (have to) visualize is a percentage bucket on X Axis
-> 1% of total requests (within selected timeframe) are within x seconds
-> 2 % of total requests (within selected timeframe) are within x seconds
-> 2 % of total requests (within selected timeframe) are within x seconds
-> ...
-> 98 % of total requests (within selected timeframe) are within x seconds
-> 99 % of total requests (within selected timeframe) are within x seconds

Here is an example chart in Excel:

Could you give me a hint how I can achieve this? I am also okay if this is only possible on Y Axis ...

Please Help - Thanks Max

[flash1293 (Joe Reuter)]

Hi @markus_buchner,

This is indeed not easy to achieve with the current tooling. Elasticsearch is able to provide the data using the percentiles aggregation.

But in Kibana you can't use this as an x axis aggregation. You can get close by defining the percentiles you want to see (0, 2, 4, 6, 8, ...) as a y axis value and using an unstacked chart like in the screenshots below:

You can add a threshold line as shown in the screenshots, but just a single one with a static value (e.g. average won't work at the moment).

The downside of this is that the percentage labels are not shown on the x axis, only via color coding and on hovering a bar.

If you want to get closer to your excel screenshot, you can look into vega charting. It's much more flexible but there is a steep learning curve.

[markus_buchner]

Thanks very much for your input - it helped me a lot and got me one step closer!

Here is my chart with all the details - probably it is also interesting for someone else ...

If I have time I will play around with vega and post my findings

Thanks Max

[markus_buchner]

Got it working now with vega chart - here my code and the chart:

{
  $schema: https://vega.github.io/schema/vega-lite/v2.json
  title: SLA percentile evaluation

  // Define the data source
  data: {
    url: {
      %context%: true
      %timefield%: @timestamp
      index: logstash-xcb-db-sec-sla-performance
      body: {
        "aggs":{
        	"percent-percentiles":{
        		"percentiles":{
        			"field":"total_duration",
        			"percents":[1,2,3,4,5,6,7,8,9,10,11,12,13,14,15,16,17,18,19,20,21,22,23,24,25,26,27,28,29,30,31,32,33,34,35,36,37,38,39,40,41,42,43,44,45,46,47,48,49,50,51,52,53,54,55,56,57,58,59,60,61,62,63,64,65,66,67,68,69,70,71,72,73,74,75,76,77,78,79,80,81,82,83,84,85,86,87,88,89,90,91,92,93,94,95,96,97,98,99],
        			"keyed":false
        		}
        	}
        }
        // Speed up the response by only including aggregation results
        size: 0
      }
    }
    format: {property: "aggregations.percent-percentiles.values"},
  },
transform: [
  {
    "calculate": "0.9",
    "as": "sla1"
  },
  {
    "calculate": "1.4",
    "as": "sla2"
  }
],

"layer": [
{
  mark: bar
  encoding: {
    x: {
      field: key
      type: quantitative
      axis: {title: "Percentiles", tickMinStep: 1}
    },
    y: {
      field: value
      type: quantitative
      axis: {title: "Seconds"}
    },
    "tooltip": [
              {
                "field": "key",
                "type": "quantitative"
              },
              {
                "field": "value",
                "type": "quantitative"
              }
            ],
    "color": {"value": "#008B8B"}
  }
},
{
  "mark": "rule",
  "encoding": {
    "y": {
      "aggregate": "mean",
      "field": "value",
      "type": "quantitative"
    },
    "color": {"value": "gray"},
    "size": {"value": 3},
    "tooltip": [{
      "aggregate": "mean",
      "field": "value",
      "type": "quantitative"
    }]
  }
},
{
  "mark": "rule",
  "encoding": {
    "y": {
      "aggregate": "mean",
      "field": "sla1",
      "type": "quantitative"
    },
    "color": {"value": "orange"},
    "size": {"value": 3},
    "tooltip": [{
      "aggregate": "mean",
      "field": "sla1",
      "type": "quantitative"
    }]
  } 
},
{
  "mark": "rule",
  "encoding": {
    "y": {
      "aggregate": "mean",
      "field": "sla2",
      "type": "quantitative"
    },
    "color": {"value": "firebrick"},
    "size": {"value": 3},
    "tooltip": [{
      "aggregate": "mean",
      "field": "sla2",
      "type": "quantitative"
    }]
  }
}]
}

The chart:

Greetings Max