# Change color based on last value

**URL:** <https://discuss.elastic.co/t/change-color-based-on-last-value/287703>\
**Category:** Kibana\
**Tags:** vega\
**Created:** [October 26, 2021, 2:29pm UTC](https://discuss.elastic.co/t/change-color-based-on-last-value/287703 "2021-10-26T14:29:49Z")\
**Posts on this page:** 7\
**Page:** 1

<div class="post-metadata">

**Author:** ![Raiu](https://avatars.discourse-cdn.com/v4/letter/r/e99b99/32.png) [@Raiu](https://discuss.elastic.co/u/Raiu)\
**Post date:** [October 26, 2021, 2:29pm UTC](https://discuss.elastic.co/t/change-color-based-on-last-value/287703/1 "2021-10-26T14:29:49Z")

</div>

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.

---

<div class="post-metadata">

**Author:** ![Raiu](https://avatars.discourse-cdn.com/v4/letter/r/e99b99/32.png) [@Raiu](https://discuss.elastic.co/u/Raiu)\
**Post date:** [October 27, 2021, 3:01pm UTC](https://discuss.elastic.co/t/change-color-based-on-last-value/287703/2 "2021-10-27T15:01:07Z")

</div>

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.

```auto
"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": {
      }
    }  
  }

```

---

<div class="post-metadata">

**Author:** ![lukas](https://sea2.discourse-cdn.com/elastic/user_avatar/discuss.elastic.co/lukas/32/6812_2.png) [@lukas](https://discuss.elastic.co/u/lukas)\
**Post date:** [October 27, 2021, 4:44pm UTC](https://discuss.elastic.co/t/change-color-based-on-last-value/287703/3 "2021-10-27T16:44:01Z")

</div>

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

 ![image](https://us1.discourse-cdn.com/elastic/original/3X/1/8/1803059bfad3f45ee1ac03bf31e7eb5c4a27d978.png)

---

<div class="post-metadata">

**Author:** ![Raiu](https://avatars.discourse-cdn.com/v4/letter/r/e99b99/32.png) [@Raiu](https://discuss.elastic.co/u/Raiu)\
**Post date:** [October 27, 2021, 6:25pm UTC](https://discuss.elastic.co/t/change-color-based-on-last-value/287703/4 "2021-10-27T18:25:16Z")

</div>

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.

---

<div class="post-metadata">

**Author:** ![Raiu](https://avatars.discourse-cdn.com/v4/letter/r/e99b99/32.png) [@Raiu](https://discuss.elastic.co/u/Raiu)\
**Post date:** [November 8, 2021, 2:15pm UTC](https://discuss.elastic.co/t/change-color-based-on-last-value/287703/5 "2021-11-08T14:15:31Z")

</div>

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.

```auto
{
  "$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"}
      ]
    }
  }
}

```

---

<div class="post-metadata">

**Author:** ![Raiu](https://avatars.discourse-cdn.com/v4/letter/r/e99b99/32.png) [@Raiu](https://discuss.elastic.co/u/Raiu)\
**Post date:** [November 11, 2021, 2:08pm UTC](https://discuss.elastic.co/t/change-color-based-on-last-value/287703/6 "2021-11-11T14:08:33Z")

</div>

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.

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

```

---

<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:** [December 9, 2021, 2:08pm UTC](https://discuss.elastic.co/t/change-color-based-on-last-value/287703/7 "2021-12-09T14:08:38Z")

</div>

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