Reputation: 11
In the code below I wanted to show a time and hour on X axis. How can I show it.
{ "$schema": "https://vega.github.io/schema/vega/v4.json", "width": 600, "height": 200, "padding": 5, "data": [ { "name": "table", "values": [ {"mtime": 1545206725000 , "systemmaxload": 1}, {"mtime": 1545292825000 , "systemmaxload": 1}, {"mtime": 1545292885000 , "systemmaxload": 3}, {"mtime": 1545292945000 , "systemmaxload": 5}, {"mtime": 1545293005000 , "systemmaxload": 2}, {"mtime": 1545293065000 , "systemmaxload": 1}, {"mtime": 1545293125000 , "systemmaxload": 3}, {"mtime": 1545465925000 , "systemmaxload":1} ] } ], "scales": [ { "name": "x", "type": "utc", "range": "width", "domain": {"data": "table", "field": "mtime"} }, { "name": "y", "type": "linear", "range": "height", "nice": true, "zero": true, "domain": {"data": "table", "field": "systemmaxload"} } ], "axes": [ {"orient": "bottom", "scale": "x" ,"format": "%d%m%y %H %M %a","tickCount": "day"}, {"orient": "left", "scale": "y"} ] }
Upvotes: 0
Views: 448
Reputation: 702
Update the format
to have Hours:Minutes:Seconds Weekday
. labelOverlap
property handles overlap of axis labels.
.....
"axes": [
{"orient": "bottom", "scale": "x" ,"format": "%H:%M:%S %a", "labelOverlap": "parity"},
....
]
....
Full code below:
{
"$schema": "https://vega.github.io/schema/vega/v4.json",
"width": 600,
"height": 200,
"padding": 5,
"data": [
{
"name": "table",
"values": [
{"mtime": 1545206725000 , "systemmaxload": 1},
{"mtime": 1545292825000 , "systemmaxload": 1},
{"mtime": 1545292885000 , "systemmaxload": 3},
{"mtime": 1545292945000 , "systemmaxload": 5},
{"mtime": 1545293005000 , "systemmaxload": 2},
{"mtime": 1545293065000 , "systemmaxload": 1},
{"mtime": 1545293125000 , "systemmaxload": 3},
{"mtime": 1545465925000 , "systemmaxload":1}
]
}
],
"scales": [
{
"name": "x",
"type": "utc",
"range": "width",
"domain": {"data": "table", "field": "mtime"}
},
{
"name": "y",
"type": "linear",
"range": "height",
"nice": true,
"zero": true,
"domain": {"data": "table", "field": "systemmaxload"}
}
],
"axes": [
{"orient": "bottom", "scale": "x" ,"format": "%H:%M:%S %a", "labelOverlap": "parity"},
{"orient": "left", "scale": "y"}
]
}
Upvotes: 1