# Sum up multi Vega graphs in one

**URL:** <https://discuss.elastic.co/t/sum-up-multi-vega-graphs-in-one/266867>\
**Category:** Kibana\
**Created:** [March 10, 2021, 8:57pm UTC](https://discuss.elastic.co/t/sum-up-multi-vega-graphs-in-one/266867 "2021-03-10T20:57:14Z")\
**Posts on this page:** 7\
**Page:** 1

<div class="post-metadata">

**Author:** ![bab](https://sea2.discourse-cdn.com/elastic/user_avatar/discuss.elastic.co/bab/32/86201_2.png) [@bab](https://discuss.elastic.co/u/bab)\
**Post date:** [March 10, 2021, 8:57pm UTC](https://discuss.elastic.co/t/sum-up-multi-vega-graphs-in-one/266867/1 "2021-03-10T20:57:14Z")

</div>

Hi all,

I've done several Vega Timeline visualizations and now I want all of them to be summarized in a one single diagram instead of individually and with different colors, like this example her:  
 ![image](https://us1.discourse-cdn.com/elastic/original/3X/e/d/ede2d5fbd924f504af65a3df96d5efbefb3e4bfa.png)

here are a few of my visualizations :

 ![image](https://us1.discourse-cdn.com/elastic/original/3X/e/9/e9020455c748d8b5ac8b12ad1ddc73399dcff96e.png)

code for first vis:

```
{
  $schema: https://vega.github.io/schema/vega-lite/v2.json
  data: {
# URL object is a context-aware query to Elasticsearch
    url: {
      %context%: true
      %timefield%: Date
      index: index_tev_test
      body: {
        size: 1000
        _source: [
          Date
          SIL1
        ]
      }
    }
# We only need the content of hits.hits array
    format: {
      property: hits.hits
    }
  }
  transform: [
    {
      calculate: toDate(datum._source['Date'])
      as: time
    }
  ]
#Parse timestamp into a javascript date value

  mark: {
    type: line
    point: true
  }
  encoding: {
    x: {
      //timeUnit: day
      field: _source.Date
      type: n
      sort: 0
      axis: {
        title: Date
      }
    }
    y: {
      field: _source.SIL1
      type: "nominal" //sort :0
      axis: {
        title: SIL1 Uhrzeiten
      }
    }
    order: {
      field: Date
    }
  }
}

```

code for second vis:

```
  {
  $schema: https://vega.github.io/schema/vega-lite/v2.json
  data: {
# URL object is a context-aware query to Elasticsearch
    url: {
      %context%: true
      %timefield%: Date
      index: index_tev_test
      body: {
        size: 1000
        _source: [
          Date
          TGW #102_start
        ]
      }
    }
# We only need the content of hits.hits array
    format: {
      property: hits.hits
    }
  }
  transform: [
    {
      calculate: toDate(datum._source['Date'])
      as: time
    }
  ]
#Parse timestamp into a javascript date value

  mark: {
    type: line
    point: true
  }
  encoding: {
    x: {
      //timeUnit: day
      field: _source.Date
      type: "n" 
      sort:0
             axis: {
        title: Date
      }
      
    }
    y: {
      field: _source.TGW #102_start
      type: "nominal" //sort :0
             axis: {
        title: TGW #102_start Uhrzeiten
      }
    }
      "order": {"field": "Date"}
  }
}
```

---

<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:** [March 10, 2021, 10:18pm UTC](https://discuss.elastic.co/t/sum-up-multi-vega-graphs-in-one/266867/2 "2021-03-10T22:18:12Z")

</div>

Since your query appears to be almost-identical in both of these, you can combine both visualizations into a single chart. Combine the `_source` fields so that your query contains all the same data, and then you will need to use [layers](https://vega.github.io/vega-lite/docs/layer.html) in Vega-Lite. I'm only modifying the part underneath your comment.

```auto
  mark: {
    type: line
    point: true
  }
  encoding: {
    x: {
      //timeUnit: day
      field: _source.Date
      type: "n" 
      sort:0
             axis: {
        title: Date
      }
      
    }
    // Notice that there is no Y encoding here
    order: {
      field: "Date"
    }
  }

  layer: [
    {
      encoding: {
        y: {
          field: _source.TGW #102_start
          type: "nominal"
          axis: {
            title: Shared title
          }
        }
        color: {
          value: 'red'
        }
      }
    },
    {
      encoding: {
        y: {
          field: _source.SIL1
          type: "nominal"
          axis: {
            title: Shared title
          }
        }
        color: {
          value: 'blue'
        }
      }
    },
  ]

```

---

<div class="post-metadata">

**Author:** ![bab](https://sea2.discourse-cdn.com/elastic/user_avatar/discuss.elastic.co/bab/32/86201_2.png) [@bab](https://discuss.elastic.co/u/bab)\
**Post date:** [March 11, 2021, 8:15am UTC](https://discuss.elastic.co/t/sum-up-multi-vega-graphs-in-one/266867/3 "2021-03-11T08:15:45Z")

</div>

Thanks @wylie , i modified my code like you said but it mention that some thing is messing:

 ![image](https://us1.discourse-cdn.com/elastic/original/3X/4/6/46b9c4d8889fd6c3637b7896b7f9ba9678b3b1ac.png)

```
{
  $schema: https://vega.github.io/schema/vega-lite/v2.json
  data: {
# URL object is a context-aware query to Elasticsearch
    url: {
      %context%: true
      %timefield%: Date
      index: index_tev_test
      body: {
        size: 4000
        _source: [
          Date
          Basis
          FT1
        ]
      }
    }
# We only need the content of hits.hits array
    format: {
      property: hits.hits
    }
  }
  transform: [
    {
      calculate: toDate(datum._source['Date'])
      as: time
    }
  ]
#Parse timestamp into a javascript date value

  mark: {
    type: line
    point: true
  }
  encoding: {
    x: {
      //timeUnit: day
      field: _source.Date
      type: n
      sort: 0
      axis: {
        title: Date
      }
    }
    order: {
      field: Date
    }
  }
  layer: [
    {
      encoding: {
        y: {
          field: _source.Basis
          type: nominal
          axis: {
            title: Shared title
          }
        }
        color: {
          value: red
        }
      }
    }
    {
      encoding: {
        y: {
          field: _source.FT1
          type: nominal
          axis: {
            title: Shared title
          }
        }
        color: {
          value: blue
        }
      }
    }
  ]
}
```

---

<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:** [March 11, 2021, 2:59pm UTC](https://discuss.elastic.co/t/sum-up-multi-vega-graphs-in-one/266867/4 "2021-03-11T14:59:13Z")

</div>

Oh, you need to copy+paste the `mark` section into each layer. That's what the error says.

---

<div class="post-metadata">

**Author:** ![bab](https://sea2.discourse-cdn.com/elastic/user_avatar/discuss.elastic.co/bab/32/86201_2.png) [@bab](https://discuss.elastic.co/u/bab)\
**Post date:** [March 11, 2021, 3:06pm UTC](https://discuss.elastic.co/t/sum-up-multi-vega-graphs-in-one/266867/5 "2021-03-11T15:06:51Z")

</div>

Great @wylie , it's work, thank you very much

 ![image](https://us1.discourse-cdn.com/elastic/original/3X/e/6/e6a619e0ce2e1958205b8fafcf5af9274e01efa1.png)

i only need now to give names for each line on the right side of the diagram like below:

![image](https://us1.discourse-cdn.com/elastic/original/3X/a/c/ac670c9458e5d2d4576ad49c23a7b51703355781.png)

used code:

```
{
  "$schema": "https://vega.github.io/schema/vega-lite/v4.json",
  "data": {
    "url": {
      "%context%": true,
      "%timefield%": "Date",
      "index": "index_tev_test",
      "body": {"size": 1000, "_source": ["Date", "Basis", "FT1", "FT2", "FT3"]}
    },
    "format": {"property": "hits.hits"}
  },
  "mark": {"type": "line", "point": true},
  "encoding": {
    "x": {
      "field": "_source.Date",
      "type": "n",
      "sort": 0,
      "axis": {"title": "Date"}
    },
    "order": {"field": "Date"}
  },
  "layer": [
    {
      "mark": {"type": "line", "point": true},
      "encoding": {
        "y": {
          "field": "_source.FT1",
          "type": "nominal",
          "axis": {"title": "Time"}
        },
        "color": {"value": "red"}
      }
    },
    {
      "mark": {"type": "line", "point": true},
      "encoding": {
        "y": {
          "field": "_source.FT2",
          "type": "nominal",
          "axis": {"title": "Time"}
        },
        "color": {"value": "black"}
      }
    },
    {
      "mark": {"type": "line", "point": true},
      "encoding": {
        "y": {
          "field": "_source.FT3",
          "type": "nominal",
          "axis": {"title": "Time"}
        },
        "color": {"value": "green"}
      }
    },
    {
      "mark": {"type": "line", "point": true},
      "encoding": {
        "y": {
          "field": "_source.Basis",
          "type": "nominal",
          "axis": {"title": "Time"}
        },
        "color": {"value": "blue"}
      }
    }
  ]
}
```

---

<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:** [March 11, 2021, 3:41pm UTC](https://discuss.elastic.co/t/sum-up-multi-vega-graphs-in-one/266867/6 "2021-03-11T15:41:00Z")

</div>

I'm not entirely sure how to do that. I'm not sure if it's controlled by [axis](https://vega.github.io/vega-lite/docs/axis.html), [legend](https://vega.github.io/vega-lite/docs/legend.html), or [scale](https://vega.github.io/vega-lite/docs/scale.html) in Vega-Lite.

---

<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:** [April 8, 2021, 3:41pm UTC](https://discuss.elastic.co/t/sum-up-multi-vega-graphs-in-one/266867/7 "2021-04-08T15:41:35Z")

</div>

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