Newbie Issue with Line Chart

[karnamonkster]

Hi,

I am trying to plot a Basic line chart using the examples and some modification w.r.t data from ES

{
  "$schema": "https://vega.github.io/schema/vega/v3.0.json",
  "width": 500,
  "height": 200,
  "padding": 5,

  "signals": [
    {
      "name": "interpolate",
      "value": "linear",
      "bind": {
        "input": "select",
        "options": [
          "basis",
          "cardinal",
          "catmull-rom",
          "linear",
          "monotone",
          "natural",
          "step",
          "step-after",
          "step-before"
        ]
      }
    }
  ],

 "data": [
    {
      "name": "table",
      "url": {
        "index": "scadatcp-*",
        "%context_query%": "date_and_time",
        "body": {
          "size": 0,
          "aggs": {
            "hist": {
              "date_histogram": {
                "field": "date_and_time",
                "interval": "2h",
                "time_zone": "Asia/Dubai",
                "min_doc_count": 1
              }
            }
          }
        }
      },
      "format": {
        "type": "json",
        "property": "aggregations.hist.buckets"
      }
    }
  ],

  "scales": [
    {
      "name": "x",
      "type": "point",
      "range": "width",
      "domain": {"data": "table", "field": "date_and_time"}
    },
    {
      "name": "y",
      "type": "linear",
      "range": "height",
      "nice": true,
      "zero": true,
      "domain": {"data": "table", "field": "b4"}
    },
    {
      "name": "color",
      "type": "ordinal",
      "range": "category",
      "domain": {"data": "table", "field": "b5"}
    }
  ],

  "axes": [
    {"orient": "bottom", "scale": "x"},
    {"orient": "left", "scale": "y"}
  ],

  "marks": [
    {
      "type": "group",
      "from": {
        "facet": {
          "name": "series",
          "data": "table",
          "groupby": "b5"
        }
      },
      "marks": [
        {
          "type": "line",
          "from": {"data": "series"},
          "encode": {
            "enter": {
              "x": {"scale": "x", "field": "date_and_time"},
              "y": {"scale": "y", "field": "b4"},
              "stroke": {"scale": "color", "field": "b5"},
              "strokeWidth": {"value": 2}
            },
            "update": {
              "interpolate": {"signal": "interpolate"},
              "fillOpacity": {"value": 1}
            },
            "hover": {
              "fillOpacity": {"value": 0.5}
            }
          }
        }
      ]
    }
  ]
}

Only getting undefined as one of the axis, please help

[nyurik]

Hi @karnamonkster , I would love to help, but I don't have your data. Could you follow the first method in https://github.com/nyurik/kibana-vega-vis/blob/master/README.md#data - copy the data from the networking tab into a gist, and post the link here? Thanks!

[karnamonkster]

Hi @nyurik ,

Here is a sample data that i get when i query the index in ES https://gist.github.com/karnamonkster/b897b89b7e0f1d2f51b2e5d28f066905

[nyurik]

@karnamonkster this is only part of the data, but it would greatly help to have a complete dataset as returned from your query. It doesn't have to have your real data, but keep all the structure (just the fields that you care to plot). Try this: in the networking tab of your browser's debug tool, find the _msearch result, and copy the whole response from the "Response" tab (I'm using Chrome, it might be called something else in other browsers).Make sure you see all the data you want to plot, and post it to the gist. It should contain the original structure, e.g. the hits and aggregations.

[karnamonkster]

@nyurik i have updated the GIST. does that help?

[nyurik]

@karnamonkster that did help to get started, but it seems something is still missing. Your graph above uses "property": "aggregations.hist.buckets", but your data uses aggregations.2.buckets. But that's a minor fix. The bigger issue is that you attempt to use date_and_time for x, but your data doesn't have this field. Your data basically has only two fields inside the aggregations: "1.value" (float) and "key" (string).

[karnamonkster]

The query response i gave you is from an existing visualization(bar chart). Also i dont have a field called "key" in my index but was certainly part of the response for my query. Let me update the Vega json and update you

[karnamonkster]

@nyurik also basis the response code that i have submitted, can you suggest me a sample code for a simple line or bar chart using vega?

[nyurik]

@karnamonkster , with the data you gave me, the simplest bar graph:

{
  "$schema": "https://vega.github.io/schema/vega-lite/v2.json",
  "description": "A simple bar chart with embedded data.",
  "data": {
    "url": "https://gist.githubusercontent.com/karnamonkster/b897b89b7e0f1d2f51b2e5d28f066905/raw/fc289f36b006adc67fb4b152f03bf89074d70e5d/sample_vega.txt",
    "format": {
      "type": "json",
      "property": "aggregations.2.buckets"
    }
  },
  "mark": "bar",
  "encoding": {
    "x": { "field": "key", "type": "ordinal" },
    "y": { "field": "1.value", "type": "quantitative" }
  }
}

But you need to replace the url string with an object that makes an elastic search request. The bar chart you used - see in the debug window which query it actually makes.

[karnamonkster]

That is what we need, however the data url is the index that i am trying to poll.

[nyurik]

@karnamonkster the data part is the standard elastic search query -- it highly depends on the data you have. For example, this text here (as you posted initially):

      "url": {
// this is your index
        "index": "scadatcp-*",

// this means that the index contains "date_and_time" timestamp field, and that the timepicker (upper right corner) will be used for this query to limit it.  If the time is not relevant for this index, you can replace it with `true`.
        "%context_query%": "date_and_time",   

// this is the actual body of your query. The "hist" is the name of the aggregation (you used "2" instead in your data sample, so you might want to use "2" instead, or use something more descriptive in the graph and here.)
        "body": {
          "size": 0,
          "aggs": {
            "hist": {
              "date_histogram": {
                "field": "date_and_time",
                "interval": "2h",
                "time_zone": "Asia/Dubai",
                "min_doc_count": 1
              }
            }
          }
        }
      },

[nyurik]

closing as inactive, feel free to comment