Sum up multi Vega graphs in one

Elastic Stack Kibana
1

Hi all,

I've done several Vega Timeline visualizations and now I want all of them to be summarized in a one single diagram instead of individually and with different colors, like this example her:
image

here are a few of my visualizations :

image
image1244×429 154 KB

code for first vis:

{
  $schema: https://vega.github.io/schema/vega-lite/v2.json
  data: {
# URL object is a context-aware query to Elasticsearch
    url: {
      %context%: true
      %timefield%: Date
      index: index_tev_test
      body: {
        size: 1000
        _source: [
          Date
          SIL1
        ]
      }
    }
# We only need the content of hits.hits array
    format: {
      property: hits.hits
    }
  }
  transform: [
    {
      calculate: toDate(datum._source['Date'])
      as: time
    }
  ]
#Parse timestamp into a javascript date value

  mark: {
    type: line
    point: true
  }
  encoding: {
    x: {
      //timeUnit: day
      field: _source.Date
      type: n
      sort: 0
      axis: {
        title: Date
      }
    }
    y: {
      field: _source.SIL1
      type: "nominal" //sort :0
      axis: {
        title: SIL1 Uhrzeiten
      }
    }
    order: {
      field: Date
    }
  }
}

code for second vis:

  {
  $schema: https://vega.github.io/schema/vega-lite/v2.json
  data: {
# URL object is a context-aware query to Elasticsearch
    url: {
      %context%: true
      %timefield%: Date
      index: index_tev_test
      body: {
        size: 1000
        _source: [
          Date
          TGW #102_start
        ]
      }
    }
# We only need the content of hits.hits array
    format: {
      property: hits.hits
    }
  }
  transform: [
    {
      calculate: toDate(datum._source['Date'])
      as: time
    }
  ]
#Parse timestamp into a javascript date value

  mark: {
    type: line
    point: true
  }
  encoding: {
    x: {
      //timeUnit: day
      field: _source.Date
      type: "n" 
      sort:0
             axis: {
        title: Date
      }
      
    }
    y: {
      field: _source.TGW #102_start
      type: "nominal" //sort :0
             axis: {
        title: TGW #102_start Uhrzeiten
      }
    }
      "order": {"field": "Date"}
  }
}
2

Since your query appears to be almost-identical in both of these, you can combine both visualizations into a single chart. Combine the _source fields so that your query contains all the same data, and then you will need to use layers in Vega-Lite. I'm only modifying the part underneath your comment.

  mark: {
    type: line
    point: true
  }
  encoding: {
    x: {
      //timeUnit: day
      field: _source.Date
      type: "n" 
      sort:0
             axis: {
        title: Date
      }
      
    }
    // Notice that there is no Y encoding here
    order: {
      field: "Date"
    }
  }

  layer: [
    {
      encoding: {
        y: {
          field: _source.TGW #102_start
          type: "nominal"
          axis: {
            title: Shared title
          }
        }
        color: {
          value: 'red'
        }
      }
    },
    {
      encoding: {
        y: {
          field: _source.SIL1
          type: "nominal"
          axis: {
            title: Shared title
          }
        }
        color: {
          value: 'blue'
        }
      }
    },
  ]
3

Thanks @wylie , i modified my code like you said but it mention that some thing is messing:

image
image969×96 8.05 KB

{
  $schema: https://vega.github.io/schema/vega-lite/v2.json
  data: {
# URL object is a context-aware query to Elasticsearch
    url: {
      %context%: true
      %timefield%: Date
      index: index_tev_test
      body: {
        size: 4000
        _source: [
          Date
          Basis
          FT1
        ]
      }
    }
# We only need the content of hits.hits array
    format: {
      property: hits.hits
    }
  }
  transform: [
    {
      calculate: toDate(datum._source['Date'])
      as: time
    }
  ]
#Parse timestamp into a javascript date value

  mark: {
    type: line
    point: true
  }
  encoding: {
    x: {
      //timeUnit: day
      field: _source.Date
      type: n
      sort: 0
      axis: {
        title: Date
      }
    }
    order: {
      field: Date
    }
  }
  layer: [
    {
      encoding: {
        y: {
          field: _source.Basis
          type: nominal
          axis: {
            title: Shared title
          }
        }
        color: {
          value: red
        }
      }
    }
    {
      encoding: {
        y: {
          field: _source.FT1
          type: nominal
          axis: {
            title: Shared title
          }
        }
        color: {
          value: blue
        }
      }
    }
  ]
}
4

Oh, you need to copy+paste the mark section into each layer. That's what the error says.

5

Great @wylie , it's work, thank you very much

image
image1045×691 132 KB

i only need now to give names for each line on the right side of the diagram like below:

image

used code:

{
  "$schema": "https://vega.github.io/schema/vega-lite/v4.json",
  "data": {
    "url": {
      "%context%": true,
      "%timefield%": "Date",
      "index": "index_tev_test",
      "body": {"size": 1000, "_source": ["Date", "Basis", "FT1", "FT2", "FT3"]}
    },
    "format": {"property": "hits.hits"}
  },
  "mark": {"type": "line", "point": true},
  "encoding": {
    "x": {
      "field": "_source.Date",
      "type": "n",
      "sort": 0,
      "axis": {"title": "Date"}
    },
    "order": {"field": "Date"}
  },
  "layer": [
    {
      "mark": {"type": "line", "point": true},
      "encoding": {
        "y": {
          "field": "_source.FT1",
          "type": "nominal",
          "axis": {"title": "Time"}
        },
        "color": {"value": "red"}
      }
    },
    {
      "mark": {"type": "line", "point": true},
      "encoding": {
        "y": {
          "field": "_source.FT2",
          "type": "nominal",
          "axis": {"title": "Time"}
        },
        "color": {"value": "black"}
      }
    },
    {
      "mark": {"type": "line", "point": true},
      "encoding": {
        "y": {
          "field": "_source.FT3",
          "type": "nominal",
          "axis": {"title": "Time"}
        },
        "color": {"value": "green"}
      }
    },
    {
      "mark": {"type": "line", "point": true},
      "encoding": {
        "y": {
          "field": "_source.Basis",
          "type": "nominal",
          "axis": {"title": "Time"}
        },
        "color": {"value": "blue"}
      }
    }
  ]
}
6

I'm not entirely sure how to do that. I'm not sure if it's controlled by axis, legend, or scale in Vega-Lite.

7

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