# Vega graph

**URL:** <https://discuss.elastic.co/t/vega-graph/161058>\
**Category:** Kibana\
**Tags:** vega\
**Created:** [December 17, 2018, 12:58am UTC](https://discuss.elastic.co/t/vega-graph/161058 "2018-12-17T00:58:03Z")\
**Posts on this page:** 3\
**Page:** 1

<div class="post-metadata">

**Author:** ![f24b83985b804d90965e](https://avatars.discourse-cdn.com/v4/letter/f/46a35a/32.png) [@f24b83985b804d90965e](https://discuss.elastic.co/u/f24b83985b804d90965e)\
**Post date:** [December 17, 2018, 12:58am UTC](https://discuss.elastic.co/t/vega-graph/161058/1 "2018-12-17T00:58:03Z")

</div>

Greeting  
I use Vega-lite for Graph  
before asking, I write what I have

#. form of data  
it is data form. I import with CSV file and this is Logstash config file

```
columns => ["Time","PWM1","PWM2","PWM3","PWM4"]
mutate{convert=>["PWM1", "integer"]}
mutate{convert=>["PWM2", "integer"]}
mutate{convert=>["PWM3", "integer"]}
mutate{convert=>["PWM4", "integer"]}
date{
    match => ["Time", "yyyy-MM-dd HH:mm:ss SSS"]
    target => "Time"
}

```

#. Vega-Lite  
this is what I write, and result.

```
{
  $schema: "https://vega.github.io/schema/vega-lite/v2.json"
  mark: line
  data: {
    url: {
      %context%: true
      %timefield%: Time
      index: templog_mapp
      body: {
        size: 10000,
        _source: ["Time", "PWM1", "PWM2", "PWM3", "PWM4"]
      }
    }
    format: { property: "hits.hits" },
  }
  transform: [
    {
      calculate: "toDate(datum._source.Time)",
      as: "time"
    }
    {
      calculate: "datum._source.PWM1"
      as: "pwmCh1"
    }

    {
      calculate: "datum._source.PWM2 + (2 * 1)"
      as: "pwmCh2"
    }

    {
      calculate: "datum._source.PWM3 + (2 * 2)"
      as: "pwmCh3"
    }

    {
      calculate: "datum._source.PWM4 + (2 * 3)"
      as: "pwmCh4"
    }
  ]
  encoding: {
    x: { field: time, 
      type: temporal
      axis: { title: false }
    }
  }

  "layer": [
    {
      "mark": {
        "type": "line",
        "interpolate": "step-after"
      },
      "encoding": {
        "y": {
          "field": "pwmCh1", 
          "type": "quantitative"
        }
      }
    }
    {
      "mark": {
        "type": "line",
        "interpolate": "step-after"
      },
      "encoding": {
        "y": {"field": "pwmCh2", "type": "quantitative"},
      }
    }
    {
      "mark": {
        "type": "line",
        "interpolate": "step-after"
      },
      "encoding": {
        "y": {"field": "pwmCh3", "type": "quantitative"},
      }
    }
    {
      "mark": {
        "type": "line",
        "interpolate": "step-after"
      },
      "encoding": {
        "y": {"field": "pwmCh4", "type": "quantitative"},
      }
    }
  ]
}

```

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

and here is what I want

1. Graph color change and legend display  
I used color function but it added 'undefinded' and cannot change color

2. axis X time scale change  
I want time scale change when user Zoom in, Zoom out.

3. add variable and separate function  
in the vega code,  
{  
calculate: "datum.\_source.PWM2 + (2 \* 1)"  
as: "pwmCh2"  
}  
I want change fixed number "2" to variable.  
so, separate with scroll bar or checkbox.

please help

---

<div class="post-metadata">

**Author:** ![rashmi](https://sea2.discourse-cdn.com/elastic/user_avatar/discuss.elastic.co/rashmi/32/16391_2.png) [@rashmi](https://discuss.elastic.co/u/rashmi)\
**Post date:** [December 19, 2018, 10:53pm UTC](https://discuss.elastic.co/t/vega-graph/161058/2 "2018-12-19T22:53:11Z")

</div>

@nyuriks - can you please help here ?

Thanks  
Rashmi

---

<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:** [January 16, 2019, 10:53pm UTC](https://discuss.elastic.co/t/vega-graph/161058/3 "2019-01-16T22:53:16Z")

</div>

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