Kibana User Guide. Visualization. Part 6
The fifth part of the translation of official documentation on data visualization in Kibana.
Link to original material: Kibana User Guide [6.6] "Visualize
Link to 1 part: Kibana User Guide. Visualization. Part 1
Link to part 2: Kibana User Guide. Visualization. Part 2
Link to part 3: Kibana User Guide. Visualization. Part 3
Link to part 4: Kibana User Guide. Visualization. Part 4
Link to Part 5: Kibana User Guide. Visualization. Part 5
')
Content:
1. Vega Graphs
2. Inspecting Visualizations
A warning. This feature is experimental and may be modified or removed in a future release. Elastic will make every effort to correct any problems, but the experimental features are not subject to the support of the official GA functions of the GA.
You can build a visualization of Vega and VegaLite data inside Kibana, both offline and on top of a map. To see Vega in action, watch this short overview video .
Follow these steps to create your first Vega visualization.
VegaLite is a simplified version of Vega, useful for a quick start, but with a number of limitations. VegaLite is automatically converted to Vega before execution. Compare logstash-simple_line-vega and logstash-simple_line-vegalite (both use some of the logstash data from Elasticsearch). You can use this editor to convert VegaLite to Vega.
By default, the Vega data element can use embedded and external data with the
Here is an example of an Elasticsearch query that counts the number of documents in all indexes. The query uses the
The full result has the following structure type:
Note that
For most graphs, we only need a list of segment values, so we use the expression
The request can be specified with an individual range and contextual information panel. This query is equivalent to
This is the ability to access Elastic Map Service files according to some mechanism.
The default Kibana map can be used as a base for the Vega graph. To enable, the graph must define
This visualization will automatically embed a projection called
Use the browser tools for debugging (for example, F12 or Ctrl + Shift + J in Chrome) to inspect the variable
If you use the Elasticsearch query, make sure that the data received is what you expected. The easiest way to see this is by using the “networking” tab in the browser debugging tools (for example, F12). Modify the graph slightly to make a search query and view the server response. Another approach is to use the Kibana Dev Tools tab - put the index name inside the first line:
If you need to share a graph with someone, you can copy the response of the data line to gist.github.com , possibly with a .json extension, use the [raw] button, and use this url directly in your graph.
To prevent Vega from using non-ES data sources, add
When the Vega and VegaLite examples are used, you need to modify the “data” section to use the absolute URL. For example, replace
These options are specific to Kibana. Card support has additional configuration options.
Vega and VegaLite.
By default, Kibana’s Vega columns will use the
Vega on the map.
All Vega columns will ignore the
Many visualizations allow you to inspect the data underlying the visualization.
To inspect the visualization, click the Inspect button in the editor or select Inspect from the Dashboard panel menu.
The initial screen shows the basic data for visualization. You can download data as a comma-separated value (CSV) file in Formatted or Raw formats. Formatted loads data in a table format. Raw loads the data as represented — dates as timestamps, numbers without a thousand delimiters, etc.
To view requests that collect data, select Requests from the View menu at the top right.
Which views are available depends on the visualization being inspected.
Link to original material: Kibana User Guide [6.6] "Visualize
Link to 1 part: Kibana User Guide. Visualization. Part 1
Link to part 2: Kibana User Guide. Visualization. Part 2
Link to part 3: Kibana User Guide. Visualization. Part 3
Link to part 4: Kibana User Guide. Visualization. Part 4
Link to Part 5: Kibana User Guide. Visualization. Part 5
')
Content:
1. Vega Graphs
2. Inspecting Visualizations
Vega Counts
A warning. This feature is experimental and may be modified or removed in a future release. Elastic will make every effort to correct any problems, but the experimental features are not subject to the support of the official GA functions of the GA.
You can build a visualization of Vega and VegaLite data inside Kibana, both offline and on top of a map. To see Vega in action, watch this short overview video .
Get started with Vega
Follow these steps to create your first Vega visualization.
- In Kibana, select Visualize and add a Vega visualization. You should see the default graph.
- Try changing the
markfromlinetopoint,area,bar,circle,square, ... (see documentation ). - Try the rest of the Vega or VegaLite renderings. You may need to make the URLs absolute, for example, replace the
"url": "data/world-110m.json"with the"url": "https://vega.imtqy.com/editor/data/world-110m.json"(see note below). - Using the makelogs utility , create some logstash data and try the logstash examples ( Do not use makelogs on the production cluster).
Vega vs VegaLite
VegaLite is a simplified version of Vega, useful for a quick start, but with a number of limitations. VegaLite is automatically converted to Vega before execution. Compare logstash-simple_line-vega and logstash-simple_line-vegalite (both use some of the logstash data from Elasticsearch). You can use this editor to convert VegaLite to Vega.
Elasticsearch Requests
By default, the Vega data element can use embedded and external data with the
"url" parameter. Kibana adds support for direct Elasticsearch requests by resetting the "url" value.
Here is an example of an Elasticsearch query that counts the number of documents in all indexes. The query uses the
@timestamp field to filter the time range and split it into histogram segments.
// An object instead of a string for the url value // is treated as a context-aware Elasticsearch query. url: { // Filter the time picker (upper right corner) with this field %timefield%: @timestamp // Apply dashboard context filters when set %context%: true // Which indexes to search index: _all // The body element may contain "aggs" and "query" subfields body: { aggs: { time_buckets: { date_histogram: { // Use date histogram aggregation on @timestamp field field: @timestamp // interval value will depend on the daterange picker // Use an integer to set approximate bucket count interval: { %autointerval%: true } // Make sure we get an entire range, even if it has no data extended_bounds: { min: { %timefilter%: "min" } max: { %timefilter%: "max" } } // Use this for linear (eg line, area) graphs // Without it, empty buckets will not show up min_doc_count: 0 } } } // Speed up the response by only including aggregation results size: 0 } }
The full result has the following structure type:
{ "aggregations": { "time_buckets": { "buckets": [{ "key_as_string": "2015-11-30T22:00:00.000Z", "key": 1448920800000, "doc_count": 28 }, { "key_as_string": "2015-11-30T23:00:00.000Z", "key": 1448924400000, "doc_count": 330 }, ...
Note that
"key" is a Unix timestamp and can be used without transformations by Vega date expressions.
For most graphs, we only need a list of segment values, so we use the expression
format: {property: "aggregations.time_buckets.buckets"} to focus only on the data we need.
The request can be specified with an individual range and contextual information panel. This query is equivalent to
"%context%": true, "%timefield%": "@timestamp" , except for shifting the time range 10 minutes ago.
{ body: { query: { bool: { must: [ // This string will be replaced // with the auto-generated "MUST" clause "%dashboard_context-must_clause%" { range: { // apply timefilter (upper right corner) // to the @timestamp variable @timestamp: { // "%timefilter%" will be replaced with // the current values of the time filter // (from the upper right corner) "%timefilter%": true // Only work with %timefilter% // Shift current timefilter by 10 units back shift: 10 // week, day (default), hour, minute, second unit: minute } } } ] must_not: [ // This string will be replaced with // the auto-generated "MUST-NOT" clause "%dashboard_context-must_not_clause%" ] } } } }
"%timefilter%" can also be used to determine one minimum or maximum value. As shown above, the extended_bounds in date_histogram can be set with two values ​​— minimum and maximum. Instead of hard-coding the value, you can use "min": {"%timefilter%": "min"} , which will be overwritten at the beginning of the current time range. The shift and unit values ​​are also supported. "Interval" can be set dynamically, depending on the currently selected range: "interval": {"%autointerval%": 10} will try to get about 10-15 data points (segments).
Elastic Map Files
This is the ability to access Elastic Map Service files according to some mechanism.
url: { // "type" defaults to "elasticsearch" otherwise type: emsfile // Name of the file, exactly as in the Region map visualization name: World Countries } // The result is a geojson file, get its features to use // this data source with the "shape" marks // https://vega.imtqy.com/vega/docs/marks/shape/ format: {property: "features"}
Vega with map
The default Kibana map can be used as a base for the Vega graph. To enable, the graph must define
type=map in the host configuration.
{ "config": { "kibana": { "type": "map", // Initial map position "latitude": 40.7, // default 0 "longitude": -74, // default 0 "zoom": 7, // default 2 // defaults to "default". Use false to disable base layer. "mapStyle": false, // default 0 "minZoom": 5, // defaults to the maximum for the given style, // or 25 when base is disabled "maxZoom": 13, // defaults to true, shows +/- buttons to zoom in/out "zoomControl": false, // defaults to true, disables mouse wheel zoom "scrollWheelZoom": false, // When false, repaints on each move frame. // Makes the graph slower when moving the map "delayRepaint": true, // default true } }, /* the rest of Vega JSON */ }
This visualization will automatically embed a projection called
"projection" . Use this to calculate the position of all geo-oriented labels. Additionally, you can use longitude, latitude and scaling. These signals can be used in the graph or can be updated to change the positioning of the map.
Debugging
Brouzer debug console
Use the browser tools for debugging (for example, F12 or Ctrl + Shift + J in Chrome) to inspect the variable
VEGA_DEBUG : * view - access to the View object Vega. See the Vega Debugging Guide for how to inspect data and signals at runtime. For VegaLite, VEGA_DEBUG.view.data('source_0') gets the main data set. For Vega, it uses the data name, which is specifically in your Vega specification. * vega_spec specification of the Vega JSON graph after some modifications from Kibana. In the case of VegaLite, this is the output of the VegaLite compiler. * vegalite_spec - if this is a VegaLite graph, a JSON graph specification before compiling VegaLite
Data
If you use the Elasticsearch query, make sure that the data received is what you expected. The easiest way to see this is by using the “networking” tab in the browser debugging tools (for example, F12). Modify the graph slightly to make a search query and view the server response. Another approach is to use the Kibana Dev Tools tab - put the index name inside the first line:
GET <INDEX_NAME>/_search , and add your query in the next line (just the value of the "query" field).
If you need to share a graph with someone, you can copy the response of the data line to gist.github.com , possibly with a .json extension, use the [raw] button, and use this url directly in your graph.
To prevent Vega from using non-ES data sources, add
vega.enableExternalUrls: false to the kibana.yml file.
useful links
- Editor - includes examples for Vega and VegaLite, but does not support any specific Kibana features for Elasticsearch queries and interactive basemaps.
- Textbooks , documents and examples VegaLite.
- Textbooks , documents and examples Vega.
Using Vega and VegaLite Examples
When the Vega and VegaLite examples are used, you need to modify the “data” section to use the absolute URL. For example, replace
"url": "data/world-110m.json" with "url": "https://vega.imtqy.com/editor/data/world-110m.json" . Also in regular examples, Vega uses the "autosize": "pad" layout model "autosize": "pad" , and Kibana uses fit . Remove all autosize , width and height values. See below for dimensions and positioning.
Advanced configuration options
These options are specific to Kibana. Card support has additional configuration options.
{ config: { kibana: { // Placement of the Vega-defined signal bindings. // Can be `left`, `right`, `top`, or `bottom` (default). controlsLocation: top // Can be `vertical` or `horizontal` (default). controlsDirection: vertical // If true, hides most of Vega and VegaLite warnings hideWarnings: true // Vega renderer to use: `svg` or `canvas` (default) renderer: canvas } } /* the rest of Vega code */ }
Size and position
Vega and VegaLite.
By default, Kibana’s Vega columns will use the
autosize = { type: 'fit', contains: 'padding' } layout model for Vega and VegaLite graphs. The fit model uses all available space, ignoring the width and height values, but takes into account the indent values. You can override this behavior by specifying a different autosize value.
Vega on the map.
All Vega columns will ignore the
autosize , width , height and padding values ​​using the zero indent fit model.
Inspection Visualization
Many visualizations allow you to inspect the data underlying the visualization.
To inspect the visualization, click the Inspect button in the editor or select Inspect from the Dashboard panel menu.
The initial screen shows the basic data for visualization. You can download data as a comma-separated value (CSV) file in Formatted or Raw formats. Formatted loads data in a table format. Raw loads the data as represented — dates as timestamps, numbers without a thousand delimiters, etc.
To view requests that collect data, select Requests from the View menu at the top right.
Which views are available depends on the visualization being inspected.
Source: https://habr.com/ru/post/442278/
All Articles