Simple Scatter Plot - Vega Lite

Elastic Stack Kibana
1

I am trying to create a simple scatter plot, using vega lite.
I have tried a few different scenarios, and they all seem to be failing.

First one is something like this

    {
      $schema: https://vega.github.io/schema/vega-lite/v2.json
      title: Scatter
      data: {
        url: {
          %context%: true
          index: notes
          body: {
            size: 5
            _source: [ "x", "y"]
          }
          format: {property: "hits.hits"}
        }
      }
          
      mark: point
      encoding: {
        time: {field: "x", type: "quantitative"}
        y: {field: "y", type: "quantitative"}
      }
    }

OR

   {
      $schema: https://vega.github.io/schema/vega-lite/v2.json
      title: Scatter
      data: {
        url: {
          %context%: true
          index: notes
          body: {
            size: 5
            _source: [ "x", "y"]
          }
          format: {property: "hits.hits"}
        }
      }
          
      mark: point
      encoding: {
        time: {field: "_source.x", type: "quantitative"}
        y: {field: "_source.y", type: "quantitative"}
      }
    }

What I get here is an empty graph. No Error message at all.

When I make the query in the dev console:

    GET notes/_search
    { "size": 5,
      "_source": ["x","y"]
    }

I get:

    {
      "took" : 9,
      "timed_out" : false,
      "_shards" : {
        "total" : 5,
        "successful" : 5,
        "skipped" : 0,
        "failed" : 0
      },
      "hits" : {
        "total" : {
          "value" : 10000,
          "relation" : "gte"
        },
        "max_score" : 1.0,
        "hits" : [
          {
            "_index" : "notes",
            "_type" : "_doc",
            "_id" : "ggGQKHIBI40J2F7INuEv",
            "_score" : 1.0,
            "_source" : {
              "x" : 7.0823164000000025,
              "y" : 0.65225583
            }
          },
          {
            "_index" : "notes",
            "_type" : "_doc",
            "_id" : "gwGQKHIBI40J2F7INuEv",
            "_score" : 1.0,
            "_source" : {
              "x" : 17.834715,
              "y" : 0.045098975
            }
          }, ........

So I would expect the values to show up.

When i run the following in the console
https://gist.github.com/nyurik/736c34970ba3c32f3fe3d45d66719b3e

I get:

{
    "autosize": {
        "contains": "padding",
        "type": "fit"
    },
    "config": {
        "mark": {
            "color": "#00B3A4"
        },
        "range": {
            "category": {
                "scheme": "elastic"
            }
        }
    },
    "encoding": {
        "y": {
            "type": "quantitative",
            "field": "y"
        },
        "time": {
            "type": "quantitative",
            "field": "x"
        }
    },
    "mark": "point",
    "data": {
        "values": {
            "hits": {
                "hits": [
                    {
                        "_source": {
                            "y": 0.65225583,
                            "x": 7.0823164000000025
                        },
                        "_score": 0,
                        "_id": "ggGQKHIBI40J2F7INuEv",
                        "_type": "_doc",
                        "_index": "notes"
                    },
                    {
                        "_source": {
                            "y": 0.045098975,
                            "x": 17.834715
                        },
                        "_score": 0,
                        "_id": "gwGQKHIBI40J2F7INuEv",
                        "_type": "_doc",
                        "_index": "notes"
                    },
                    {
                        "_source": {
                            "y": 14.779006,
                            "x": -9.685422
                        },
                        "_score": 0,
                        "_id": "hQGQKHIBI40J2F7INuEv",
                        "_type": "_doc",
                        "_index": "notes"
                    },
                    {
                        "_source": {
                            "y": 0.5968291,
                            "x": 18.18041
                        },
                        "_score": 0,
                        "_id": "iAGQKHIBI40J2F7INuEv",
                        "_type": "_doc",
                        "_index": "notes"
                    },
                    {
                        "_source": {
                            "y": 12.066802,
                            "x": -1.1508789
                        },
                        "_score": 0,
                        "_id": "kQGQKHIBI40J2F7INuEv",
                        "_type": "_doc",
                        "_index": "notes"
                    }
                ],
                "max_score": 0,
                "total": {
                    "relation": "gte",
                    "value": 10000
                }
            },
            "_shards": {
                "failed": 0,
                "skipped": 0,
                "successful": 5,
                "total": 5
            },
            "timed_out": false,
            "took": 1
        }
    },
    "title": "Event counts from all indexes",
    "$schema": "https://vega.github.io/schema/vega-lite/v2.json"
}
2

Hi @dilzeem,

format needs to live outside of your url object. See if this works:

   {
      $schema: https://vega.github.io/schema/vega-lite/v2.json
      title: Scatter
      mark: point
      data: {
        url: {
          %context%: true
          index: notes
          body: {
            size: 5
            _source: [ "x", "y"]
          }
        }
        format: {property: "hits.hits"}
      }
      encoding: {
        time: {field: "_source.x", type: "quantitative"}
        y: {field: "_source.y", type: "quantitative"}
      }
    }
3

Doh,

Thanks for that!! It works now.

4

It might also make sense using encoding.x instead of encoding.time since you're using a quantitative field not a time field for it. Most likely it will also work, but I am not sure if there might not be some weird side-effects of using time like you did.

5

Thanks.

Yeah I think that was a typo from a previous attempt at debugging what was going.

But just to take this further. Are we able from this example to select a region in the scatter plot. Then with those selected values trigger updates to the rest of the dashboard.

Similar to %context%: true but from vega-lite/vega back the other way.

6

Yes, you can use kibanaAddFilter in your signal handlers to do this. More info is available in the original PR, and a more complete example in this gist.

The only caveat with these right now is that they'll only work with the default index pattern. There is an open issue for fixing this bug so that non-default index patterns can be used as well.

7

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