You signed in with another tab or window. Reload to refresh your session.You signed out in another tab or window. Reload to refresh your session.You switched accounts on another tab or window. Reload to refresh your session.Dismiss alert
The text editor contains a Vega-Lite spec written in https://hjson.github.io/[HJSON],
104
102
which is similar to JSON but optimized for human editing. HJSON supports:
@@ -134,7 +132,7 @@ Click "Update". The result is probably not what you expect. You should see a fla
134
132
line with 0 results.
135
133
136
134
You've only changed the index, so the difference must be the query is returning
137
-
no results. You can try the <<vega-browser-debugging-console, Vega debugging process>>,
135
+
no results. You can try the <<vega-debugging, Vega debugging process>>,
138
136
but intuition may be faster for this particular problem.
139
137
140
138
In this case, the problem is that you are querying the field `@timestamp`,
@@ -332,38 +330,29 @@ your spec:
332
330
333
331
If you copy and paste that into your Vega-Lite spec, and click "Update",
334
332
you will see a warning saying `Infinite extent for field "key": [Infinity, -Infinity]`.
335
-
Let's use our <<vega-browser-debugging-console, Vega debugging skills>> to understand why.
333
+
Let's use our <<vega-inspector, Vega debugging skills>> to understand why.
336
334
337
335
Vega-Lite generates data using the names `source_0` and `data_0`. `source_0` contains
338
336
the results from the {es} query, and `data_0` contains the visually encoded results
339
337
which are shown in the chart. To debug this problem, you need to compare both.
340
338
341
-
To look at the source, open the browser dev tools console and type
342
-
`VEGA_DEBUG.view.data('source_0')`. You will see:
339
+
To inspect data sets, go to *Inspect* and select *View: Vega debug*. You will see a menu with different data sources:
343
340
344
-
```js
345
-
[{
346
-
doc_count: 454
347
-
key: "Men's Clothing"
348
-
time_buckets: {buckets: Array(57)}
349
-
Symbol(vega_id): 12822
350
-
}, ...]
351
-
```
341
+
[role="screenshot"]
342
+
image::visualize/images/vega_lite_tutorial_3.png[Data set selector showing root, source_0, data_0, and marks]
352
343
353
-
To compare to the visually encoded data, open the browser dev tools console and type
354
-
`VEGA_DEBUG.view.data('data_0')`. You will see:
344
+
To look closer at the raw data in Vega, select the option for `source_0` in the dropdown:
355
345
356
-
```js
357
-
[{
358
-
doc_count: 454
359
-
key: NaN
360
-
time_buckets: {buckets: Array(57)}
361
-
Symbol(vega_id): 13879
362
-
}]
363
-
```
346
+
[role="screenshot"]
347
+
image::visualize/images/vega_lite_tutorial_4.png[Table for data_0 with columns key, doc_count and array of time_buckets]
348
+
349
+
To compare to the visually encoded data, change the dropdown selection to `data_0`. You will see:
350
+
351
+
[role="screenshot"]
352
+
image::visualize/images/vega_lite_tutorial_5.png[Table for data_0 where the key is NaN instead of a string]
364
353
365
354
The issue seems to be that the `key` property is not being converted the right way,
366
-
which makes sense because the `key` is now `Men's Clothing` instead of a timestamp.
355
+
which makes sense because the `key` is now category (`Men's Clothing`, `Women's Clothing`, etc.) instead of a timestamp.
367
356
368
357
To fix this, try updating the `encoding` of your Vega-Lite spec to:
369
358
@@ -382,21 +371,13 @@ To fix this, try updating the `encoding` of your Vega-Lite spec to:
382
371
}
383
372
```
384
373
385
-
This will show more errors, and you can inspect `VEGA_DEBUG.view.data('data_0')` to
374
+
This will show more errors, so you need to debug. Click *Inspect*, switch the view to *Vega Debug*, and switch to look at the visually encoded data in `data_0` to
386
375
understand why. This now shows:
387
376
388
-
```js
389
-
[{
390
-
doc_count: 454
391
-
key: "Men's Clothing"
392
-
time_buckets: {buckets: Array(57)}
393
-
time_buckets.buckets.doc_count: undefined
394
-
time_buckets.buckets.key: null
395
-
Symbol(vega_id): 14094
396
-
}]
397
-
```
377
+
[role="screenshot"]
378
+
image::visualize/images/vega_lite_tutorial_6.png[Table for data_0 showing that the column time_buckets.buckets.key is undefined]
398
379
399
-
It looks like the problem is that the `time_buckets` inner array is not being
380
+
It looks like the problem is that the `time_buckets.buckets` inner array is not being
400
381
extracted by Vega. The solution is to use a Vega-lite
401
382
https://vega.github.io/vega-lite/docs/flatten.html[flatten transformation], available in {kib} 7.9 and later.
402
383
If using an older version of Kibana, the flatten transformation is available in Vega
@@ -411,23 +392,10 @@ Add this section in between the `data` and `encoding` section:
411
392
```
412
393
413
394
This does not yet produce the results you expect. Inspect the transformed data
414
-
by typing `VEGA_DEBUG.view.data('data_0')` into the console again:
395
+
by selecting `data_0` in *Data sets* again:
415
396
416
-
```js
417
-
[{
418
-
doc_count: 453
419
-
key: "Men's Clothing"
420
-
time_bucket.buckets.doc_count: undefined
421
-
time_buckets: {buckets: Array(57)}
422
-
time_buckets.buckets: {
423
-
key_as_string: "2020-06-30T15:00:00.000Z",
424
-
key: 1593529200000,
425
-
doc_count: 2
426
-
}
427
-
time_buckets.buckets.key: null
428
-
Symbol(vega_id): 21564
429
-
}]
430
-
```
397
+
[role="screenshot"]
398
+
image::visualize/images/vega_lite_tutorial_7.png[Table showing data_0 with multiple pages of results, but undefined values in the column time_buckets.buckets.key]
431
399
432
400
The debug view shows `undefined` values where you would expect to see numbers, and
433
401
the cause is that there are duplicate names which are confusing Vega-Lite. This can
@@ -564,7 +532,9 @@ Now that you've enabled a selection, try moving the mouse around the visualizati
564
532
and seeing the points respond to the nearest position:
The selection is controlled by a Vega signal, and can be viewed using the <<vega-inspector, Vega Inspector>>.
568
538
569
539
The final result of this tutorial is this spec:
570
540
@@ -683,8 +653,6 @@ The final result of this tutorial is this spec:
683
653
[[vega-tutorial-update-kibana-filters-from-vega]]
684
654
=== Update {kib} filters from Vega
685
655
686
-
experimental[]
687
-
688
656
In this tutorial you will build an area chart in Vega using an {es} search query,
689
657
and add a click handler and drag handler to update {kib} filters.
690
658
This tutorial is not a full https://vega.github.io/vega/tutorials/[Vega tutorial],
@@ -935,6 +903,7 @@ The first step is to add a new `signal` to track the X position of the cursor:
935
903
}]
936
904
}
937
905
```
906
+
To learn more about inspecting signals, explore the <<vega-inspector, Vega Inspector>>.
938
907
939
908
Now add a new `mark` to indicate the current cursor position:
940
909
@@ -1756,4 +1725,4 @@ Customize and format the visualization using functions:
1756
1725
image::images/timelion-conditional04.png[]
1757
1726
{nbsp}
1758
1727
1759
-
For additional information on Timelion conditional capabilities, go to https://www.elastic.co/blog/timeseries-if-then-else-with-timelion[I have but one .condition()].
1728
+
For additional information on Timelion conditional capabilities, go to https://www.elastic.co/blog/timeseries-if-then-else-with-timelion[I have but one .condition()].
0 commit comments