diff --git a/docs/sources/panels-visualizations/query-transform-data/transform-data/index.md b/docs/sources/panels-visualizations/query-transform-data/transform-data/index.md index e23162e2777..4ec1012b6ec 100644 --- a/docs/sources/panels-visualizations/query-transform-data/transform-data/index.md +++ b/docs/sources/panels-visualizations/query-transform-data/transform-data/index.md @@ -1263,9 +1263,13 @@ This transformation allows you to manipulate and analyze geospatial data, enabli ### Time series to table transform -Use this transformation to convert time series results into a table, transforming a time series data frame into a **Trend** field. The **Trend** field can then be rendered using the [sparkline cell type][], generating an inline sparkline for each table row. If there are multiple time series queries, each will result in a separate table data frame. These can be joined using join or merge transforms to produce a single table with multiple sparklines per row. +Use this transformation to convert time series results into a table, transforming a time series data frame into a **Trend** field which can then be used with the [sparkline cell type][]. If there are multiple time series queries, each will result in a separate table data frame. These can be joined using join or merge transforms to produce a single table with multiple sparklines per row. -For each generated **Trend** field value, a calculation function can be selected. The default is **Last non-null value**. This value is displayed next to the sparkline and used for sorting table rows. +{{< figure src="/static/img/docs/transformations/table-sparklines.png" class="docs-image--no-shadow" max-width= "1100px" alt="A table panel showing multiple values and their corresponding sparklines." >}} + +For each generated **Trend** field value, a calculation function can be selected. This value is displayed next to the sparkline and will be used for sorting table rows. + +{{< figure src="/static/img/docs/transformations/timeseries-table-select-stat.png" class="docs-image--no-shadow" max-width= "1100px" alt="A select box showing available statistics that can be calculated." >}} > **Note:** This transformation is available in Grafana 9.5+ as an opt-in beta feature. Modify the Grafana [configuration file][] to use it. diff --git a/docs/sources/panels-visualizations/visualizations/table/index.md b/docs/sources/panels-visualizations/visualizations/table/index.md index 8c0c66cb480..f7a7a81923d 100644 --- a/docs/sources/panels-visualizations/visualizations/table/index.md +++ b/docs/sources/panels-visualizations/visualizations/table/index.md @@ -27,7 +27,7 @@ weight: 100 # Table -Tables are very flexible, supporting multiple modes for time series and for tables, annotation, and raw JSON data. This visualization also provides date formatting, value formatting, and coloring options. +Tables are very flexible, supporting multiple modes for time series and for tables, annotation, and raw JSON data. This visualization also provides date formatting, value formatting, and coloring options. In addition to formatting and coloring options, Grafana also provides a variety of _Cell types_ which you can use to display gauges, sparklines, and other rich data displays. {{< figure src="/static/img/docs/tables/table_visualization.png" max-width="1200px" lightbox="true" caption="Table visualization" >}} @@ -148,10 +148,12 @@ If you have a field value that is an image URL or a base64 encoded image you can ### Sparkline -Shows value rendered as a sparkline. Requires [time series to table][] data transform. +Shows values rendered as a sparkline. You can show sparklines using the [Time series to table transformation][] on data with multiple time series to process it into a format the table can show. {{< figure src="/static/img/docs/tables/sparkline2.png" max-width="500px" caption="Sparkline" class="docs-image--no-shadow" >}} +You can be customize sparklines with many of the same options as the [Time series panel][] including line width, fill opacity, and more. You can also change the color of the sparkline by updating the [color scheme][] in the _Standard options_ section of the panel configuration. + ## Cell value inspect Enables value inspection from table cell. The raw value is presented in a modal window. @@ -226,8 +228,14 @@ If you want to show the number of rows in the dataset instead of the number of v [calculations]: "/docs/grafana/ -> /docs/grafana//panels-visualizations/query-transform-data/calculation-types" [calculations]: "/docs/grafana-cloud/ -> /docs/grafana-cloud/visualizations/panels-visualizations/query-transform-data/calculation-types" -[time series to table]: "/docs/grafana/ -> /docs/grafana//panels-visualizations/query-transform-data/transform-data#time-series-to-table-transform" -[time series to table]: "/docs/grafana-cloud/ -> /docs/grafana//panels-visualizations/query-transform-data/transform-data#time-series-to-table-transform" +[Time series to table transformation]: "/docs/grafana/ -> /docs/grafana//panels-visualizations/query-transform-data/transform-data#time-series-to-table-transform" +[Time series to table transformation]: "/docs/grafana-cloud/ -> /docs/grafana//panels-visualizations/query-transform-data/transform-data#time-series-to-table-transform" + +[Time series panel]: "/docs/grafana/ -> /docs/grafana//panels-visualizations/visualizations/time-series" +[Time series panel]: "/docs/grafana-cloud/ -> /docs/grafana-cloud/visualizations/panels-visualizations/visualizations/time-series" + +[color scheme]: "/docs/grafana/ -> /docs/grafana//panels-visualizations/configure-standard-options#color-scheme" +[color scheme]: "/docs/grafana-cloud -> /docs/grafana-cloud/visualizations/panels-visualizations/configure-standard-options/#color-scheme" [configuration file]: "/docs/grafana/ -> /docs/grafana//setup-grafana/configure-grafana#configuration-file-location" [configuration file]: "/docs/grafana-cloud/ -> /docs/grafana//setup-grafana/configure-grafana#configuration-file-location" diff --git a/public/app/features/transformers/docs/content.ts b/public/app/features/transformers/docs/content.ts index f83e8cef41e..d75462a3d8c 100644 --- a/public/app/features/transformers/docs/content.ts +++ b/public/app/features/transformers/docs/content.ts @@ -1355,11 +1355,24 @@ This transformation allows you to manipulate and analyze geospatial data, enabli }, timeSeriesTable: { name: 'Time series to table transform', - getHelperDocs: function () { + getHelperDocs: function (imageRenderType: ImageRenderType = ImageRenderType.ShortcodeFigure) { return ` -Use this transformation to convert time series results into a table, transforming a time series data frame into a **Trend** field. The **Trend** field can then be rendered using the [sparkline cell type][], generating an inline sparkline for each table row. If there are multiple time series queries, each will result in a separate table data frame. These can be joined using join or merge transforms to produce a single table with multiple sparklines per row. +Use this transformation to convert time series results into a table, transforming a time series data frame into a **Trend** field which can then be used with the [sparkline cell type][]. If there are multiple time series queries, each will result in a separate table data frame. These can be joined using join or merge transforms to produce a single table with multiple sparklines per row. + +${buildImageContent( + '/static/img/docs/transformations/table-sparklines.png', + imageRenderType, + 'A table panel showing multiple values and their corresponding sparklines.' +)} + +For each generated **Trend** field value, a calculation function can be selected. This value is displayed next to the sparkline and will be used for sorting table rows. + +${buildImageContent( + '/static/img/docs/transformations/timeseries-table-select-stat.png', + imageRenderType, + 'A select box showing available statistics that can be calculated.' +)} -For each generated **Trend** field value, a calculation function can be selected. The default is **Last non-null value**. This value is displayed next to the sparkline and used for sorting table rows. > **Note:** This transformation is available in Grafana 9.5+ as an opt-in beta feature. Modify the Grafana [configuration file][] to use it. `;