Vega Stacked bar chart

Elastic Stack Kibana
1

I'm trying to make a stacked bar chart. The X axis should be time series by day, and the y axis should show the sum of two fields, where each field is a separate color. The Elasticsearch query gives the expected results in dev tools, but I'm not getting the right visualization in Vega. Could anyone please tell me what I'm doing wrong?
For one thing, it's not showing both y axes; and for another, it's not showing the correct dates, it's showing dates starting from January 1st 1900, even though my data only starts in June 2019.

image
image.png972×236 3.92 KB 

{
  $schema: https://vega.github.io/schema/vega-lite/v2.json
  title: CAD/USD cash
  data: {
    url: {
      %context%: true
      %timefield%: @timestamp
      index: some_index-*
      body: {
        aggs: {
          time_buckets: {
            date_histogram: {
              field: @timestamp
              interval: "day"

            },
            aggs: {
                NumberOfCashCAD: {
                  sum: {field: "NumberOfCashCAD"}
                },
                NumberOfCashUSD: {
                  sum: {field: "NumberOfCashUSD"}
                }
            }
          }
          
        }
        size: 0
      }
    }
    format: {property: "aggregations.time_buckets.buckets"}
  }
  mark: bar
  encoding: {
    x: {
      field: key
      timeUnit: date
      type: temporal
      axis: {title: false, format: "%b %d %Y"}
    }
    y: {
      field: NumberOfCashCAD.value
      type: quantitative
      axis: {title: "Total"}
    },
    y2: {
      field: NumberOfCashUSD.value
      type: quantitative
      axis: {title: "Total"}
    },
    resolve: {scale: {y: "independent"}}
  }
}

If I run the following ES query:

{
  "size": 0,
  "aggs": {
          "time_buckets": {
            "date_histogram": {
              "field": "@timestamp",
              "interval": "day"

        },
        "aggs": {
            "NumberOfCashCAD": {
              "sum": {"field": "NumberOfCashCAD"}
            },
            "NumberOfCashUSD": {
            "sum": {"field": "NumberOfCashUSD"}
          }
        }
      }
      
    }
}

The results look like this:

"aggregations" : {
    "time_buckets" : {
      "buckets" : [
        {
          "key_as_string" : "2019-09-01T00:00:00.000Z",
          "key" : 1567296000000,
          "doc_count" : 4162190,
          "NumberOfCashUSD" : {
            "value" : 3462.0
          },
          "NumberOfCashCAD" : {
            "value" : 1150390.0
          }
        },
        {
          "key_as_string" : "2019-09-02T00:00:00.000Z",
          "key" : 1567382400000,
          "doc_count" : 4138070,
          "NumberOfCashUSD" : {
            "value" : 5990.0
          },
          "NumberOfCashCAD" : {
            "value" : 1442289.0
          }
        },

And those values are what should be going into composing the bar chart...

2

Looking at a stacked vega example, https://vega.github.io/vega-lite/examples/stacked_bar_weather.html, it appears your vega is missing color section that defines the domains.

1 Like
3

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