Hi,
I created Vega scatterplot chart using this code
{
$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.
