Synchronized time scales for Vega chart and others on Dashboard


I created Vega scatterplot chart using this code

  $schema: ""
  // Use points for drawing to actually create a scatterplot
mark: {

type: point
field: _source.customer.age
type: "quantitative"

  // Specify where to load data from
  data: {
    // By using an object to the url parameter we will
    // construct an Elasticsearch query
    url: {
      // Context == true means filters of the dashboard will be taken into account
      %context%: true
      // Specify on which field the time picker should operate
      %timefield%: @timestamp
      // Specify the index pattern to load data from
      index: orders
      // This body will be send to Elasticsearch's _search endpoint
      // You can use everything the ES Query DSL supports here
      body: {
        // Set the size to load 10000 documents
        size: 10000,
        // Just ask for the fields we actually need for visualization
        _source: ["@timestamp", "customer.age", "customer.gender"]
    // Tell Vega, that the array of data will be inside hits.hits of the response
    // since the result returned from Elasticsearch fill have a format like:
    // {
    //   hits: {
    //     total: 42000,
    //     max_score: 2,
    //     hits: [
    //       < our individual documents >
    //     ]
    //   }
    // }
    format: { property: "hits.hits" }
  // You can do transformation and calculation of the data before drawing it
  transform: [
    // Since timestamp is a string value, we need to convert it to a unix timestamp
    // so that Vega can work on it properly.
      // Convert _source.@timestamp field to a date
      calculate: "toDate(datum._source['@timestamp'])"
      // Store the result in a field named "time" in the object
      as: "time"
  // Specify what data will be drawn on which axis
  encoding: {
    x: {
      // Draw the time field on the x-axis in temporal mode (i.e. as a time axis)
      field: time
      type: temporal
      // Hide the axis label for the x-axis
      axis: { title: false }
    y: {
      // Draw the bytes of each document on the y-axis
      field: _source.customer.age
      // Mark the y-axis as quantitative
      type: quantitative
      // Specify the label for this axis
      axis: { title: "Customer age" }
      tooltip: {field: "_source.customer.age", type: "quantitative"}
    color: {
      // Make the color of each point depend on the _source.extension field
      field: _source.customer.gender
      // Treat different values as completely unrelated values to each other.
      // You could switch this to quantitative if you have a numeric field and
      // want to create a color scale from one color to another depending on that
      // field's value.
      type: nominal
      // Rename the legend title so it won't just state: "_source.extension"
      legend: { title: 'Gender' }
    shape: {
      // Also make the shape of each point dependent on the extension.
      field: _source.customer.gender
      type: nominal

And I also created TSVB line chart. Now If I put them on dashboard,

  • I would like them to have the same time scaling so user can easily see which dots belongs to which sales total. Both have 1 day period timing but grids are not equally. You can see in the black rectangle that 13.2. in TSVB is above 14.2. in scatter more or less.
  • Moreover, x axis time labels are different. I need them to be same.

Thank you for help.

See the screenshot.

Hi @Michael_Ubry ,
At least I don't know of such an aligning feature.

This is not a solution but only a suggestion, how about constructing both graph by vega-lite and concatenate views side-by-side. data filed can be included in concat and you can use different data for different graph. Maybe it's an easier way to align two graphs as you can align them using same axis properties.

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