# Area visualization

**URL:** <https://discuss.elastic.co/t/area-visualization/242116>\
**Category:** Kibana\
**Created:** [July 21, 2020, 11:52pm UTC](https://discuss.elastic.co/t/area-visualization/242116 "2020-07-21T23:52:04Z")\
**Posts on this page:** 3\
**Page:** 1

<div class="post-metadata">

**Author:** ![hiba](https://sea2.discourse-cdn.com/elastic/user_avatar/discuss.elastic.co/hiba/32/110919_2.png) [@hiba](https://discuss.elastic.co/u/hiba)\
**Post date:** [July 21, 2020, 11:52pm UTC](https://discuss.elastic.co/t/area-visualization/242116/1 "2020-07-21T23:52:04Z")

</div>

Hi,  
this my data source:

{  
"bookings": [  
{  
"bookingId": 553267,  
"bookingRef": "VO20200108460",  
"statusId": 1,  
"status": "Confirmed",  
"rating": 4,  
"hotelId": 17060,  
"hotelName": "Nerolia Hotel & SPA 4\*",  
"hotelCity": "Monastir",  
"hotelCountry": "Tunisie",  
"hotelAddress": "Zone Touristique Dkhila Skanes,Monastir",  
"price": 160,  
"arrDate": "2020-01-31",  
"depDate": "2020-02-02"  
},  
{  
"bookingId": 553258,  
"bookingRef": "VO20200108460",  
"statusId": 1,  
"status": "Confirmed",  
"rating": 4,  
"hotelId": 17060,  
"hotelName": "Magic Hotels Royal Kenz 4\*",  
"hotelCity": "Monastir",  
"hotelCountry": "Tunisie",  
"hotelAddress": "Zone Touristique,Monastir",  
"price": 200,  
"arrDate": "2020-01-05",  
"depDate": "2020-01-07"  
},  
{  
"bookingId": 553456,  
"bookingRef": "VO20200108460",  
"statusId": 1,  
"status": "Confirmed",  
"rating": 3,  
"hotelId": 17060,  
"hotelName": "Les Colombes 3\*",  
"hotelCity": "Hammamet",  
"hotelCountry": "Tunisie",  
"hotelAddress": "Route Touristique El Mrazga, Hammamet 8050",  
"price": 92,  
"arrDate": "2020-01-05",  
"depDate": "2020-01-06"  
}  
]  
}

I want to build a visualization that presents: a price comparison for a hotel unit. ie: for the same rating and the same city the area will give a price comparison for the two hotels.

in this case i want to compare the price of "Magic Hotels Royal Kenz 4\*" and "Nerolia Hotel & SPA 4\*" because they are in the same city and they have the same rating.

y-axe: price  
x-axe: date = depDate \_ arrDate (i try to calculate the date with scriptedfield but it's don't work for me)

how can i create this visualization please !

---

<div class="post-metadata">

**Author:** ![cheiligers](https://sea2.discourse-cdn.com/elastic/user_avatar/discuss.elastic.co/cheiligers/32/73114_2.png) [@cheiligers](https://discuss.elastic.co/u/cheiligers)\
**Post date:** [July 29, 2020, 6:38pm UTC](https://discuss.elastic.co/t/area-visualization/242116/2 "2020-07-29T18:38:22Z")

</div>

Hi @hiba,  
From your description, you'll need to set up a few queries and filters so I recommend you take a look at using the [Timeseries Visual Builder](https://www.elastic.co/guide/en/kibana/current/TSVB.html).

First though, I think you'll need to do a few things:

1. I notice that your `source` contains an array of booking documents and you'd need to index each of these separately to query them. i.e. for each item in the `bookings` array, you would index it using, for example, a PUT request:

```auto
PUT hotel-bookings/_doc/3
{
  "bookingId": 553456,
  "bookingRef": "VO20200108460",
  "statusId": 1,
  "status": "Confirmed",
  "rating": 3,
  "hotelId": 17060,
  "hotelName": "Les Colombes 3*",
  "hotelCity": "Hammamet",
  "hotelCountry": "Tunisie",
  "hotelAddress": "Route Touristique El Mrazga, Hammamet 8050",
  "price": 92,
  "arrDate": "2020-01-05",
  "depDate": "2020-01-06"
}

```

You'll probably want to use a [bulk request](https://www.elastic.co/guide/en/elasticsearch/reference/current/docs-bulk.html).

Alternatively, you can set up a [pipeline](https://www.elastic.co/guide/en/elasticsearch/reference/current/pipeline.html) that uses a [scripted field](https://www.elastic.co/guide/en/elasticsearch/reference/current/script-processor.html) to take each entry in the `bookings` array and index it as a separate document, then [reindex](https://www.elastic.co/guide/en/elasticsearch/reference/current/docs-reindex.html) your existing data into a new index for querying and visualizing.

1. You'll need to make sure your `arrDate` and `depDate` fields are `date` types and provide the format for them: `YYYY-MM-DD` to use [date math in scripted fields](https://www.elastic.co/blog/using-painless-kibana-scripted-fields).  
Once you have your data in the new form, I think you'll find it easier to get to the visualization you want.

---

<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:** [August 26, 2020, 6:38pm UTC](https://discuss.elastic.co/t/area-visualization/242116/3 "2020-08-26T18:38:34Z")

</div>

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