# Vega-Lite problem with the visualization

**URL:** <https://discuss.elastic.co/t/vega-lite-problem-with-the-visualization/334220>\
**Category:** Kibana\
**Tags:** vega\
**Created:** [May 24, 2023, 12:31pm UTC](https://discuss.elastic.co/t/vega-lite-problem-with-the-visualization/334220 "2023-05-24T12:31:56Z")\
**Posts on this page:** 3\
**Page:** 1

<div class="post-metadata">

**Author:** ![martinez061](https://avatars.discourse-cdn.com/v4/letter/m/b19c9b/32.png) [@martinez061](https://discuss.elastic.co/u/martinez061)\
**Post date:** [May 24, 2023, 12:31pm UTC](https://discuss.elastic.co/t/vega-lite-problem-with-the-visualization/334220/1 "2023-05-24T12:31:56Z")

</div>

Hi im trying to create something similar to image below.

 ![fe22f01890fdcc187e069556f9cfa768d4e0fe19_2_1035x411](https://us1.discourse-cdn.com/elastic/original/3X/3/c/3c00b883eeb72d433aaedd15dd62e75e213db790.jpeg)

The data, that i want to visualise is  
syslog\_hostname  
syslog\_ip\_address  
syslog\_url  
syslog\_url\_status

For one destination im checking 3 website, and i want to get all url status

Firt i set the static data

```auto
{
  "$schema": "https://vega.github.io/schema/vega-lite/v4.json",
  "data": {
    
  "autosize": {
    "type": "fit",
    "contains": "padding",
    resize: true
  },
    "values": [
      {
        "syslog_ip_address": "10.1.0.",
        "syslog_url": "https://google.com",
        "syslog_hostname": "DESTINATION1",
        "syslog_status": 200
 }
    ]
  },
  "transform": [
    {
      "calculate": "if(datum.syslog_status === 200, 'Success', (datum.syslog_status >= 500 ? 'Error' : 'Warning'))",
      "as": "status_category"
    },
    {
      "aggregate": [{"op": "count", "as": "count"}],
      "groupby": ["syslog_hostname", "syslog_url", "status_category"]
    }
  ],
  
  "mark": "rect",
  "width": 60,
        "height": 20,
  "encoding": {
    "row": {"field": "syslog_hostname", "type": "nominal"},
    "column": {"field": "syslog_url", "type": "nominal"},
    "color": {
      "field": "status_category",
      "type": "nominal",
      "scale": {
        "domain": ["Success", "Error", "Warning"],
        "range": ["green", "red", "orange"]
      },
      "legend": {"title": "Status strony"}
    },
    "tooltip": [
      {"field": "syslog_hostname", "type": "nominal", "title": "DESTINATION"},
      {"field": "syslog_url", "type": "nominal", "title": "URL"},
      {"field": "status_category", "type": "nominal", "title": "STATUS"},
      {"field": "count", "type": "quantitative", "title": "COUNT"}
    ]
  }
}

```

it was working but when i tryied to set the dynamic data i got an error

```auto
  "data": {
    "url": {
      "%context%": true,
      "%timefield%": "@timestamp",
      "index": "logs-filebeat.d*",
      "body": {
        "size": 10000,
        "_source": ["@timestamp", "syslog_ip_address", "syslog_url", "syslog_status"]
      }
    },
    "format": {"property": "hits.hits"}
  },

```

I would be greatfull for help to modify this code to create the visualization similar to treemap that will display for each location status of all websites

---

<div class="post-metadata">

**Author:** ![Marta\_Bondyra](https://sea2.discourse-cdn.com/elastic/user_avatar/discuss.elastic.co/marta_bondyra/32/102122_2.png) [@Marta\_Bondyra](https://discuss.elastic.co/u/Marta_Bondyra)\
**Post date:** [June 20, 2023, 9:56am UTC](https://discuss.elastic.co/t/vega-lite-problem-with-the-visualization/334220/2 "2023-06-20T09:56:38Z")

</div>

Hello, did you solve your issue?  
What's the error message you got?

---

<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:** [July 18, 2023, 9:57am UTC](https://discuss.elastic.co/t/vega-lite-problem-with-the-visualization/334220/3 "2023-07-18T09:57:02Z")

</div>

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