Search code examples
vega-lite

mark line doesn't work whereas mark circle works


I would like to draw a line chart for a field raw_value and I've this code :

{
  $schema: https://vega.github.io/schema/vega-lite/v4.json
  data: {
    url: {
      %context%: true
      %timefield%: @timestamp
      index: filebeat-*
      body: {
        size: 10000
        _source: ["@timestamp","raw_value"]
      }
    }
    format: {property: "hits.hits"}
  }
  transform: [
    {calculate: "toDate(datum._source['@timestamp'])", as: "time"}
  ]

  mark: circle
  encoding: {
    x: {field: "time", type: "temporal"}
    y: {field: "_source.raw_value", type: "quantitative"}
  }
}

it works well and I see the circles for each couple (time,raw_value), but if i want to draw a line to rely points and i replace circle by line, nothing appears on the chart.


Solution

  • Lines are only drawn between adjacent non-null points, so what you describe generally means that you have null y values in your data. You can fix this by filtering out undefined data before drawing your lines:

      transform: [
        {calculate: "toDate(datum._source['@timestamp'])", as: "time"},
        {filter: "isDefined(datum._source.raw_value)"}
      ]