Show the specific field value in a time series spot line

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..

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.

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

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

Canvas dashboards are separate from regular dashboards for now

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

Hi @wylie

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

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

 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:

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

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

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

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 ..

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/