Current Time Marker in vega-lite chart

Hi experts,

Is there any way to draw a current time marker in vega-lite?
I'd like to do it on a scatter plot written in vega-lite.

Many thanks in advane,

Cheers
Shin

Looks like you want a Rule mark. Using the default vega example, moved the data and encoding into a layer and created another one that renders a vertical rule based on a transform that computes the current timestamp.

This should give you a starting point

{
  $schema: https://vega.github.io/schema/vega-lite/v4.json
  title: Event counts from all indexes
  layer: [
    // Original layer
    {
      data: {
        url: {
          %context%: true
          %timefield%: @timestamp
          index: _all
          body: {
            aggs: {
              time_buckets: {
                date_histogram: {
                  field: @timestamp
                  interval: {%autointerval%: true}
                  extended_bounds: {
                    min: {%timefilter%: "min"}
                    max: {%timefilter%: "max"}
                  }
                  min_doc_count: 0
                }
              }
            }
            size: 0
          }
        }
        format: {property: "aggregations.time_buckets.buckets"}
      }
      mark: line
      encoding: {
        x: {
          field: key
          type: temporal
          axis: {title: false} // Customize X axis format
        }
        y: {
          field: doc_count
          type: quantitative
          axis: {title: "Document count"}
        }
      }
    }
    // Rule marking the current timestamp
    {
      // Dummy data
      data: {
        values: {
          foo: "bar"
        }
      }
      /* We want to generate a new 
         field value with the current
         timestamp */
      transform: [
        {
          calculate: "now()"
          as: now_field
        }
      ]
      /* Draw a rule using the
         now_field on the X axis */
      mark: rule
      encoding: {
        x: {
          type: temporal
          field: now_field
          axis: {title: false} // Customize X axis format
        }
        color:{
          value: red
        }
        size: {
          value: 2
        }
      }
    }
  ]
}

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