vega3_datetime_areachart.json

{
  "$schema": "https://vega.github.io/schema/vega/v3.0.json",
  "width": 400,
  "height": 200,
  "padding": 5,
  "data": [
    {
      "name": "table",
      "values": [
        {
          "date": 1493078400000,
          "value": 1.0
        },
        {
          "date": 1493164800000,
          "value": 0.7
        },
        {
          "date": 1493251200000,
          "value": 0.5
        },
        {
          "date": 1493337600000,
          "value": 1.2
        },
        {
          "date": 1493424000000,
          "value": -999.0
        },
        {
          "date": 1493510400000,
          "value": -999.0
        },
        {
          "date": 1493596800000,
          "value": -999.0
        },
        {
          "date": 1493683200000,
          "value": -999.0
        },
        {
          "date": 1493769600000,
          "value": -999.0
        },
        {
          "date": 1493856000000,
          "value": -999.0
        },
        {
          "date": 1493942400000,
          "value": -999.0
        },
        {
          "date": 1494028800000,
          "value": -999.0
        },
        {
          "date": 1494115200000,
          "value": -999.0
        },
        {
          "date": 1494201600000,
          "value": -999.0
        },
        {
          "date": 1494288000000,
          "value": 0.7
        },
        {
          "date": 1494374400000,
          "value": -999.0
        },
        {
          "date": 1494460800000,
          "value": -999.0
        },
        {
          "date": 1494547200000,
          "value": -999.0
        },
        {
          "date": 1494633600000,
          "value": -999.0
        },
        {
          "date": 1494720000000,
          "value": -999.0
        },
        {
          "date": 1494806400000,
          "value": -999.0
        },
        {
          "date": 1494892800000,
          "value": -999.0
        }
      ],
      "transform": [
        {
          "type": "filter",
          "expr": "datum.value > 0.0"
        },
        {
          "type": "formula",
          "as": "ff_dt",
          "expr": "datetime(datum.date)"
        },
        {
          "type": "collect",
          "sort": {
            "field": "date",
            "order": "descending"
          }
        }
      ]
    }
  ],
  "signals": [
    {
      "name": "tooltip",
      "value": {},
      "on": [
        {
          "events": "rect:mouseover",
          "update": "datum"
        },
        {
          "events": "rect:mouseout",
          "update": "{}"
        }
      ]
    }
  ],
  "scales": [
    {
      "name": "xscale",
      "type": "band",
      "domain": {
        "data": "table",
        "field": "ff_dt"
      },
      "range": "width"
    },
    {
      "name": "yscale",
      "domain": {
        "data": "table",
        "field": "value"
      },
      "nice": true,
      "range": "height"
    }
  ],
  "axes": [
    {
      "orient": "bottom",
      "scale": "xscale",
      "encode": {
        "labels": {
          "update": {
            "text": {
              "signal": "timeFormat(datum.value, '%d %b %Y - %H:%M:%S%Z')"
            },
            "angle": {
              "value": -45
            },
            "align": {
              "value": "right"
            },
            "baseline": {
              "value": "middle"
            }
          }
        }
      }
    },
    {
      "orient": "right",
      "scale": "yscale",
      "tickCount": 5,
      "offset": 6
    }
  ],
  "marks": [
    {
      "type": "rect",
      "from": {
        "data": "table"
      },
      "encode": {
        "enter": {
          "x": {
            "scale": "xscale",
            "field": "ff_dt",
            "offset": 1
          },
          "width": {
            "scale": "xscale",
            "band": 1,
            "offset": -1
          },
          "y": {
            "scale": "yscale",
            "field": "value"
          },
          "y2": {
            "scale": "yscale",
            "value": 0
          }
        },
        "update": {
          "fill": {
            "value": "steelblue"
          }
        },
        "hover": {
          "fill": {
            "value": "red"
          }
        }
      }
    },
    {
      "type": "text",
      "encode": {
        "enter": {
          "align": {
            "value": "center"
          },
          "baseline": {
            "value": "bottom"
          },
          "fill": {
            "value": "#333"
          }
        },
        "update": {
          "x": {
            "scale": "xscale",
            "signal": "tooltip.ff_dt",
            "band": 0.5
          },
          "y": {
            "scale": "yscale",
            "signal": "tooltip.value",
            "offset": -2
          },
          "text": {
            "signal": "tooltip.value"
          },
          "fillOpacity": [
            {
              "test": "datum === tooltip",
              "value": 0
            },
            {
              "value": 1
            }
          ]
        }
      }
    }
  ]
}