Tooltip in Vega

Elastic Stack Kibana
1

Here I wanted to show distinct 'd' field values for each 'a' field in tooltip. For text it's giving correct but A and B are overlapping and in tooltip it's giving only B.

{
  "$schema": "https://vega.github.io/schema/vega-lite/v4.json",
  "description": "A simple bar chart with embedded data with tooltip.",
  "width":500,
  "height":300,
  "data": {
    "values": [
      {"a": "A", "b": 28,"d": "A"},
      {"a": "A", "b": 55,"d": "A"},
      {"a": "A", "b": 43,"d": "B"},
      {"a": "A", "b": 91,"d": "B"},
      {"a": "B", "b": 81,"d": "A"},
      {"a": "B", "b": 53,"d": "A"},
      {"a": "G", "b": 19,"d": "B"},
      {"a": "H", "b": 87,"d": "A"},
      {"a": "I", "b": 52,"d": "B"}
    ]
  },
   "encoding": {
    "x": {"field": "a", "type": "nominal"}
  },
  "layer":[

{
     "encoding": {
       "y": {"aggregate":"distinct", "field": "d",
          "scale": {"domain": [0, 10]},
          "type": "quantitative", 
          "title": "Open Rate (%)",
          "axis": {"titleColor":"#54b399"}
        }
      },
  "layer":[{
    "mark": {"stroke": "#54b399", "type": "line", "interpolate": "monotone", "point": true}
 
    },
     {
    "mark": {
      "type": "text",
      "align": "left",
      "baseline": "middle",
     "fontSize": 24,
      "dx": 3,
      "dy": -13
    },
    "encoding": {
      "text": {"field": "d"},
    "tooltip": {"field": "d"}

    }
  }
    ]
    } ],
  "resolve": {"scale": {"y": "independent"}} 

}

image

can I know how to get both A and B values in tooltip ?

2

You need to apply your distinct aggregation inside a transform function before the encoding. What your spec shows is that you are only getting distinct data for the first layer, and the second layer is getting all the data.

3

Hi @wylie

I added transform before encoding, when I added the field d in tooltip it's giving undefined.

{
  "$schema": "https://vega.github.io/schema/vega-lite/v4.json",
  "description": "A simple bar chart with embedded data with tooltip.",
  "width":500,
  "height":300,
  "data": {
    "values": [
      {"a": "A", "b": 28,"d": "A"},
      {"a": "A", "b": 55,"d": "A"},
      {"a": "A", "b": 43,"d": "B"},
      {"a": "A", "b": 91,"d": "B"},
      {"a": "B", "b": 81,"d": "A"},
      {"a": "B", "b": 53,"d": "A"},
      {"a": "G", "b": 19,"d": "B"},
      {"a": "H", "b": 87,"d": "A"},
      {"a": "I", "b": 52,"d": "B"}
    ]
  },
  "transform":[    
  {
        "aggregate": [
        {"op": "distinct", "field": "d","as": "a_count"}
        ],
        "groupby": ["a"]
      }
      ],
     "encoding": {
     "x": {"field": "a", "type": "nominal"},
       "y": {"field": "a_count",
          "scale": {"domain": [0, 10]},
          "type": "quantitative", 
          "title": "Open Rate (%)",
          "axis": {"titleColor":"#54b399"}
        },
          
      },
  "layer":[{
    "mark": {"stroke": "#54b399", "type": "line", "interpolate": "monotone", "point": true}
 
    },
     {
    "mark": {
      "type": "text",
      "align": "left",
      "baseline": "middle",
     "fontSize": 24,
      "dx": 3,
      "dy": -13
    },
    "encoding": {
      "text": {"field": "d"},
      "tooltip":{"field":"d"}
    

    }
  }
    ]

}

image
image771×321 17.2 KB

4

I would be able to help more if this was related to an Elasticsearch query, but I think the problem is the sample data you're using.

5

Hi @wylie

I am not sure if there is any problem with sample data, I was getting result as undefined with the main data I was using.

image
image925×345 6.84 KB

6

Are you building a Vega spec based on Elasticsearch data? If so, can you please share the raw spec and the spec with data? Vega | Kibana Guide [7.11] | Elastic

7

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