diff --git a/_dashboards/visualize/viz-index.md b/_dashboards/visualize/viz-index.md new file mode 100644 index 0000000000..f3c37380a9 --- /dev/null +++ b/_dashboards/visualize/viz-index.md @@ -0,0 +1,139 @@ +--- +layout: default +title: Visualize +nav_order: 4 +has_children: true +--- + +# Visualize + +By visualizing your data, you translate complex, high-volume, or numerical data into a visual representation that is easier to process. OpenSearch Dashboards gives you data visualization tools to improve and automate the visual communication process. By using visual elements like charts, graphs, or maps to represent data, you can advance business intelligence and support data-driven decision-making and strategic planning. + +# Visualization types in OpenSearch Dashboards + +Dashboards has several visualization types to support your data analysis needs. The following sections provide an overview of the visualization types in Dashboards and their common use cases. + +## Area charts + +Area charts depict changes over time, and they are commonly used to show trends. Area charts more efficiently identify patterns in log data, such as sales data for a time range and trends over that time. See [Graphs and charts]({{site.url}}{{site.baseurl}}/dashboards/visualize/graphs-and-charts) to learn more about how to create and use them in Dashboards. + + Example area chart in OpenSearch Dashboards + +## Bar charts + +Bar charts, vertical or horizontal, compare categorical data and depict changes of a variable over a period of time. See [Graphs and charts]({{site.url}}{{site.baseurl}}/dashboards/visualize/graphs-and-charts) to learn more about how to create and use them in Dashboards. + + + + + + + + + + + + +
Example vertical bar chart in OpenSearch DashboardsExample horizontal bar chart in OpenSearch Dashboards
Vertical bar chartHorizontal bar chart
+ +## Controls + +Controls is a panel, instead of a visualization type, added to a dashboard to filter data. Controls gives users the capability to add interactive inputs to a dashboard. You can create two types of controls in Dashboards: **Options list** and **Range slider**. **Options list** is a dropdown options list that allows filtering of data by a terms aggregation, such as `machine.os.keyword`. **Range slider** allows filtering within specified value ranges, such as `hour_of_day`. + +Example visualization using controls to filter data in OpenSearch Dashboards + +## Data tables + +Data tables, or tables, show your raw data in tabular form. +See [Data tables]({{site.url}}{{site.baseurl}}/dashboards/visualize/tables) to learn how to create and use them in Dashboards. + +Example data table in OpenSearch Dashboards + +## Gantt charts + +Gantt charts show the start, end, and duration of unique events in a sequence. Gantt charts are useful in trace analytics, telemetry, and anomaly detection use cases where you want to understand interactions and dependencies between various events in a schedule. **Gantt chart** is currently a plugin, instead of built-in, visualization type in Dashboards. See [Gantt charts]({{site.url}}{{site.baseurl}}/dashboards/visualize/gantt/) to learn how to create and use them in Dashboards. + +Example Gantt chart in OpenSearch Dashboards + +## Gauge charts + +Gauge charts look similar to an analog speedometer that reads left to right from zero. They display how much there is of the thing you are measuring, and this measurement can exist alone or in relation to another measurement, such as tracking performance against benchmarks or goals. Reference [Gauge charts]({{site.url}}{{site.baseurl}}/dashboards/visualize/gauge) to learn how to create and use them in Dashboards. + +Example gauge chart in OpenSearch Dashboards + +## Heat maps + +A heat map is a view of a histogram (a graphical representation of the distribution of numerical data) over time. Instead of using bar height as a representation of frequency, as with a histogram, heat maps display data in a tabular form using colors to differentiate where values fall in a range. See [Heat maps]({{site.url}}{{site.baseurl}}/dashboards/visualize/heat-maps) to learn how to create and use them in Dashboards. + +Example heat map in OpenSearch Dashboards + +## Line charts + +Line charts compare changes in measured values over a period of time, such as gross sales by month or gross sales and net sales by month. See [Graphs and charts]({{site.url}}{{site.baseurl}}/dashboards/visualize/graphs-and-charts) to learn more about how to create and use them in Dashboards. + +Example line graph in OpenSearch Dashboards + +## Maps + +You can create two types of maps in Dashboards: Coordinate maps and Region maps. Coordinate maps show the difference between data values for each location by size. Region maps show the difference between data values for each location by varying shades of color. +### Coordinate maps + +Coordinate maps show location-based data on a map. Use coordinate maps to visualize GPS data (latitude and longitude coordinates) on a map. For information about OpenSearch-supported coordinate field types, see [Geographic field types]({{site.url}}{{site.baseurl}}/opensearch/supported-field-types/geo-shape/) and [Cartesian field types]({{site.url}}{{site.baseurl}}/opensearch/supported-field-types/xy/). + +### Region maps + +Region maps show patterns and trends across geographic locations. A region map is one of the basemaps in Dashboards. For information about creating custom vector maps in Dashboards, see [Region map visualizations](https://opensearch.org/docs/latest/dashboards/geojson-regionmaps/). + +See [Maps]({{site.url}}{{site.baseurl}}/dashboards/visualize/maps/) to learn how to create and use them in Dashboards. + +Example coordinate map in OpenSearch Dashboards + +## Markdown + +Markdown is a the markup language used in Dashboards to provide context to your data visualizations. Using Markdown, you can display information and instructions along with the visualization. See [Markdown]({{site.url}}{{site.baseurl}}/dashboards/visualize/markdown/) to learn how to use this markup language with visualizations in Dashboards. + +Example coordinate map in OpenSearch Dashboards + +## Metric values + +Metric values, or number charts, compare values in different measures. For example, you can create a metrics visualization to compare two values, such as actual sales compared to sales goals. See [Metric values]({{site.url}}{{site.baseurl}}/dashboards/visualize/metric-values) to learn how to create and use them in Dashboards. + +Example metric chart in OpenSearch Dashboards + +## Pie charts + +Pie charts compare values for items in a dimension, such as a percentage of a total amount. See [Pie charts]({{site.url}}{{site.baseurl}}/dashboards/visualize/pie-charts/) to learn how to create and use them in Dashboards. + +Example pie chart in OpenSearch Dashboards + +## TSVB + +The time-series visual builder (TSVB) is a data visualization tool in Dashboards used to create detailed time-series visualizations. For example, you can use TSVB to build visualizations that show data over time, such as flights by status over time or flight delays by delay type over time. Currently, TSVB can be used to create the following Dashboards visualization types: Area, Line, Metric, Gauge, Markdown, and Data Table. See [TSVB]({{site.url}}{{site.baseurl}}/dashboards/visualize/TSVB/) to learn how to create and use this set of visualization types in Dashboards. + +Example TSVB in OpenSearch Dashboards + +## Tag cloud + +Tag (or word) clouds are a way to display how often a word is used in relation to other words in a dataset. The best use for this type of visual is to show word or phrase frequency. See [Tag clouds]({{site.url}}{{site.baseurl}}/dashboards/visualize/tag-clouds/) to learn how to create and use in Dashboards. + +Example Tag cloud in OpenSearch Dashboards + +## Timeline + +Timeline is a data visualization tool in Dashboards that you can use to create time-series visualizations. Currently, Timeline can be used to create the following Dashboards visualization types: Area and Line. See [Timelines]({{site.url}}{{site.baseurl}}/dashboards/visualize/timeline/) to learn how to create and use them in Dashboards. + +Example Timeline in OpenSearch Dashboards + +## VisBuilder + +VisBuilder is a drag-and-drop data visualization tool in Dashboards. It gives you an immediate view of your data without the need to preselect the data source or visualization type output. Currently, VisBuilder can be used to create the following Dashboards visualization types: Area, Bar, Line, Metric, and Data Table. See [VisBuilder]({{site.url}}{{site.baseurl}}/dashboards/visbuilder/) to learn how to create and use drag-and-drop visualizations in Dashboards. + +Example Timeline in OpenSearch Dashboards + +## Vega + +[Vega](https://vega.github.io/vega/) and [Vega-Lite](https://vega.github.io/vega-lite/) are open-source, declarative language visualization grammars for creating, sharing, and saving interactive data visualizations. Vega visualizations give you the flexibility to visualize multidimensional data using a layered approach in order to build and manipulate visualizations in a structured manner. Vega can be used to create customized visualizations using any Dashboards visualization type. + +See [Vega and Vega-Lite]({{site.url}}{{site.baseurl}}/dashboards/visualize/vega) to learn how to create and use these visualization grammars in Dashboards. + +Example Vega visualization with JSON specification in OpenSearch Dashboards \ No newline at end of file diff --git a/images/TSVB-1.png b/images/TSVB-1.png new file mode 100644 index 0000000000..ab47a22b99 Binary files /dev/null and b/images/TSVB-1.png differ diff --git a/images/area-chart-1.png b/images/area-chart-1.png new file mode 100644 index 0000000000..e192adf84b Binary files /dev/null and b/images/area-chart-1.png differ diff --git a/images/bar-chart-1.png b/images/bar-chart-1.png new file mode 100644 index 0000000000..5ff095c792 Binary files /dev/null and b/images/bar-chart-1.png differ diff --git a/images/bar-horizontal-1.png b/images/bar-horizontal-1.png new file mode 100644 index 0000000000..5143a58540 Binary files /dev/null and b/images/bar-horizontal-1.png differ diff --git a/images/controls-1.png b/images/controls-1.png new file mode 100644 index 0000000000..24fa38b9ae Binary files /dev/null and b/images/controls-1.png differ diff --git a/images/data-table-1.png b/images/data-table-1.png new file mode 100644 index 0000000000..ff21ecdb89 Binary files /dev/null and b/images/data-table-1.png differ diff --git a/images/gauge-1.png b/images/gauge-1.png new file mode 100644 index 0000000000..2a7d1aadf9 Binary files /dev/null and b/images/gauge-1.png differ diff --git a/images/heat-map-1.png b/images/heat-map-1.png new file mode 100644 index 0000000000..12cd1e8348 Binary files /dev/null and b/images/heat-map-1.png differ diff --git a/images/line-1.png b/images/line-1.png new file mode 100644 index 0000000000..3883a98bf0 Binary files /dev/null and b/images/line-1.png differ diff --git a/images/map-1.png b/images/map-1.png new file mode 100644 index 0000000000..c23146c96d Binary files /dev/null and b/images/map-1.png differ diff --git a/images/markdown-1.png b/images/markdown-1.png new file mode 100644 index 0000000000..7bc75302dd Binary files /dev/null and b/images/markdown-1.png differ diff --git a/images/metric-chart-1.png b/images/metric-chart-1.png new file mode 100644 index 0000000000..cb78d477ab Binary files /dev/null and b/images/metric-chart-1.png differ diff --git a/images/pie-1.png b/images/pie-1.png new file mode 100644 index 0000000000..031fa37cfa Binary files /dev/null and b/images/pie-1.png differ diff --git a/images/timeline-1.png b/images/timeline-1.png new file mode 100644 index 0000000000..f0fc84f43f Binary files /dev/null and b/images/timeline-1.png differ diff --git a/images/vega-1.png b/images/vega-1.png new file mode 100644 index 0000000000..73405e27f9 Binary files /dev/null and b/images/vega-1.png differ diff --git a/images/viz-type-UI.png b/images/viz-type-UI.png new file mode 100644 index 0000000000..23350ea7dc Binary files /dev/null and b/images/viz-type-UI.png differ diff --git a/images/word-cloud-1.png b/images/word-cloud-1.png new file mode 100644 index 0000000000..7e015a6325 Binary files /dev/null and b/images/word-cloud-1.png differ