# Scatter Plot with multiple Y values for each X using VEGA

**URL:** <https://discuss.elastic.co/t/scatter-plot-with-multiple-y-values-for-each-x-using-vega/205014>\
**Category:** Kibana\
**Created:** [October 24, 2019, 8:00am UTC](https://discuss.elastic.co/t/scatter-plot-with-multiple-y-values-for-each-x-using-vega/205014 "2019-10-24T08:00:01Z")\
**Posts on this page:** 3\
**Page:** 1

<div class="post-metadata">

**Author:** ![newkate12](https://sea2.discourse-cdn.com/elastic/user_avatar/discuss.elastic.co/newkate12/32/45037_2.png) [@newkate12](https://discuss.elastic.co/u/newkate12)\
**Post date:** [October 24, 2019, 8:00am UTC](https://discuss.elastic.co/t/scatter-plot-with-multiple-y-values-for-each-x-using-vega/205014/1 "2019-10-24T08:00:02Z")

</div>

Hi I have a question visualizing multiple y values for each x in vega.  
In case of simple x,y data like this (one data per one timestamp)

| timestamp | tag\_value |
| --- | --- |
| 2019-10-24 10:00:00 | 10.9 |
| 2019-10-24 10:0:01 | 11.0 |

I could easily draw the scatter plot using this vega script,

```
{
  $schema: https://vega.github.io/schema/vega-lite/v2.json
  data: {
    # URL object is a context-aware query to Elasticsearch
    url: {
      # The %-enclosed keys are handled by Kibana to modify the query
      # before it gets sent to Elasticsearch. Context is the search
      # filter as shown above the dashboard. Timefield uses the value 
      # of the time picker from the upper right corner.
      %context%: true
      %timefield%: @timestamp
      index: vega_test_data
      body: {
        size: 10000
        _source: ["@timestamp", "TAG_VALUE"]
      }
    }
    # We only need the content of hits.hits array
    format: {property: "hits.hits"}
  }
  transform: [
    {calculate: "toDate(datum._source['@timestamp'])", as: "time"}
  ]
  mark: point
  encoding: {
    x: {field: "time"
        type: "temporal"
        axis: {title: "Timestamp"}
        }
    y: {field: "_source.TAG_VALUE"
        type: "quantitative"
        axis : {title : "Tag Value"}
        }
  }
}

```

But, my y axis data has multiple values, so it is array type by each timestmap(x value)  
For example,

| timestamp | tag\_value |
| --- | --- |
| 2019-10-24 10:00:00 | [10.9, 11.0, 10.4 .....10.2] |
| 2019-10-24 10:0:01 | [10.7, 11.1, 10.5 .....12.2] |

How can I draw multiple y values per x using vega?(The y values are array types per each x)

---

<div class="post-metadata">

**Author:** ![nyuriks](https://sea2.discourse-cdn.com/elastic/user_avatar/discuss.elastic.co/nyuriks/32/26171_2.png) [@nyuriks](https://discuss.elastic.co/u/nyuriks)\
**Post date:** [October 24, 2019, 5:27pm UTC](https://discuss.elastic.co/t/scatter-plot-with-multiple-y-values-for-each-x-using-vega/205014/2 "2019-10-24T17:27:00Z")

</div>

You need to flatten your data, e.g. convert

| timestamp | tag\_value |
| --- | --- |
| 2019-10-24 10:00:00 | [10.9, 11.0, 10.4 .....10.2] |
| 2019-10-24 10:0:01 | [10.7, 11.1, 10.5 .....12.2] |

to a flat table

| timestamp | tag\_value |
| --- | --- |
| 2019-10-24 10:00:00 | 10.9 |
| 2019-10-24 10:00:00 | 11.0 |
| 2019-10-24 10:00:00 | 10.4 |
| ... | ... |
| 2019-10-24 10:00:00 | 10.2 |
| 2019-10-24 10:0:01 | 10.7 |
| 2019-10-24 10:0:01 | 11.1 |
| ... | ... |

I saw that Vega-Lite has [flatten transform](https://vega.github.io/vega-lite/docs/flatten.html), but I don't know which version added that, and if Kibana actually supports it. If it doesn't, you may have to switch to Vega and use [flatten transform](https://vega.github.io/vega/docs/transforms/flatten/) there (Kibana does support it).

---

<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:** [November 21, 2019, 5:27pm UTC](https://discuss.elastic.co/t/scatter-plot-with-multiple-y-values-for-each-x-using-vega/205014/3 "2019-11-21T17:27:13Z")

</div>

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