# Histogramme grouped by modalities and sum of modalities kibana

**URL:** <https://discuss.elastic.co/t/histogramme-grouped-by-modalities-and-sum-of-modalities-kibana/218609>\
**Category:** Kibana\
**Tags:** vega\
**Created:** [February 10, 2020, 2:34pm UTC](https://discuss.elastic.co/t/histogramme-grouped-by-modalities-and-sum-of-modalities-kibana/218609 "2020-02-10T14:34:40Z")\
**Posts on this page:** 12\
**Page:** 1

<div class="post-metadata">

**Author:** ![Alexxxman1](https://avatars.discourse-cdn.com/v4/letter/a/ad7895/32.png) [@Alexxxman1](https://discuss.elastic.co/u/Alexxxman1)\
**Post date:** [February 10, 2020, 2:34pm UTC](https://discuss.elastic.co/t/histogramme-grouped-by-modalities-and-sum-of-modalities-kibana/218609/1 "2020-02-10T14:34:40Z")

</div>

Hello, I want to reproduce an analysis like that.

 ![bar-chart](https://us1.discourse-cdn.com/elastic/original/3X/8/b/8b54f3015a94621031c7dd9bbf154fb4575eacb6.png)

I want to reproduce an analysis with the vega or vega-lite kibana plugin. I would like to associate the total of the sites each day. Here is my vega code. If possible associate an interactive legend with a multiple selection.

```
Here is the code I want to transform

```

##############################################################

```auto
{

  "$schema": "https://vega.github.io/schema/vega/v4.json",

  "width": 300,

  "height": 240,

  "padding": 5,

 "data": [

{

"name": "table",

"values": [

{"jour":"A", "site":0, "nb_passage":0.1},

{"jour":"A", "site":1, "nb_passage":0.6},

{"jour":"A", "site":2, "nb_passage":0.9},

{"jour":"A", "site":3, "nb_passage":0.4},

{"jour":"B", "site":0, "nb_passage":0.7},

{"jour":"B", "site":1, "nb_passage":0.2},

{"jour":"B", "site":2, "nb_passage":1.1},

{"jour":"B", "site":3, "nb_passage":0.8},

{"jour":"C", "site":0, "nb_passage":0.6},

{"jour":"C", "site":1, "nb_passage":0.1},

{"jour":"C", "site":2, "nb_passage":0.2},

{"jour":"C", "site":3, "nb_passage":0.7}

],

"transform": [

{ "type": "joinaggregate",

"fields": ["np_passage"],

"ops": ["sum"],

"as": ["m"]

},

{"type":"formula", "expr": "datum.nb_passage", "as":"nb_passage"},

{"type":"formula", "expr": "datum.jour", "as": "jour"}

]

}

],

"scales": [

{

"name": "xscale",

"type": "band",

"domain": {"data": "table", "field": "jour"},

"range": "width",

"padding": 0.2

},

{

"name": "yscale",

"type": "linear",

"domain": {"data": "table", "field": "nb_passage"},

"range": "height",

"round": true,

"zero": true,

"nice": true

},

{

"name": "color",

"type": "ordinal",

"domain": {"data": "table", "field": "site"},

"range": {"scheme": "category20"}

}

],

"axes": [

{"orient": "left", "scale": "yscale", "tickSize": 6, "labelPadding": 4, "zindex": 1},

{"orient": "bottom", "scale": "xscale"}

],

"marks": [

{

"type": "group",

"clip": true,

"foreground" : false,

"from": {

"facet": {

"data": "table",

"name": "facet",

"groupby": ["jour"]

}

},

"encode": {

"enter": {

"x": {"scale": "xscale", "field": "jour"}

}

},

"signals": [

{"name": "width", "update": "bandwidth('xscale')"}

],

"scales": [

{

"name": "pos",

"type": "band",

"range": "width",

"domain": {"data": "facet", "field": "site"}

}

],

"marks": [

{

"name": "bars",

"from": {"data": "facet"},

"type": "rect",

"encode": {

"enter": {

"x": {"scale": "pos", "field": "site"},

"width": {"scale": "pos", "band": 1},

"y": {"scale": "yscale", "field": "nb_passage"},

"y2": {"scale": "yscale", "value": 0},

"fill": {"scale": "color", "field": "site"}

}

}

},

{

"type": "text",

"from": {"data": "bars"},

"encode": {

"enter": {

"y": {"field": "y", "offset": -4},

"x": {"field": "x", "offset": {"field": "width", "mult": 0.3}},

"fill": [

{"value": "black"}

],

"align": {"value": "left"},

"baseline": {"value": "middle"},

"text": {"field": "datum.nb_passage"},

"angle":{"value": -55},

"fontSize": {"value": 10}

}

}

}

]

}

]

}

```

Thank you

---

<div class="post-metadata">

**Author:** ![wylie](https://sea2.discourse-cdn.com/elastic/user_avatar/discuss.elastic.co/wylie/32/81794_2.png) [@wylie](https://discuss.elastic.co/u/wylie)\
**Post date:** [February 10, 2020, 2:47pm UTC](https://discuss.elastic.co/t/histogramme-grouped-by-modalities-and-sum-of-modalities-kibana/218609/2 "2020-02-10T14:47:41Z")

</div>

I'm not sure I understand your question. What have you tried, and what is not working?

---

<div class="post-metadata">

**Author:** ![Alexxxman1](https://avatars.discourse-cdn.com/v4/letter/a/ad7895/32.png) [@Alexxxman1](https://discuss.elastic.co/u/Alexxxman1)\
**Post date:** [February 10, 2020, 3:31pm UTC](https://discuss.elastic.co/t/histogramme-grouped-by-modalities-and-sum-of-modalities-kibana/218609/3 "2020-02-10T15:31:35Z")

</div>

Excuse me for my english.

I want to create a histogram which displays the quantitative variables "nb\_passage" of "sites" 0, 1, 2, 3 combined with the total amount for each "jour" modality: "A", "B" and "C".

---

<div class="post-metadata">

**Author:** ![wylie](https://sea2.discourse-cdn.com/elastic/user_avatar/discuss.elastic.co/wylie/32/81794_2.png) [@wylie](https://discuss.elastic.co/u/wylie)\
**Post date:** [February 10, 2020, 3:47pm UTC](https://discuss.elastic.co/t/histogramme-grouped-by-modalities-and-sum-of-modalities-kibana/218609/4 "2020-02-10T15:47:18Z")

</div>

Okay, I now see what you are trying to do. I see that you have tried doing this in Vega. Can you be a bit more specific about the part you need help with?

---

<div class="post-metadata">

**Author:** ![Alexxxman1](https://avatars.discourse-cdn.com/v4/letter/a/ad7895/32.png) [@Alexxxman1](https://discuss.elastic.co/u/Alexxxman1)\
**Post date:** [February 11, 2020, 10:08am UTC](https://discuss.elastic.co/t/histogramme-grouped-by-modalities-and-sum-of-modalities-kibana/218609/5 "2020-02-11T10:08:43Z")

</div>

Thank you for your interest on topic. First, I would like to make a dynamic aggregate which calculates the sum of the sites then combine the sum of "nb\_passage" and "nb\_passage" for each site. how to do it without adding by hand? I mean by dynamic computes fields. After, make a dynamic legend. do you have an idea? Thank you.

---

<div class="post-metadata">

**Author:** ![wylie](https://sea2.discourse-cdn.com/elastic/user_avatar/discuss.elastic.co/wylie/32/81794_2.png) [@wylie](https://discuss.elastic.co/u/wylie)\
**Post date:** [February 11, 2020, 4:01pm UTC](https://discuss.elastic.co/t/histogramme-grouped-by-modalities-and-sum-of-modalities-kibana/218609/6 "2020-02-11T16:01:50Z")

</div>

It is hard to help you without knowing:

- What have you tried?
- What data do you have to work with?

Or any other details that might be relevant.

---

<div class="post-metadata">

**Author:** ![Alexxxman1](https://avatars.discourse-cdn.com/v4/letter/a/ad7895/32.png) [@Alexxxman1](https://discuss.elastic.co/u/Alexxxman1)\
**Post date:** [February 26, 2020, 1:45pm UTC](https://discuss.elastic.co/t/histogramme-grouped-by-modalities-and-sum-of-modalities-kibana/218609/7 "2020-02-26T13:45:52Z")

</div>

Hi,

What I tried, you got it by my code posted for the topic.  
The data can be found in the posted vega script.  
My difficulty is to calculate the sum of the "nb-passage" grouped by the variable "day".

At the end, I want to have a histogram which combines for each "day", the "nb\_passage" by "site" and the sum of "nb\_passage" for all "site".

---

<div class="post-metadata">

**Author:** ![Alexxxman1](https://avatars.discourse-cdn.com/v4/letter/a/ad7895/32.png) [@Alexxxman1](https://discuss.elastic.co/u/Alexxxman1)\
**Post date:** [February 26, 2020, 1:51pm UTC](https://discuss.elastic.co/t/histogramme-grouped-by-modalities-and-sum-of-modalities-kibana/218609/8 "2020-02-26T13:51:40Z")

</div>

here is my vega script that I had to do,

##############################################################

{

"$schema": "[https://vega.github.io/schema/vega/v4.json](https://vega.github.io/schema/vega/v4.json)",

"width": 300,

"height": 240,

"padding": 5,

"data": [

{

"name": "table",

"values": [

{"jour":"A", "site":0, "nb\_passage":0.1},

{"jour":"A", "site":1, "nb\_passage":0.6},

{"jour":"A", "site":2, "nb\_passage":0.9},

{"jour":"A", "site":3, "nb\_passage":0.4},

{"jour":"B", "site":0, "nb\_passage":0.7},

{"jour":"B", "site":1, "nb\_passage":0.2},

{"jour":"B", "site":2, "nb\_passage":1.1},

{"jour":"B", "site":3, "nb\_passage":0.8},

{"jour":"C", "site":0, "nb\_passage":0.6},

{"jour":"C", "site":1, "nb\_passage":0.1},

{"jour":"C", "site":2, "nb\_passage":0.2},

{"jour":"C", "site":3, "nb\_passage":0.7}

],

"transform": [

{ "type": "joinaggregate",

"fields": ["np\_passage"],

"ops": ["sum"],

"as": ["m"]

},

{"type":"formula", "expr": "datum.nb\_passage", "as":"nb\_passage"},

{"type":"formula", "expr": "datum.jour", "as": "jour"}

]

}

],

"scales": [

{

"name": "xscale",

"type": "band",

"domain": {"data": "table", "field": "jour"},

"range": "width",

"padding": 0.2

},

{

"name": "yscale",

"type": "linear",

"domain": {"data": "table", "field": "nb\_passage"},

"range": "height",

"round": true,

"zero": true,

"nice": true

},

{

"name": "color",

"type": "ordinal",

"domain": {"data": "table", "field": "site"},

"range": {"scheme": "category20"}

}

],

"axes": [

{"orient": "left", "scale": "yscale", "tickSize": 6, "labelPadding": 4, "zindex": 1},

{"orient": "bottom", "scale": "xscale"}

],

"marks": [

{

"type": "group",

"clip": true,

"foreground" : false,

"from": {

"facet": {

"data": "table",

"name": "facet",

"groupby": ["jour"]

}

},

"encode": {

"enter": {

"x": {"scale": "xscale", "field": "jour"}

}

},

"signals": [

{"name": "width", "update": "bandwidth('xscale')"}

],

"scales": [

{

"name": "pos",

"type": "band",

"range": "width",

"domain": {"data": "facet", "field": "site"}

}

],

"marks": [

{

"name": "bars",

"from": {"data": "facet"},

"type": "rect",

"encode": {

"enter": {

"x": {"scale": "pos", "field": "site"},

"width": {"scale": "pos", "band": 1},

"y": {"scale": "yscale", "field": "nb\_passage"},

"y2": {"scale": "yscale", "value": 0},

"fill": {"scale": "color", "field": "site"}

}

}

},

{

"type": "text",

"from": {"data": "bars"},

"encode": {

"enter": {

"y": {"field": "y", "offset": -4},

"x": {"field": "x", "offset": {"field": "width", "mult": 0.3}},

"fill": [

{"value": "black"}

],

"align": {"value": "left"},

"baseline": {"value": "middle"},

"text": {"field": "datum.nb\_passage"},

"angle":{"value": -55},

"fontSize": {"value": 10}

}

}

}

]

}

]

}

################################################################  
In this script you have the data I want to work on.

"data": [

{

"name": "table",

"values": [

{"jour":"A", "site":0, "nb\_passage":0.1},

{"jour":"A", "site":1, "nb\_passage":0.6},

{"jour":"A", "site":2, "nb\_passage":0.9},

{"jour":"A", "site":3, "nb\_passage":0.4},

{"jour":"B", "site":0, "nb\_passage":0.7},

{"jour":"B", "site":1, "nb\_passage":0.2},

{"jour":"B", "site":2, "nb\_passage":1.1},

{"jour":"B", "site":3, "nb\_passage":0.8},

{"jour":"C", "site":0, "nb\_passage":0.6},

{"jour":"C", "site":1, "nb\_passage":0.1},

{"jour":"C", "site":2, "nb\_passage":0.2},

{"jour":"C", "site":3, "nb\_passage":0.7}

],

---

<div class="post-metadata">

**Author:** ![wylie](https://sea2.discourse-cdn.com/elastic/user_avatar/discuss.elastic.co/wylie/32/81794_2.png) [@wylie](https://discuss.elastic.co/u/wylie)\
**Post date:** [February 26, 2020, 3:19pm UTC](https://discuss.elastic.co/t/histogramme-grouped-by-modalities-and-sum-of-modalities-kibana/218609/9 "2020-02-26T15:19:45Z")

</div>

The best I can do is point out this blog post with a bunch of Vega examples: [https://www.elastic.co/blog/custom-vega-visualizations-in-kibana](https://www.elastic.co/blog/custom-vega-visualizations-in-kibana)

---

<div class="post-metadata">

**Author:** ![Alexxxman1](https://avatars.discourse-cdn.com/v4/letter/a/ad7895/32.png) [@Alexxxman1](https://discuss.elastic.co/u/Alexxxman1)\
**Post date:** [February 26, 2020, 3:32pm UTC](https://discuss.elastic.co/t/histogramme-grouped-by-modalities-and-sum-of-modalities-kibana/218609/10 "2020-02-26T15:32:04Z")

</div>

Thanks for the link, I have already explored this link. The difficulty lies in the transformation of the data to have the histogram

---

<div class="post-metadata">

**Author:** ![Alexxxman1](https://avatars.discourse-cdn.com/v4/letter/a/ad7895/32.png) [@Alexxxman1](https://discuss.elastic.co/u/Alexxxman1)\
**Post date:** [February 26, 2020, 3:35pm UTC](https://discuss.elastic.co/t/histogramme-grouped-by-modalities-and-sum-of-modalities-kibana/218609/11 "2020-02-26T15:35:45Z")

</div>

![histo elastic sum1](https://us1.discourse-cdn.com/elastic/original/3X/f/2/f2a003df752296c1244d97a97d8e541958e0721c.jpeg)

---

<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:** [March 25, 2020, 3:35pm UTC](https://discuss.elastic.co/t/histogramme-grouped-by-modalities-and-sum-of-modalities-kibana/218609/12 "2020-03-25T15:35:50Z")

</div>

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