X-axis is not visible in vega visualization

Elastic Stack Elasticsearch
1 
{
  "$schema": "https://vega.github.io/schema/vega/v5.json",
  "description": "A basic bar chart example, with value labels shown upon mouse hover.",
  
    "signals": [{
      "name": "timeunit", "value": ["day"],
      "bind": {"input": "select", "options": [
       ["month"], ["date"], ["day"], ["hours"]
      ]}}],
 "data": [
    {
      "name": "flights",
     url: {
        index: samptuint 
        body: {
        
        _source: ["date", "ticket", "priority", "inc_num", "status"]   
      } 
        }
        format: { property: "hits.hits" }
      "transform": [
        {
          "type": "timeunit",
          "field": "date",
          "units": {"signal": "timeunit"},
          "signal": "tbin"
        }
      ]
    }
  ],
      "scales": [
    {
      "name": "xscale",
      "type": "band",
      "range": "width",
      "padding": 0.05,
      "round": true,
      "domain": {data:"flights", "signal": "timeSequence(tbin.unit, tbin.start, tbin.stop)"}
    }
  ],
  "axes": [
    { "orient": "bottom", "scale": "xscale",
      "formatType": "time", "format": {"signal": "timeUnitSpecifier(tbin.units, {hours: '%H'})"} }
  ]
}

for reference:-

{
  "$schema": "https://vega.github.io/schema/vega/v5.json",
  "description": "A basic bar chart example, with value labels shown upon mouse hover.",
  "width": 400,
  "height": 200,
  "padding": 5,
 
    "signals": [
   
    {
      "name": "timeunit", "value": ["day"],
      "bind": {"input": "select", "options": [
       ["month"], ["date"], ["day"], ["hours"]
      ]}
    }
  ],
 
  "data": [
    {
      "name": "flights",
     "values": [
        {"date": " 01 Jan 2012 23:00:00", "ticket":10, "priority":"p1", "inc":"INC001"},
        {"date": " 01 feb 2012 20:00:00", "ticket":10, "priority":"p1", "inc":"INC001"},
        {"date": " 01 Jan 2012 23:00:00", "ticket":17, "priority":"p3", "inc":"INC002"},
        {"date": " 01 feb 2012 23:00:00", "ticket":20, "priority":"p3", "inc":"INC003"},
        {"date": " 04 march 2012 23:00:00", "ticket":15,"priority":"p4", "inc":"INC004"},
        {"date": " 01 Apr 2018 23:00:00", "ticket":28, "priority":"p4", "inc":"INC008"},
        {"date": " 01 Jan 2016 23:00:00", "ticket":27, "priority":"p2", "inc":"INC005"},
        {"date": " 06 feb 2016 23:00:00", "ticket":32, "priority":"p3", "inc":"INC006"},
        {"date": " 07 march 2016 20:00:00", "ticket":11, "priority":"p4", "inc":"INC007"},
        {"date": " 01 Jan 2018 23:00:00", "ticket":28, "priority":"p4", "inc":"INC008"},
        {"date": " 05 feb 2018 13:00:00", "ticket":16, "priority":"p2", "inc":"INC009"},
        {"date": " 08 march 2018 23:00:00", "ticket":19, "priority":"p2", "inc":"INC010"},
        {"date": " 01 Jan 2020 23:00:00", "ticket":29, "priority":"p1", "inc":"INC011"},
        {"date": " 05 feb 2020 23:00:00", "ticket":18, "priority":"p3", "inc":"INC012"},
        {"date": "06 march 2020 23:00:00", "ticket":18, "priority":"p3", "inc":"INC013"}
      ],
      "format": {"type": "json", "parse": "auto"},
      "transform": [
        {
          "type": "timeunit",
          "field": "date",
          "units": {"signal": "timeunit"},
          "signal": "tbin"
        }
      ]
    }
  ],
      "scales": [
    {
      "name": "xscale",
      "type": "band",
      "range": "width",
      "padding": 0.05,
      "round": true,
      "domain": {"signal": "timeSequence(tbin.unit, tbin.start, tbin.stop)"}
    }
  ],
  "axes": [
    { "orient": "bottom", "scale": "xscale",
      "formatType": "time", "format": {"signal": "timeUnitSpecifier(tbin.units, {hours: '%H'})"} }
  ]
}
2

What is the response to your ES query?

image
image2440×1026 156 KB

3

{
"took": 1,
"timed_out": false,
"_shards": {
"total": 1,
"successful": 1,
"skipped": 0,
"failed": 0
},
"hits": {
"total": 14,
"max_score": 1,
"hits": [
{
"_index": "samptuint",
"_type": "_doc",
"_id": "ue3lR3cBmDhuxKMfAKQP",
"_score": 1,
"_source": {
"date": "01-01-2012 23:00:00"
},
"unit0": null,
"unit1": null
},
{
"_index": "samptuint",
"_type": "_doc",
"_id": "uu3lR3cBmDhuxKMfAKQP",
"_score": 1,
"_source": {
"date": "03-22-2012 20:00:00"
},
"unit0": null,
"unit1": null
},
{
"_index": "samptuint",
"_type": "_doc",
"_id": "u-3lR3cBmDhuxKMfAKQP",
"_score": 1,
"_source": {
"date": "02-01-2012 23:00:00"
},
"unit0": null,
"unit1": null
},
{
"_index": "samptuint",
"_type": "_doc",
"_id": "vO3lR3cBmDhuxKMfAKQP",
"_score": 1,
"_source": {
"date": "04-02-2012 23:00:00"
},
"unit0": null,
"unit1": null
},
{
"_index": "samptuint",
"_type": "_doc",
"_id": "ve3lR3cBmDhuxKMfAKQP",
"_score": 1,
"_source": {
"date": "04-13-2012 23:00:00"
},
"unit0": null,
"unit1": null
},
{
"_index": "samptuint",
"_type": "_doc",
"_id": "vu3lR3cBmDhuxKMfAKQP",
"_score": 1,
"_source": {
"date": "01-04-2018 23:00:00"
},
"unit0": null,
"unit1": null
},
{
"_index": "samptuint",
"_type": "_doc",
"_id": "v-3lR3cBmDhuxKMfAKQP",
"_score": 1,
"_source": {
"date": "04-21-2016 23:00:00"
},
"unit0": null,
"unit1": null
},
{
"_index": "samptuint",
"_type": "_doc",
"_id": "wO3lR3cBmDhuxKMfAKQP",
"_score": 1,
"_source": {
"date": "02-02-2016 23:00:00"
},
"unit0": null,
"unit1": null
},
{
"_index": "samptuint",
"_type": "_doc",
"_id": "we3lR3cBmDhuxKMfAKQP",
"_score": 1,
"_source": {
"date": "03-03-2016 20:00:00"
},
"unit0": null,
"unit1": null
},
{
"_index": "samptuint",
"_type": "_doc",
"_id": "wu3lR3cBmDhuxKMfAKQP",
"_score": 1,
"_source": {
"date": "01-01-2018 23:00:00"
},
"unit0": null,
"unit1": null
}
]
}
}

4

I think it's your date format.

Working 01 Jan 2012 23:00:00
Not Working 03-03-2016 20:00:00

I'd try a parse or transform to change your string to a date that will work with this function. Something like timeParse('03-22-2012 20:00:00', '%m-%d-%Y %H:%M:%S')

5

Toss this transform in there before your timeunit transform and it should work.

{"type": "formula", "as": "date", "expr": "toDate(datum._source.date)"}
6

I have added transform as per suggestion but still no output.
{
"$schema": "https://vega.github.io/schema/vega/v5.json",
"description": "A basic bar chart example, with value labels shown upon mouse hover.",

"signals": [

{
  "name": "timeunit", "value": ["day"],
  "bind": {"input": "select", "options": [
   ["month"], ["date"], ["day"], ["hours"]
  ]}
}

],

"autosize":"none",
"height":"300",
"width":"200",
"padding":"30"

"data": [
{
"name": "flights",
url: {
index: samptuint
body: {

    _source: ["date", "ticket", "priority", "inc_num", "status"]
    
  } 
    }
    format: { property: "hits.hits" }
    "transform":[{"type": "formula", "as": "date", "expr": "toDate(datum._source.date)"}]
  "transform": [ 
 // {"type": "formula", "as": "month", "expr": "month(datum.date)"}
    {
      "type": "timeunit",
      "field": "date",
      "units": {"signal": "timeunit"},
      "signal": "tbin"
    }
  ]
}

],
"scales": [
{
"name": "xscale",
"type": "band",
"range": "width",
"padding": 0.05,
"round": true,
"domain": {data:"flights", "signal": "timeSequence(tbin.unit, tbin.start, tbin.stop)"}
}
],

"axes": [
{ "orient": "bottom", "scale": "xscale",
"formatType": "time", "format": {"signal": "timeUnitSpecifier(tbin.units, {hours: '%H'})"} }
]
}

7

What do you mean by no output?

I have this working on the Vega Editor and I see it is creating the x-axis.

8

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