user9804413
user9804413

Reputation: 11

Why is the X axis not showing minutes and hours in VEGA script?

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

Answers (1)

codex
codex

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

Related Questions