# Show the specific field value in a time series spot line

**URL:** <https://discuss.elastic.co/t/show-the-specific-field-value-in-a-time-series-spot-line/197068>\
**Category:** Kibana\
**Created:** [August 28, 2019, 8:39am UTC](https://discuss.elastic.co/t/show-the-specific-field-value-in-a-time-series-spot-line/197068 "2019-08-28T08:39:32Z")\
**Posts on this page:** 11\
**Page:** 1

<div class="post-metadata">

**Author:** ![wl105500396](https://avatars.discourse-cdn.com/v4/letter/w/e19adc/32.png) [@wl105500396](https://discuss.elastic.co/u/wl105500396)\
**Post date:** [August 28, 2019, 8:39am UTC](https://discuss.elastic.co/t/show-the-specific-field-value-in-a-time-series-spot-line/197068/1 "2019-08-28T08:39:32Z")

</div>

Hi there,

I'm stuck for days creating a visulization which shows the specifc field value in a time series spot line.

Lets say I have an index named costs, and its docs look like below  
{"@timestamp": "2019-08-27T09:59:59.988Z","duration": 0.58},  
{"@timestamp": "2019-08-27T10:59:59.988Z","duration": 0.71},  
{"@timestamp": "2019-08-27T11:59:59.988Z","duration": 0.10},  
{"@timestamp": "2019-08-27T12:59:59.988Z","duration": 0.25},  
....

then how could I create a visulization which is able to show a spot of the specific duration value on Y-axis and time series X-axis .

Thank you very much for you help in advance..

---

<div class="post-metadata">

**Author:** ![wylie](https://sea2.discourse-cdn.com/elastic/user_avatar/discuss.elastic.co/wylie/32/81794_2.png) [@wylie](https://discuss.elastic.co/u/wylie)\
**Post date:** [August 28, 2019, 2:28pm UTC](https://discuss.elastic.co/t/show-the-specific-field-value-in-a-time-series-spot-line/197068/2 "2019-08-28T14:28:54Z")

</div>

If you are trying to visualize individual documents, not aggregated, you have the following options:

- Use the Top Hits aggregation to retrieve some number of individual documents (not all)
- Use a Vega visualization where you can write your own Elasticsearch query and visualize it
- Visualize with a Canvas dashboard, which supports individual documents

Most Kibana visualizations show aggregated data.

---

<div class="post-metadata">

**Author:** ![wl105500396](https://avatars.discourse-cdn.com/v4/letter/w/e19adc/32.png) [@wl105500396](https://discuss.elastic.co/u/wl105500396)\
**Post date:** [August 29, 2019, 2:15am UTC](https://discuss.elastic.co/t/show-the-specific-field-value-in-a-time-series-spot-line/197068/3 "2019-08-29T02:15:05Z")

</div>

Hi wylie,

Thank you for ur reply. I still have some concerns

1. the top hits is not what I want due to all of the duration data is needed based on the time range
2. I tried to initiate a vega visualization but end up with failure.. could you please kindly provide a demo that shows duration value at Y-axis and timestamp at X-axis ? thanks
3. is it possible to add a canvas dashboard into a dashboard, I mean I do have a dashboard contains some other visulizations and I want to view all of them in this single dashboard including the new one.

Thank you

---

<div class="post-metadata">

**Author:** ![wylie](https://sea2.discourse-cdn.com/elastic/user_avatar/discuss.elastic.co/wylie/32/81794_2.png) [@wylie](https://discuss.elastic.co/u/wylie)\
**Post date:** [August 29, 2019, 3:28pm UTC](https://discuss.elastic.co/t/show-the-specific-field-value-in-a-time-series-spot-line/197068/4 "2019-08-29T15:28:09Z")

</div>

For vega, you probably want to use a scatter chart type which is explained in the first example here:

> **[Custom Vega Visualizations in Kibana 6.2](https://www.elastic.co/blog/custom-vega-visualizations-in-kibana)**
>
> A new visualization type in Kibana lets you create custom visualizations using Vega, an open source, JSON-based, declarative language.

Canvas dashboards are separate from regular dashboards for now

---

<div class="post-metadata">

**Author:** ![wl105500396](https://avatars.discourse-cdn.com/v4/letter/w/e19adc/32.png) [@wl105500396](https://discuss.elastic.co/u/wl105500396)\
**Post date:** [September 2, 2019, 5:59am UTC](https://discuss.elastic.co/t/show-the-specific-field-value-in-a-time-series-spot-line/197068/5 "2019-09-02T05:59:07Z")

</div>

Thank you @wylie for ur help , I will have a try and get back to u.

---

<div class="post-metadata">

**Author:** ![wl105500396](https://avatars.discourse-cdn.com/v4/letter/w/e19adc/32.png) [@wl105500396](https://discuss.elastic.co/u/wl105500396)\
**Post date:** [September 11, 2019, 9:10am UTC](https://discuss.elastic.co/t/show-the-specific-field-value-in-a-time-series-spot-line/197068/6 "2019-09-11T09:10:44Z")

</div>

Hi @wylie

Sorry for late reply, I've tried this and it's exactly what I want , thank you very much for ur help

---

<div class="post-metadata">

**Author:** ![wl105500396](https://avatars.discourse-cdn.com/v4/letter/w/e19adc/32.png) [@wl105500396](https://discuss.elastic.co/u/wl105500396)\
**Post date:** [September 12, 2019, 3:08am UTC](https://discuss.elastic.co/t/show-the-specific-field-value-in-a-time-series-spot-line/197068/7 "2019-09-12T03:08:08Z")

</div>

Hi @wylie

Sorry for bothering again, after reading the vega-lite docs I'm willing to use conditional in a color enclose, which to show a specific color after condition matches

```auto
 encoding: {
    x: {field: "time", type: "temporal", axis: { title: null }}
    y: {field: "_source.transformation_duration", type: "quantitative", axis: { title: "Transformation Cost (s)"} }
    color: {
      "condition": {
        "test": "_source.transformation_duration > 2",
        "value": "red"
      },
      "value": "green",
      legend: {title:"Status"}
    }
  }

```

But I'm facing an exception that:

```auto
Unrecognized signal name: "_source"

```

The X & Y axis works fine but not in that condition enclose, how could I be able to access that field returned from es ?

Any suggestions will be appreciated very much

---

<div class="post-metadata">

**Author:** ![wylie](https://sea2.discourse-cdn.com/elastic/user_avatar/discuss.elastic.co/wylie/32/81794_2.png) [@wylie](https://discuss.elastic.co/u/wylie)\
**Post date:** [September 12, 2019, 3:10pm UTC](https://discuss.elastic.co/t/show-the-specific-field-value-in-a-time-series-spot-line/197068/8 "2019-09-12T15:10:42Z")

</div>

Did you try using `datum._source` in your condition? I got that from the examples here: [https://vega.github.io/vega-lite/docs/condition.html](https://vega.github.io/vega-lite/docs/condition.html)

---

<div class="post-metadata">

**Author:** ![wl105500396](https://avatars.discourse-cdn.com/v4/letter/w/e19adc/32.png) [@wl105500396](https://discuss.elastic.co/u/wl105500396)\
**Post date:** [September 16, 2019, 2:12am UTC](https://discuss.elastic.co/t/show-the-specific-field-value-in-a-time-series-spot-line/197068/9 "2019-09-16T02:12:37Z")

</div>

I realized my fault , sorry for not keepping you updated.  
I updated my codes like below

```auto
encoding: {
    x: {field: "time", type: "temporal", axis: { title: null }}
    y: {field: "_source.rt", type: "quantitative", axis: { title: "Return Cost (s)"} }
    color: {
      condition: {
        test: "datum._source.rt === null || datum._source.rt<= 60.0"
        value: "green"
      }
      value: "red"
    }
    size: { value: 100 }
  }

```

I could be able to show red/green dot but here I'm facing two problems

- Have no idea how to show tags on the right, which shows the meaning of rea/green dot. ( I mean when someone looking at the view, they'll realize that red dot is some values larger than 60.0, otherwize the dots are green directly)
- I found it effects differently when adding a filter( `rt exists` ), for a same time range, this filter will cause to display more dots. I'm confused about it, then which one ( with or without that filter) is correct anyway ?

Appriciate for ur help very much ..

---

<div class="post-metadata">

**Author:** ![wylie](https://sea2.discourse-cdn.com/elastic/user_avatar/discuss.elastic.co/wylie/32/81794_2.png) [@wylie](https://discuss.elastic.co/u/wylie)\
**Post date:** [September 16, 2019, 3:46pm UTC](https://discuss.elastic.co/t/show-the-specific-field-value-in-a-time-series-spot-line/197068/10 "2019-09-16T15:46:22Z")

</div>

It seems like you're asking more generally about how to customize your Vega visualization, and I think what I would do is go find examples that you like and try them out: [https://vega.github.io/vega-lite/examples/](https://vega.github.io/vega-lite/examples/)

---

<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:** [October 14, 2019, 3:46pm UTC](https://discuss.elastic.co/t/show-the-specific-field-value-in-a-time-series-spot-line/197068/11 "2019-10-14T15:46:29Z")

</div>

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