# Synchronized time scales for Vega chart and others on Dashboard

**URL:** <https://discuss.elastic.co/t/synchronized-time-scales-for-vega-chart-and-others-on-dashboard/291313>\
**Category:** Kibana\
**Tags:** vega\
**Created:** [December 9, 2021, 10:47am UTC](https://discuss.elastic.co/t/synchronized-time-scales-for-vega-chart-and-others-on-dashboard/291313 "2021-12-09T10:47:52Z")\
**Posts on this page:** 3\
**Page:** 1

<div class="post-metadata">

**Author:** ![Michael\_Ubry](https://sea2.discourse-cdn.com/elastic/user_avatar/discuss.elastic.co/michael_ubry/32/98104_2.png) [@Michael\_Ubry](https://discuss.elastic.co/u/Michael_Ubry)\
**Post date:** [December 9, 2021, 10:47am UTC](https://discuss.elastic.co/t/synchronized-time-scales-for-vega-chart-and-others-on-dashboard/291313/1 "2021-12-09T10:47:52Z")

</div>

Hi,

I created Vega scatterplot chart using this code

```auto
{
  $schema: "https://vega.github.io/schema/vega-lite/v2.json"
  // Use points for drawing to actually create a scatterplot
mark: {

type: point
tooltip: 
{
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.

 ![image](https://us1.discourse-cdn.com/elastic/original/3X/d/7/d74fb135ed4b2d88261e33d7be9e7e67c2a0f2fe.jpeg)

---

<div class="post-metadata">

**Author:** ![Tomo\_M](https://avatars.discourse-cdn.com/v4/letter/t/848f3c/32.png) [@Tomo\_M](https://discuss.elastic.co/u/Tomo_M)\
**Post date:** [December 26, 2021, 1:05pm UTC](https://discuss.elastic.co/t/synchronized-time-scales-for-vega-chart-and-others-on-dashboard/291313/2 "2021-12-26T13:05:52Z")

</div>

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.

> **[Concatenating views](https://vega.github.io/vega-lite/docs/concat.html)**
>
> Vega-Lite - a high-level grammar for statistical graphics. Vega-Lite provides a higher-level grammar for visual analysis, comparable to ggplot or Tableau, that generates complete Vega specifications. Vega-Lite specifications consist of simple...

---

<div class="post-metadata">

**Author:** ![system](https://us1.discourse-cdn.com/elastic/original/3X/1/a/1ac57faf039f6b580b3f104ef42a2a89e41014de.png) [@system](https://discuss.elastic.co/u/system)\
**Post date:** [January 23, 2022, 1:06pm UTC](https://discuss.elastic.co/t/synchronized-time-scales-for-vega-chart-and-others-on-dashboard/291313/3 "2022-01-23T13:06:46Z")

</div>

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