Change color based on last value

Elastic Stack Kibana
1

I'm using ELK to pull machine logs and visualize them on a dashboard so we can display how our shop is doing on a large tv. One of the things that I want to display is the current event of a machine. For readability, I want to display a color on a square based off of the last value a field had. For example, if the field had reported "ACTIVE" I want to be able to display a green square.

There are six values for the event field, and it only exists in a record when it changes. I have four machines which I can identify off of their DeviceUUID, so I will need to filter out all but one machine for each instance. I also need for the square to update whenever Kibana refreshes.

I created the square in Vega, and I want to change the fill and stroke based off of the last value of the event field. I know I need to filter by both "if the event field exists" and "DeviceUUID". However, I haven't gotten the update working, so I'm left with an empty square.

I'm extremely new to Vega, so any help would be much obliged.

2

A bit more information, I've been trying to use "test" in order to change the fill color in the "update" encoding of my square. Before that, I tried to include the test immediately after the type declaration, as below. Above the mark is the standard Vega template.

"mark":{
    "type":"square",
    "size":300000,

"fill":[
          {"test": "datum.@timestamp==='*'",
          "value":"blue"},
          {"test": "datum.Events.Execution.@@data==='STOPPED'",
          "value":"red"},
          {"test": "datum.Events.Execution.@@data==='READY'",
          "value":"blue"},
          {"test": "datum.Events.Execution.@@data==='UNAVAILABLE'",
          "value":"black"},
          {"test": "datum.Events.Execution.@@data==='PROGRAM STOP'",
          "value":"pink"},
          {"test": "datum.Events.Execution.@@data==='FEED HOLD'",
          "value":"purple"},
          {"test": "datum.Events.Execution.@@data==='INTERRUPTED'",
          "value":"yellow"},
          {"value":"gold"}
        ],

    "encode": {
      "enter": {
      },
      "update": {
      }
    }  
  }
3

Have you tried using the add a filter dialog to create these filters? These should be applied to your Vega visualization.

image
image849×336 18.6 KB

4

That gets me halfway there, but the square isn't filled with a color after the changes. I think the problem may be the "test" keywords, and either the fact I have a chain of them to determine the fill color, or their placement in the code.

When I changed the test to an always true statement, the the square remained empty.

5

Time for a quick update. I've set up my logstash so that every log will report the last event which was reported for the machine it came from. This is stored as lastEvent. I did this because I've noticed names which include periods are harder to work with in ELK. Below is my Vega code. If I remove the fill block, then it shows the default green. If I include the condition block, then it returns an empty square which I believe is a NULL fill.

{
  "$schema": "https://vega.github.io/schema/vega-lite/v5.json",
  "data": {
    "url": {
      "%context%": false,
      "%timefield%": "@timestamp",
      "index": "mtconnect*",
  },
  
  "height": "container",
  "width": "container",
  
  
  "mark":{
    "type":"rect",
    "stroke": "black",
    "fill":{
      "condition":[
          {"test": "datum['lastEvent'] === 'ACTIVE'",
          "value":"blue"},
          {"test": "datum['lastEvent'] === 'STOPPED'",
          "value":"red"},
          {"test": "datum['lastEvent'] === 'READY'",
          "value":"blue"},
          {"test": "datum['lastEvent'] === 'UNAVAILABLE'",
          "value":"black"},
          {"test": "datum['lastEvent'] === 'PROGRAM STOP'",
          "value":"yellow"},
          {"test": "datum['lastEvent'] === 'FEED HOLD'",
          "value":"purple"},
          {"test": "datum['lastEvent'] === 'INTERRUPTED'",
          "value":"pink"},
          {"value":"#7d7a00"}
      ]
    }
  }
}
6

I found out the error, and it's in how I was using multiple "if" statements. As it turns out, Vega does not currently support more than one test statement in a condition block. This is why the statement below works, and not the examples above.

{"test": "datum['lastEvent'] === 'ACTIVE' || datum['lastEvent'] === 'READY'", "value": "blue"}
7

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