Skip to content

Commit

Permalink
Update visuals on Manage & Share Dashboards and Tutorials + consisten…
Browse files Browse the repository at this point in the history
…cy edits (elastic#195152)

## Summary

Updated visuals on the [Manage and Share
Dashboards](https://www.elastic.co/guide/en/kibana/master/_manage_dashboards.html)
pages and
[Tutorials](https://www.elastic.co/guide/en/kibana/master/_tutorials.html)
+ made some consistency edits to the text.

Rel:[elastic#457](elastic/platform-docs-team#457) and
[elastic#466](elastic/platform-docs-team#466)

---------

Co-authored-by: florent-leborgne <florent.leborgne@elastic.co>
(cherry picked from commit 296a49c)
  • Loading branch information
wajihaparvez committed Oct 7, 2024
1 parent 8811474 commit 592a7cf
Show file tree
Hide file tree
Showing 7 changed files with 46 additions and 42 deletions.
Binary file not shown.
Loading
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
Loading
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
49 changes: 23 additions & 26 deletions docs/user/dashboard/lens-advanced.asciidoc
Original file line number Diff line number Diff line change
Expand Up @@ -6,25 +6,25 @@ In this tutorial, you'll use the ecommerce sample data to analyze sales trends,
When you're done, you'll have a complete overview of the sample web logs data.

[role="screenshot"]
image::images/lens_timeSeriesDataTutorialDashboard_8.3.png[Final dashboard with ecommerce sample data]
image::images/lens_timeSeriesDataTutorialDashboard_8.3.png[Final dashboard with eCommerce sample data]

Before you begin, you should be familiar with the <<kibana-concepts-analysts>>.

[discrete]
[[add-the-data-and-create-the-dashboard-advanced]]
=== Add the data and create the dashboard

Add the sample ecommerce data, and create and set up the dashboard.
Add the sample eCommerce data, and create and set up the dashboard.

. On the home page, click *Try sample data*.

. Click *Other sample data sets*.
. Expand *Other sample data sets*.

. On the *Sample eCommerce orders* card, click *Add data*.

Create the dashboard where you'll display the visualization panels.

. Open the main menu, then click *Dashboard*.
. Open the main menu, then click *Dashboards*.

. On the *Dashboards* page, click *Create dashboard*.

Expand All @@ -42,7 +42,7 @@ Open the visualization editor, then make sure the correct fields appear.
[[custom-time-interval]]
=== Create visualizations with custom time intervals

When you create visualizations with time series data, you can use the default time interval, or increase and decrease the interval. For performance reasons, the visualization editor allows you to choose the minimum time interval, but not the exact time interval. The interval limit is controlled by the <<histogram-maxbars, `histogram:maxBars`>> setting and <<set-time-filter,time range>>.
When you create visualizations with time series data, you can use the default time interval or increase and decrease the interval. For performance reasons, the visualization editor allows you to choose the minimum time interval, but not the exact time interval. The interval limit is controlled by the <<histogram-maxbars, `histogram:maxBars`>> setting and <<set-time-filter,time range>>.

To analyze the data with a custom time interval, create a bar chart that shows you how many orders were made at your store every hour:

Expand All @@ -55,13 +55,13 @@ The visualization editor creates a bar chart.
[role="screenshot"]
image::images/lens_clickAndDragZoom_7.16.gif[Cursor clicking and dragging across the bars to zoom in on the data]

. In the layer pane, click *Count of Records*.
. In the layer pane, click *Count of records*.

.. Click *Advanced*.

.. From the *Normalize by unit* dropdown, select *per hour*, then click *Close*.
+
*Normalize by unit* converts `Count of Records` into `Count of records per hour` by dividing by 24.
*Normalize by unit* converts `Count of records` into `Count of records per hour` by dividing by 24.

.. In the *Name* field, enter `Number of orders`.

Expand All @@ -87,7 +87,7 @@ To identify the 75th percentile of orders, add a reference line:

.. To display the name, select *Name* from *Text decoration*.

.. From the *Icon* dropdown, select *Tag*.
.. From the *Icon decoration* dropdown, select *Tag*.

.. In the *Color* field, enter `#E7664C`.

Expand Down Expand Up @@ -120,12 +120,12 @@ Create the 95th price distribution percentile:

. In the *Name* field, enter `95th`, then click *Close*.

To copy a function, you drag it to the *Drop a field or click to add* field within the same group. To create the 90th percentile, duplicate the `95th` percentile:
To copy a function, you drag it to the *Add or drag-and-drop a field* area within the same group. To create the 90th percentile, duplicate the `95th` percentile:

. Drag the *95th* field to *Add or drag-and-drop a field* for *Vertical axis*.
+
[role="screenshot"]
image::images/lens_advanced_2_2.gif[Easily duplicate the items with drag and drop]
image::https://images.contentstack.io/v3/assets/bltefdd0b53724fa2ce/blt8fb6969daa820faf/6700642c363a96bb08f48bee/drag-and-drop-a-field-8.16.0.gif[Easily duplicate the items with drag and drop]

. Click *95th [1]*, then enter `90` in the *Percentile* field.

Expand Down Expand Up @@ -162,7 +162,7 @@ To analyze multiple visualization types, create an area chart that displays the

Add a layer to display the customer traffic:

. In the layer pane, click *Add layer > Visualization*.
. In the layer pane, click *Add layer > Visualization > Line*.

. From the *Available fields* list, drag *customer_id* to the *Vertical Axis* field in the second layer.

Expand All @@ -178,11 +178,6 @@ image::images/lens_advancedTutorial_numberOfCustomers_8.5.0.png[Number of custom

. From the *Available fields* list, drag *order_date* to the *Horizontal Axis* field in the second layer.

. In the second layer, open the *Layer visualization type* menu, then click *Line*.
+
[role="screenshot"]
image::images/lens_layerVisualizationTypeMenu_7.16.png[Layer visualization type menu]

. To change the position of the legend, open the *Legend* menu, then select the *Alignment* arrow that points up.
+
[role="screenshot"]
Expand Down Expand Up @@ -251,7 +246,7 @@ Configure the cumulative sum of store orders:

. From the *Available fields* list, drag *Records* to the workspace.

. In the layer pane, click *Count of Records*.
. In the layer pane, click *Count of records*.

. Click the *Cumulative sum* function.

Expand All @@ -271,6 +266,8 @@ Filter the results to display the data for only Saturday and Sunday:
+
The <<kuery-query,KQL filter>> displays all documents where `day_of_week` matches `Saturday` or `Sunday`.

. Click *Close*.

. Open the *Legend* menu, then click *Hide* next to *Display*.
+
[role="screenshot"]
Expand All @@ -282,7 +279,7 @@ image::images/lens_areaChartCumulativeNumberOfSalesOnWeekend_7.16.png[Area chart
[[compare-time-ranges]]
=== Compare time ranges

With *Time shift*, you can compare the data from different time ranges. To make sure the data correctly displays, choose a multiple of the date histogram interval when you use multiple time shifts. For example, you are unable to use a *36h* time shift for one series, and a *1d* time shift for the second series if the interval is *days*.
With *Time shift*, you can compare the data from different time ranges. To make sure the data displays correctly, choose a multiple of the date histogram interval when you use multiple time shifts. For example, you are unable to use a *36h* time shift for one series, and a *1d* time shift for the second series if the interval is *days*.

To compare two time ranges, create a line chart that compares the sales in the current week with sales from the previous week:

Expand All @@ -292,11 +289,11 @@ To compare two time ranges, create a line chart that compares the sales in the c

. From the *Available fields* list, drag *Records* to the workspace.

. To duplicate *Count of Records*, drag *Count of Records* to *Add or drag-and-drop a field* for *Vertical axis* in the layer pane.
. To duplicate *Count of records*, drag *Count of records* to *Add or drag-and-drop a field* for *Vertical axis* in the layer pane.

To create a week-over-week comparison, shift *Count of Records [1]* by one week:
To create a week-over-week comparison, shift *Count of records [1]* by one week:

. In the layer pane, click *Count of Records [1]*.
. In the layer pane, click *Count of records [1]*.

. Click *Advanced*, select *1 week ago* from the *Time shift* dropdown, then click *Close*.
+
Expand All @@ -322,9 +319,9 @@ To compare time range changes as a percent, create a bar chart that compares the

. From the *Available fields* list, drag *Records* to the workspace.

. In the layer pane, click *Count of Records*.
. In the layer pane, click *Count of records*.

. Click *Formula*, then enter `count() / count(shift='1w') - 1`.
. Click *Formula*, then enter `count() / count(shift='1w') - 1` in the *Formula* field.

. In the *Name* field, enter `Percent of change`.

Expand Down Expand Up @@ -375,15 +372,15 @@ image::images/lens_table_over_time.png[Date histogram table with groups for the
[discrete]
=== Save the dashboard

Now that you have a complete overview of your ecommerce sales data, save the dashboard.
Now that you have a complete overview of your eCommerce sales data, save the dashboard.

. In the toolbar, click *Save*.

. On the *Save dashboard* window, enter `Ecommerce sales`, then click *Save*.
. On the *Save dashboard* window, enter `eCommerce sales`.

. Select *Store time with dashboard*.

. Click *Save*.

[role="screenshot"]
image::images/lens_timeSeriesDataTutorialDashboard_8.3.png[Final dashboard with ecommerce sample data]
image::images/lens_timeSeriesDataTutorialDashboard_8.3.png[Final dashboard with eCommerce sample data]
4 changes: 3 additions & 1 deletion docs/user/dashboard/share-dashboards.asciidoc
Original file line number Diff line number Diff line change
Expand Up @@ -4,7 +4,9 @@
[[share-the-dashboard]]
== Share dashboards

To share the dashboard with a larger audience, click *Share* in the toolbar. For detailed information about the sharing options, refer to <<reporting-getting-started,Reporting>>.
To share a dashboard with a larger audience, click *Share* in the toolbar. For detailed information about the sharing options, refer to <<reporting-getting-started,Reporting>>.

image::https://images.contentstack.io/v3/assets/bltefdd0b53724fa2ce/blt49f2b5a80ec89a34/66b9e919af508f4ac182c194/share-dashboard.gif[getting a shareable link for a dashboard]

TIP: When sharing a dashboard with a link while a panel is in maximized view, the generated link will also open the dashboard on the same maximized panel view.

Expand Down
Original file line number Diff line number Diff line change
Expand Up @@ -20,13 +20,13 @@ Add the sample web logs data, and create and set up the dashboard.

. On the home page, click *Try sample data*.

. Click *Other sample data sets*.
. Expand *Other sample data sets*.

. On the *Sample web logs* card, click *Add data*.

Create the dashboard where you'll display the visualization panels.

. Open the main menu, then click *Dashboard*.
. Open the main menu, then click *Dashboards*.

. Click *Create dashboard*.

Expand Down Expand Up @@ -57,7 +57,10 @@ To create the visualizations in this tutorial, you'll use the following fields:

* *referer.keyword*

To see the most frequent values in a field, hover over the field name, then click *i*.
Click a field name to view more details, such as its top values and distribution.

[role="screenshot"]
image::https://images.contentstack.io/v3/assets/bltefdd0b53724fa2ce/bltff29bc11413cc5d8/66fdc386762d3a15135abec4/tutorial-field-top-values-distribution.gif[Clicking a field name to view more details]

[discrete]
[[view-the-number-of-website-visitors]]
Expand Down Expand Up @@ -141,9 +144,9 @@ image::images/lens_lineChartMetricOverTimeBottomAxis_8.7.png[Bottom axis menu]

Since you removed the axis labels, add a panel title:

. Open the panel menu, then select *Panel settings*.
. Open the panel menu, then select *Settings*.

. In the *Title* field, enter `Median of bytes`, then click *Save*.
. In the *Title* field, enter `Median of bytes`, then click *Apply*.
+
[role="screenshot"]
image::images/lens_lineChartMetricOverTime_8.4.0.png[Line chart that displays metric data over time]
Expand All @@ -167,7 +170,7 @@ The visualization editor automatically applies the *Unique count* function. If y
. Drag *request.keyword* to the workspace.
+
[role="screenshot"]
image::images/lens_end_to_end_2_1_1.png[Vertical bar chart with top values of request.keyword by most unique visitors]
image::images/tutorial-top-values-of-field-8.16.0.png[Vertical bar chart with top values of request.keyword by most unique visitors]
+
When you drag a text or IP address field to the workspace,
the editor adds the *Top values* function ranked by *Count of records* to show the most frequent values.
Expand Down Expand Up @@ -208,7 +211,7 @@ Create a proportional visualization that helps you determine if your users trans

. Click the *Sum* quick function, then click *Close*.

. From the *Available fields* list, drag *bytes* to the *Break down by* field in the layer pane.
. From the *Available fields* list, drag *bytes* to the *Breakdown* field in the layer pane.

To select documents based on the number range of a field, use the *Intervals* function.
When the ranges are non numeric, or the query requires multiple clauses, you could use the *Filters* function.
Expand Down Expand Up @@ -245,9 +248,9 @@ image::images/lens_pieChartCompareSubsetOfDocs_7.16.png[Pie chart that compares

Add a panel title:

. Open the panel menu, then select *Panel settings*.
. Open the panel menu, then select *Settings*.

. In the *Title* field, enter `Sum of bytes from large requests`, then click *Save*.
. In the *Title* field, enter `Sum of bytes from large requests`, then click *Apply*.

[discrete]
[[histogram]]
Expand Down Expand Up @@ -278,9 +281,9 @@ image::images/lens_barChartDistributionOfNumberField_7.16.png[Bar chart that dis

Add a panel title:

. Open the panel menu, then select *Panel settings*.
. Open the panel menu, then select *Settings*.

. In the *Title* field, enter `Website traffic`, then click *Save*.
. In the *Title* field, enter `Website traffic`, then click *Apply*.

[discrete]
[[treemap]]
Expand Down Expand Up @@ -342,9 +345,9 @@ image::images/lens_treemapMultiLevelChart_7.16.png[Treemap visualization]

Add a panel title:

. Open the panel menu, then select *Panel settings*.
. Open the panel menu, then select *Settings*.

. In the *Title* field, enter `Page views by location and referrer`, then click *Save*.
. In the *Title* field, enter `Page views by location and referrer`, then click *Apply*.

[float]
[[arrange-the-lens-panels]]
Expand Down
6 changes: 4 additions & 2 deletions docs/user/dashboard/view-dashboard-usage.asciidoc
Original file line number Diff line number Diff line change
@@ -1,7 +1,9 @@
= View dashboard usage

You can check how much a dashboard is being used from its details, with a graph showing the total number of views during the last 90 days.
You can check how much a dashboard is being used by clicking its *View details* icon in your list of dashboards.

You can access a dashboard details by clicking its associated information icon from your list of dashboards.
image:images/view-details-dashboards-8.16.0.png[View details icon in the list of dashboards, width=105%]

These details include a graph showing the total number of views during the last 90 days.

image:images/dashboard-usage-count.png[Graph showing the number of views during the last 90 days]

0 comments on commit 592a7cf

Please sign in to comment.