github-mirrors/kibana
1
0
Fork 0
mirror of https://github.com/elastic/kibana.git synced 2025-04-24 09:48:58 -04:00
Code Issues Projects Releases Packages Wiki Activity

Fixed hierarchy for Vega documentation (#17691) (#17697)

Browse source
This commit is contained in:
gchaps 2018-04-13 10:21:56 -07:00 • committed by GitHub
parent 87260d266f
commit d1e4073f98
No known key found for this signature in database
GPG key ID: 4AEE18F83AFDEB23
1 changed files with 24 additions and 28 deletions
Download patch file Download diff file Expand all files Collapse all files

52
docs/visualize/vega.asciidoc
View file

@ -2,34 +2,31 @@
== Vega Graphs
experimental[]
__________________________________________________________________________________________________________________________________________________________________________________
Build https://vega.github.io/vega/examples/[Vega] and
You can build https://vega.github.io/vega/examples/[Vega] and
https://vega.github.io/vega-lite/examples/[VegaLite] data visualizations
into Kibana, either standalone, or on top of a map.
__________________________________________________________________________________________________________________________________________________________________________________
into Kibana, either standalone, or on top of a map. To see Vega in action,
watch this
https://www.youtube.com/watch?v=lQGCipY3th8[short introduction video].
[[vega-introduction-video]]
=== Watch a short introduction video
https://www.youtube.com/watch?v=lQGCipY3th8[Kibana Vega Visualization Video]
[[vega-quick-demo]]
=== Quick Demo
=== Getting Started with Vega
* In Kibana, choose Visualize, and add Vega visualization.
* You should immediately see a default graph
* Try changing `mark` from `line` to `point`, `area`, `bar`, `circle`,
Follow these steps to create your first Vega visualization.
. In Kibana, choose Visualize, and add Vega visualization. You should see a default graph.
. Try changing `mark` from `line` to `point`, `area`, `bar`, `circle`,
`square`, ... (see
https://vega.github.io/vega-lite/docs/mark.html#mark-def[docs])
* Try other https://vega.github.io/vega/examples/[Vega] or
. Try other https://vega.github.io/vega/examples/[Vega] or
https://vega.github.io/vega-lite/examples/[VegaLite] visualizations. You
may need to make URLs absolute, e.g. replace
`"url": "data/world-110m.json"` with
`"url": "https://vega.github.io/editor/data/world-110m.json"`. (see
link:#Using%20Vega%20and%20VegaLite%20examples[notes below])
* Using https://www.npmjs.com/package/makelogs[makelogs util], generate
. Using https://www.npmjs.com/package/makelogs[makelogs util], generate
some logstash data and try link:public/examples/logstash[logstash
examples]. *(Do not use makelogs on a production cluster!)*
examples]. *(Do not use makelogs on a production cluster.)*
[[vega-vs-vegalite]]
=== Vega vs VegaLite
@ -40,18 +37,19 @@ into Vega before rendering. Compare
https://github.com/nyurik/kibana-vega-vis/blob/master/examples/logstash/logstash-simple_line-vega.json[logstash-simple_line-vega]
and
https://github.com/nyurik/kibana-vega-vis/blob/master/examples/logstash/logstash-simple_line-vegalite.json[logstash-simple_line-vegalite]
(both use the same ElasticSearch logstash data). You may use
(both use the same Elasticsearch logstash data). You may use
https://vega.github.io/editor/[this editor] to convert VegaLite into
Vega.
[[vega-querying-elasticsearch]]
== Querying ElasticSearch
=== Querying Elasticsearch
By default, Vega's https://vega.github.io/vega/docs/data/[data] element
can use embedded and external data with a `"url"` parameter. Kibana adds support for the direct ElasticSearch queries by overloading
can use embedded and external data with a `"url"` parameter. Kibana adds support for the direct Elasticsearch queries by overloading
the `"url"` value.
Here is an example of an ES query that counts the number of documents in all indexes. The query uses *@timestamp* field to filter the time range, and break it into histogram buckets.
Here is an example of an Elasticsearch query that counts the number of documents in all indexes. The query uses *@timestamp* field to filter the time range, and break it into histogram buckets.
[source,yaml]
----
@ -92,7 +90,7 @@ url: {
}
----
The full ES result has this kind of structure:
The full result has this kind of structure:
[source,yaml]
----
@ -187,7 +185,7 @@ format: {property: "features"}
----
[[vega-with-a-map]]
=== Vega with a map
=== Vega with a Map
Kibana's default map can be used as a base of the Vega graph. To enable,
the graph must specify `type=map` in the host configuration:
@ -236,10 +234,10 @@ These signals can be used in the graph, or can be updated to modify the
positioning of the map.
[[vega-debugging]]
== Debugging
=== Debugging
[[vega-browser-debugging-console]]
=== Browser Debugging console
==== Browser Debugging console
Use browser debugging tools (e.g. F12 or Ctrl+Shift+J in Chrome) to
inspect the `VEGA_DEBUG` variable:
@ -252,9 +250,9 @@ of VegaLite, this is the output of the VegaLite compiler.
VegaLite compilation.
[[vega-data]]
=== Data
==== Data
If you are using ElasticSearch query, make sure your resulting data is
If you are using Elasticsearch query, make sure your resulting data is
what you expected. The easiest way to view it is by using "networking"
tab in the browser debugging tools (e.g. F12). Modify the graph slightly
so that it makes a search request, and view the response from the
@ -273,14 +271,12 @@ To restrict Vega from using non-ES data sources, add `vega.enableExternalUrls: f
to your kibana.yml file.
[[vega-notes]]
== Notes
[[vega-useful-links]]
=== Useful Links
* https://vega.github.io/editor/[Editor] - includes examples for Vega &
VegaLite, but does not support any Kibana-specific features like
ElasticSearch requests and interactive base maps.
Elasticsearch requests and interactive base maps.
* VegaLite
https://vega.github.io/vega-lite/tutorials/getting_started.html[Tutorials],
https://vega.github.io/vega-lite/docs/[docs], and