Vega graph

Elastic Stack Kibana
1

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

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

2

@nyuriks - can you please help here ?

Thanks
Rashmi

3

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