Can I define the color of each value in Kibana visualization by assigning it specific RGB?

Elastic Stack Kibana
1

hi,
I have a data set which includes x and y position of each measurement, and its corresponding RGB.
is there a way to Visualize it with Kibana?
This is actually a heat map where each point has x and y values, but the color of each point is set by a given RGB.
thanks.

2

Hi @Shalhevet, to my knowledge the only option would be to use Vega visualization. It's not trivial though.

3

Thank you for the prompt response!
I have never used Vega visualization..
how would you recommend me to start?

4

I'd go through the tutorials Vega provides on their page (https://vega.github.io/vega-lite/tutorials/getting_started.html) and then check out sample data examples in kibana.
A simple example of reading colors from the data is here Vega chart for matrix stats (correlation) split!
An example of quite advanced heatmap in kibana: Vega chart for matrix stats (correlation) split!

5

I thought maybe using a simpler chart of scatterplot and then just color each value by its corresponding color from 'rgb' field. however it is not working.

        {
      $schema: https://vega.github.io/schema/vega-lite/v2.json
      mark: {type: "square", filled: true, size: 400}
      data: {
      data: "table"
        url: {
          %context%: true
          index: my*
          body: {
          size: 10000
            _source: ["X Location", "Y Location", "rgb"]
          }
        }
        format: {property: "hits.hits"}
      }
      encoding: {
        x: {
          field: _source.X Location
          type: quantitative
          axis: {title: "X Location"}
        }
        y: {
          field: _source.Y Location
          type: quantitative
          axis: {title: "Y Location"}
        }
        color: {
      field: _source.rgb
      type: nominal
      legend: {title: "rgb"}
      scale: {
        domain: [data: "table", field: "rgb"]
        range: [data: "table", field: "rgb"]
      }
    }

I based it on the following example code:

color{
    field: _source.ME
      tipe: nominal
      legend: {title: "ME"}
      scale: {
        domain: ["ME1", "ME2", "ME3", "ME4"]
        range: ["rgb(0,0,255)", "rgb(0,255,0)", "rgb(255,0,0)", "rgb(0,0,0)"]
}
}
6

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