Skip to content

Commit 02ea4fa

Browse files
PMEds28PMEds28
authored
Merge pull request #6570 from EdB-MSFT/area-charts
added example to area charts
2 parents 687db80 + ec882ac commit 02ea4fa

File tree

9 files changed

+93
-15
lines changed

9 files changed

+93
-15
lines changed

‎data-explorer/kusto/query/media/visualization-areachart/area-chart-with-properties.png‎

46.4 KB
Loading

‎data-explorer/kusto/query/media/visualization-areachart/area-chart-with-split-panels.png‎

93.4 KB
Loading

‎data-explorer/kusto/query/render-operator.md‎

Lines changed: 2 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -129,7 +129,7 @@ three kinds of columns:
129129
|`xtitle` |The title of the x-axis (of type `string`). |
130130
|`yaxis` |How to scale the y-axis (`linear` or `log`). |
131131
|`ycolumns` |Comma-delimited list of columns that consist of the values provided per value of the x column.|
132-
|`ysplit` |How to split multiple the visualization. For more information, see [`y-split` property](#ysplit-property). |
132+
|`ysplit` |How to split the visualization into multiple y-axis values. For more information, see [`y-split` property](#ysplit-property). |
133133
|`ytitle` |The title of the y-axis (of type `string`). |
134134
|`anomalycolumns`|Property relevant only for `anomalychart`. Comma-delimited list of columns, which will be considered as anomaly series and displayed as points on the chart|
135135

@@ -177,7 +177,7 @@ Some visualizations support splitting into multiple y-axis values:
177177
|----------|------------------------------------------------------------------|
178178
|`none` |A single y-axis is displayed for all series data. (Default) |
179179
|`axes` |A single chart is displayed with multiple y-axes (one per series).|
180-
|`panels` |One chart is rendered for each `ycolumn` value (up to some limit).|
180+
|`panels` |One chart is rendered for each `ycolumn` value. Maximum five panels.|
181181

182182
## How to render continuous data
183183

‎data-explorer/kusto/query/visualization-anomalychart.md‎

Lines changed: 2 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -45,7 +45,7 @@ All properties are optional.
4545
|`xtitle` |The title of the x-axis (of type `string`). |
4646
|`yaxis` |How to scale the y-axis (`linear` or `log`). |
4747
|`ycolumns` |Comma-delimited list of columns that consist of the values provided per value of the x column.|
48-
|`ysplit` |How to split multiple the visualization. For more information, see [Multiple y-axes](#ysplit-property). |
48+
|`ysplit` |How to split the visualization into multiple y-axis values. For more information, see [Multiple y-axes](#ysplit-property). |
4949
|`ytitle` |The title of the y-axis (of type `string`). |
5050
|`anomalycolumns`| Comma-delimited list of columns, which will be considered as anomaly series and displayed as points on the chart|
5151

@@ -57,7 +57,7 @@ This visualization supports splitting into multiple y-axis values. The supported
5757
|----------|------------------------------------------------------------------|
5858
|`none` |A single y-axis is displayed for all series data. (Default) |
5959
|`axes` |A single chart is displayed with multiple y-axes (one per series).|
60-
|`panels` |One chart is rendered for each `ycolumn` value (up to some limit).|
60+
|`panels` |One chart is rendered for each `ycolumn` value. Maximum five panels.|
6161

6262
## Example
6363

‎data-explorer/kusto/query/visualization-areachart.md‎

Lines changed: 82 additions & 4 deletions
Original file line numberDiff line numberDiff line change
@@ -24,8 +24,8 @@ The area chart visual shows a time-series relationship. The first column of the
2424
## Parameters
2525

2626
| Name | Type | Required | Description |
27-
| -- | -- | -- | -- |
28-
| *T* | `string` | :heavy_check_mark: | Input table name.
27+
|--|--|--|--|
28+
| *T* | `string` | :heavy_check_mark: | Input table name. |
2929
| *propertyName*, *propertyValue* | `string` | | A comma-separated list of key-value property pairs. See [supported properties](#supported-properties).|
3030

3131
::: moniker range="microsoft-fabric || azure-data-explorer"
@@ -48,8 +48,20 @@ All properties are optional.
4848
|`xtitle` |The title of the x-axis (of type `string`). |
4949
|`yaxis` |How to scale the y-axis (`linear` or `log`). |
5050
|`ycolumns` |Comma-delimited list of columns that consist of the values provided per value of the x column.|
51+
|`ysplit` |How to split the y-axis values for multiple visualizations. |
5152
|`ytitle` |The title of the y-axis (of type `string`). |
5253

54+
#### `ysplit` property
55+
56+
This visualization supports splitting into multiple y-axis values:
57+
58+
|`ysplit` |Description |
59+
|----------|------------------------------------------------------------------|
60+
|`none` |A single y-axis is displayed for all series data. (Default) |
61+
|`axes` |A single chart is displayed with multiple y-axes (one per series).|
62+
|`panels` |One chart is rendered for each `ycolumn` value. Maximum five panels.|
63+
64+
5365
::: moniker-end
5466

5567
::: moniker range="azure-monitor || microsoft-sentinel"
@@ -78,7 +90,11 @@ The supported values of this property are:
7890
| `stacked` | Stack "areas" to the right. |
7991
| `stacked100` | Stack "areas" to the right and stretch each one to the same width as the others. |
8092

81-
## Example
93+
## Examples
94+
95+
### Simple area chart
96+
97+
The following example shows a basic area chart visualization.
8298

8399
:::moniker range="azure-data-explorer"
84100
> [!div class="nextstepaction"]
@@ -90,4 +106,66 @@ demo_series3
90106
| render areachart
91107
```
92108

93-
:::image type="content" source="media/visualization-areachart/area-chart.png" alt-text="Screenshot of area chart visualization." lightbox="media/visualization-areachart/area-chart.png":::
109+
:::image type="content" source="media/visualization-areachart/area-chart.png" alt-text="Screenshot of area chart visualization." lightbox="media/visualization-areachart/area-chart.png":::
110+
111+
### Area chart using properties
112+
113+
The following example shows an area chart using multiple property settings.
114+
115+
:::moniker range="azure-data-explorer"
116+
> [!div class="nextstepaction"]
117+
> <a href="https://dataexplorer.azure.com/clusters/help/databases/Samples?query=H4sIAAAAAAAAA02Quw6DMAxF936FlQkkhvIBbB26dWj3ygQLLEiKgkOh6sc3UF6ebu6JnzetfYtWjxcS0sIve%2FpC541Bxx8CwL58Cpk2m1T0CIocincUJzOrvOGCZfzz6%2FKKIR8hZxs92FAnaNoE0ioOpR3ZghygI9QVOjlBiDdLBRHMeoqabQEZeBtSdU1FspGGSppZzx3nDe1kFJaGIFP30C2IHhtP6sAN25CXno8WDpCl54M1LFVATZOrZPI2uHZYtwQMo8h%2BEjX%2FjH%2FxorAnUwEAAA%3D%3D" target="_blank">Run the query</a>
118+
::: moniker-end
119+
120+
```kusto
121+
OccupancyDetection
122+
| summarize avg_temp= avg(Temperature), avg_humidity= avg(Humidity) by bin(Timestamp, 1h)
123+
| render areachart
124+
with (
125+
kind = unstacked,
126+
legend = visible,
127+
ytitle ="Sample value",
128+
ymin = 10,
129+
ymax =100,
130+
xtitle = "Time",
131+
title ="Humidity and temperature"
132+
)
133+
```
134+
135+
:::image type="content" source="media/visualization-areachart/area-chart-with-properties.png" alt-text="Screenshot of area chart visualization with properties." lightbox="media/visualization-areachart/area-chart-with-properties.png":::
136+
137+
::: moniker range="microsoft-fabric || azure-data-explorer"
138+
### Area chart using split panels
139+
140+
The following example shows an area chart using split panels. In this example, the `ysplit` property is set to `panels`.
141+
::: moniker-end
142+
:::moniker range="azure-data-explorer"
143+
> [!div class="nextstepaction"]
144+
> <a href="https://dataexplorer.azure.com/clusters/help/databases/Samples?query=H4sIAAAAAAAAA02RsW6DMBCG9zzFL08gMSQP4IG2kSpFyhAYuho4BUvGINskUPXhe0AbfIN1%2Fn7f%2Bfy7CL3rzg%2BywR9%2B8GzJEYqgAkFbJKI8f%2BWFyCCu57dbXlzyJb%2Fk14JpCmUbrLXlPBCkhPhU2ghu5MeuU05%2FE%2Bp%2BtEGua5KimrfuGSptE05dKHXH21OTcpkj25CDcqTqlrUDOJ46tEjWdInZD0YHiUFZMj57cUN3robEQ3tdGdqVue7N2Fm%2FTRFxNWkPafp7xIIOht8i3pezIhI6NkTiGBM1QZ6OEZq2jjDaknIR3yZgZX%2FyLv5dCfHBzrDBHC%2Fxf5zFWND6T2IV018qvG0uugEAAA%3D%3D" target="_blank">Run the query</a>
145+
::: moniker-end
146+
147+
::: moniker range="microsoft-fabric || azure-data-explorer"
148+
149+
```kusto
150+
StormEvents
151+
| where State in ("TEXAS", "NEBRASKA", "KANSAS") and EventType == "Hail"
152+
| summarize count=count() by State, bin(StartTime, 1d)
153+
| render areachart
154+
with (
155+
ysplit= panels,
156+
legend = visible,
157+
ycolumns=count,
158+
yaxis =log,
159+
ytitle ="Count",
160+
ymin = 0,
161+
ymax =100,
162+
xaxis = linear,
163+
xcolumn = StartTime,
164+
xtitle = "Date",
165+
title ="Hail events"
166+
)
167+
```
168+
169+
:::image type="content" source="media/visualization-areachart/area-chart-with-split-panels.png" alt-text="Screenshot of area chart visualization with split panels." lightbox="media/visualization-areachart/area-chart-with-split-panels.png":::
170+
171+
::: moniker-end

‎data-explorer/kusto/query/visualization-barchart.md‎

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -59,7 +59,7 @@ This visualization supports splitting into multiple y-axis values:
5959
|----------|------------------------------------------------------------------|
6060
|`none` |A single y-axis is displayed for all series data. This is the default. |
6161
|`axes` |A single chart is displayed with multiple y-axes (one per series).|
62-
|`panels` |One chart is rendered for each `ycolumn` value.|
62+
|`panels` |One chart is rendered for each `ycolumn` value. Maximum five panels.|
6363

6464
::: moniker-end
6565

‎data-explorer/kusto/query/visualization-columnchart.md‎

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -59,7 +59,7 @@ This visualization supports splitting into multiple y-axis values:
5959
|----------|------------------------------------------------------------------|
6060
|`none` |A single y-axis is displayed for all series data. This is the default. |
6161
|`axes` |A single chart is displayed with multiple y-axes (one per series).|
62-
|`panels` |One chart is rendered for each `ycolumn` value.|
62+
|`panels` |One chart is rendered for each `ycolumn` value. Maximum five panels.|
6363

6464
::: moniker-end
6565

‎data-explorer/kusto/query/visualization-linechart.md‎

Lines changed: 2 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -45,7 +45,7 @@ All properties are optional.
4545
|`xtitle` |The title of the x-axis (of type `string`). |
4646
|`yaxis` |How to scale the y-axis (`linear` or `log`). |
4747
|`ycolumns` |Comma-delimited list of columns that consist of the values provided per value of the x column.|
48-
|`ysplit` |How to split multiple the visualization. For more information, see [`ysplit` property](#ysplit-property). |
48+
|`ysplit` |How to split the visualization into multiple y-axis values. For more information, see [`ysplit` property](#ysplit-property). |
4949
|`ytitle` |The title of the y-axis (of type `string`). |
5050

5151
#### `ysplit` property
@@ -56,7 +56,7 @@ This visualization supports splitting into multiple y-axis values:
5656
|----------|------------------------------------------------------------------|
5757
|`none` |A single y-axis is displayed for all series data. (Default) |
5858
|`axes` |A single chart is displayed with multiple y-axes (one per series).|
59-
|`panels` |One chart is rendered for each `ycolumn` value (up to some limit).|
59+
|`panels` |One chart is rendered for each `ycolumn` value. Maximum five panels.|
6060

6161
## Examples
6262

‎data-explorer/kusto/query/visualization-timechart.md‎

Lines changed: 3 additions & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -47,7 +47,7 @@ All properties are optional.
4747
|`xtitle` |The title of the x-axis (of type `string`). |
4848
|`yaxis` |How to scale the y-axis (`linear` or `log`). |
4949
|`ycolumns` |Comma-delimited list of columns that consist of the values provided per value of the x column.|
50-
|`ysplit` |How to split multiple the visualization. For more information, see [`ysplit` property](#ysplit-property). |
50+
|`ysplit` |How to split the visualization into multiple y-axis values. For more information, see [`ysplit` property](#ysplit-property). |
5151
|`ytitle` |The title of the y-axis (of type `string`). |
5252

5353
#### `ysplit` property
@@ -58,7 +58,7 @@ This visualization supports splitting into multiple y-axis values:
5858
|----------|------------------------------------------------------------------|
5959
|`none` |A single y-axis is displayed for all series data. (Default) |
6060
|`axes` |A single chart is displayed with multiple y-axes (one per series).|
61-
|`panels` |One chart is rendered for each `ycolumn` value (up to some limit).|
61+
|`panels` |One chart is rendered for each `ycolumn` value. Maximum five panels.|
6262

6363
## Examples
6464

@@ -89,7 +89,7 @@ demo_make_series2
8989

9090
### Label a timechart
9191

92-
The following example renders a timechart that depicts crop damage grouped by week. The timechart x axis is labled "Date" and the y axis is labled "Crop damage."
92+
The following example renders a timechart that depicts crop damage grouped by week. The timechart x axis is labeled "Date" and the y axis is labeled "Crop damage."
9393
::: moniker-end
9494

9595
::: moniker range="azure-data-explorer"

0 commit comments

Comments
 (0)