Coder Social home page Coder Social logo

Comments (11)

nyurik avatar nyurik commented on September 14, 2024

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!

from kibana-vega-vis.

karnamonkster avatar karnamonkster commented on September 14, 2024

Hi @nyurik ,

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

from kibana-vega-vis.

nyurik avatar nyurik commented on September 14, 2024

@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.

from kibana-vega-vis.

karnamonkster avatar karnamonkster commented on September 14, 2024

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

from kibana-vega-vis.

nyurik avatar nyurik commented on September 14, 2024

@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).

from kibana-vega-vis.

karnamonkster avatar karnamonkster commented on September 14, 2024

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

from kibana-vega-vis.

karnamonkster avatar karnamonkster commented on September 14, 2024

@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?

from kibana-vega-vis.

nyurik avatar nyurik commented on September 14, 2024

@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.

from kibana-vega-vis.

karnamonkster avatar karnamonkster commented on September 14, 2024

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

from kibana-vega-vis.

nyurik avatar nyurik commented on September 14, 2024

@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
              }
            }
          }
        }
      },

from kibana-vega-vis.

nyurik avatar nyurik commented on September 14, 2024

closing as inactive, feel free to comment

from kibana-vega-vis.

Related Issues (20)

Recommend Projects

  • React photo React

    A declarative, efficient, and flexible JavaScript library for building user interfaces.

  • Vue.js photo Vue.js

    🖖 Vue.js is a progressive, incrementally-adoptable JavaScript framework for building UI on the web.

  • Typescript photo Typescript

    TypeScript is a superset of JavaScript that compiles to clean JavaScript output.

  • TensorFlow photo TensorFlow

    An Open Source Machine Learning Framework for Everyone

  • Django photo Django

    The Web framework for perfectionists with deadlines.

  • D3 photo D3

    Bring data to life with SVG, Canvas and HTML. 📊📈🎉

Recommend Topics

  • javascript

    JavaScript (JS) is a lightweight interpreted programming language with first-class functions.

  • web

    Some thing interesting about web. New door for the world.

  • server

    A server is a program made to process requests and deliver data to clients.

  • Machine learning

    Machine learning is a way of modeling and interpreting data that allows a piece of software to respond intelligently.

  • Game

    Some thing interesting about game, make everyone happy.

Recommend Org

  • Facebook photo Facebook

    We are working to build community through open source technology. NB: members must have two-factor auth.

  • Microsoft photo Microsoft

    Open source projects and samples from Microsoft.

  • Google photo Google

    Google ❤️ Open Source for everyone.

  • D3 photo D3

    Data-Driven Documents codes.