Skip to content

Commit a33cd86

Browse files
NkrbNkrb
committed
Adding examples
1 parent e6ab80c commit a33cd86

File tree

1 file changed

+103
-37
lines changed

1 file changed

+103
-37
lines changed

‎powerapps-docs/developer/model-driven-apps/understand-charts-underlying-data-chart-representation.md

Lines changed: 103 additions & 37 deletions
Original file line numberDiff line numberDiff line change
@@ -88,19 +88,52 @@ Charts display data visually by mapping textual values on two axes: horizontal (
8888
</categorycollection></datadefinition>
8989
```
9090

91-
For more sample data description XML strings, see [Sample Charts](sample-charts.md).
91+
For more sample data description XML strings, see [Sample Charts](sample-charts.md).
9292

9393
## Use the presentation description XML string to specify data representation
9494

9595
The presentation description XML string contains information about the appearance of the chart such as chart title, chart color, and chart type (bar, column, line, and so on). There is no schema definition for this XML string. However, the XML is a serialization of the [Chart](https://msdn.microsoft.com/library/system.web.ui.datavisualization.charting.chart.aspx) class in Microsoft Chart Controls. More information: [Chart Controls](https://go.microsoft.com/fwlink/p/?LinkId=128301)
9696

9797
> [!IMPORTANT]
98-
> In web client, presentation description XML uses the .NET API schema and in the runtime it uses the .NET chart library to render charts. <br/>
99-
> In Unified Interface, it uses the combination of the legacy chart designer (with .NET chart metadata schema – the presentation xml), and the runtime chart with [Highcharts](https://api.highcharts.com/highcharts/) schema.
98+
> In Unified Interface, only a subset of properties are supported. More information: [Supported methods and properties in Unified Interface](methods-and-properties-supported-in-unified-interface)
10099
101100
You can specify the presentation description XML string while you are creating a chart using the `SavedQueryVisualization.PresentationDescription` or `UserQueryVisualization.PresentationDescription` attribute for the organization-owned or user-owned chart, respectively.
102101

103-
The following table shows the methods and properties that are supported in Unified Interface:
102+
### Example for web client
103+
104+
The following is a sample presentation description XML string for web client:
105+
106+
```xml
107+
<Chart Palette="BrightPastel">
108+
<Series>
109+
<Series _Template_="All" Color="153, 204, 255" BorderColor="164, 164, 164" BorderDashStyle="Solid" BorderWidth="1" ShadowColor="128, 128, 128, 128" ShadowOffset="1" IsValueShownAsLabel="true" Font="{0}, 6.75pt" BackGradientStyle="TopBottom" BackSecondaryColor="0, 102, 153" LabelForeColor="100, 100, 100" ChartType="Column">
110+
<SmartLabelStyle Enabled="True" />
111+
<Points />
112+
</Series>
113+
</Series>
114+
<ChartAreas>
115+
<ChartArea _Template_="All" BackColor="White" BorderColor="26, 59, 105" BorderWidth="0" BorderDashStyle="Solid"> <AxisY LineColor="204, 204, 204" TitleFont="{0}, 8pt, GdiCharSet=0" TitleForeColor="100, 100, 100" LabelAutoFitMaxFontSize="7" LabelAutoFitMinFontSize="7">
116+
<MajorTickMark LineColor="Gray" />
117+
<MajorGrid Enabled="false" />
118+
<LabelStyle Font="{0}, 6.75pt, GdiCharSet=0" ForeColor="100, 100, 100" />
119+
</AxisY>
120+
<AxisX LineColor="204, 204, 204" TitleFont="{0}, 8pt, GdiCharSet=0" TitleForeColor="100, 100, 100" LabelAutoFitMaxFontSize="7" LabelAutoFitMinFontSize="7"> <MajorTickMark LineColor="Gray" /> <MajorGrid Enabled="false" />
121+
<LabelStyle Font="{0}, 6.75pt, GdiCharSet=0" ForeColor="100, 100, 100" />
122+
</AxisX>
123+
</ChartArea>
124+
</ChartAreas>
125+
<Titles>
126+
<Title _Template_="All" Font="{0}, 9pt, style=Bold, GdiCharSet=0" ForeColor="100, 100, 100"></Title>
127+
</Titles>
128+
<BorderSkin PageColor="Control" BackColor="CornflowerBlue" BackSecondaryColor="CornflowerBlue" />
129+
</Chart>
130+
```
131+
132+
For more sample presentation description XML strings, see [Sample Charts](sample-charts.md).
133+
134+
## Methods and properties supported in Unified Interface
135+
136+
The following section shows the methods and properties that are supported in Unified Interface:
104137

105138
### AxisX
106139

@@ -123,6 +156,16 @@ Gets or sets the X-axis type of the series.
123156
|Title|Gets or sets the title of the axis.|
124157
|TitleForeColor|Gets or sets the text color of an axis title.|
125158

159+
**Example**
160+
161+
```xml
162+
<AxisX Enabled="True" LineColor="165, 172, 181" Title="Test XAxis Title" TitleForeColor="91,151,213" IsReversed="true">
163+
<MajorTickMark LineColor="165, 172, 181" Enabled="true" />
164+
<MajorGrid LineColor="green" Enabled="true"/>
165+
<LabelStyle ForeColor="red" Format="#,0,.##K" Enabled="true" />
166+
</AxisX>
167+
```
168+
126169
### AxisY
127170

128171
Gets or sets the Y-axis type of the series.
@@ -147,6 +190,21 @@ Gets or sets the Y-axis type of the series.
147190
|Title|Gets or sets the title of the axis.|
148191
|TitleForeColor|Gets or sets the text color of an axis title.|
149192

193+
**Example**
194+
195+
```xml
196+
<AxisY Enabled="True" LineColor="165, 172, 181" Title="Test YAxis Title" TitleForeColor="91,151,213" Interval="1" Minimum="0" Maximum="5">
197+
<MajorTickMark LineColor="165, 172, 181" Enabled="true" />
198+
<MajorGrid LineColor="green" Enabled="true"/>
199+
<LabelStyle ForeColor="red" Enabled="true" />
200+
</AxisY>
201+
<AxisY2 Enabled="True" LineColor="165, 172, 181" Title="Test YAxis2 Title" TitleForeColor="91,151,213" Interval="10" Minimum="0" Maximum="100">
202+
<MajorTickMark LineColor="165, 172, 181" Enabled="true" />
203+
<MajorGrid LineColor="green" Enabled="true"/>
204+
<LabelStyle ForeColor="red" Enabled="true" />
205+
</AxisY2>
206+
```
207+
150208
### Chart
151209

152210
The root class for the charts.
@@ -157,7 +215,7 @@ The root class for the charts.
157215
|-------------|------------|
158216
|PaletteCustomColor|Gets or sets an array of custom palette colors. It follows the priority as shown below: <br/> - Renders the color defined in the `Series` node. <br/> - If the color pallet is specified, chart picks the color from the color pallet. <br/> - If none is specified, it picks up the default color pallet.|
159217

160-
#### Example
218+
**Example**
161219

162220
```xml
163221
<Chart Palette="None" PaletteCustomColors="91, 151, 213; #4169E1, red, 127,97,142,206">
@@ -172,6 +230,17 @@ Represents a chart area on the chart image.
172230
|Property Name| Description|
173231
|-------------|------------|
174232
|Area3DStyle Enable3D|Gets or sets a value that indicates whether the flag toggles the 3D on and off for a chart area.|
233+
|BackColor|Allow users to set the plot background to either a solid or a gradient color.|
234+
|BackSecondaryColor|Allow users to set the plot background to either a solid or a gradient color.|
235+
|BackGradientStyle|Allow users to set the plot background to either a solid or a gradient color.|
236+
237+
**Example**
238+
239+
```xml
240+
<ChartArea BackColor="orange" BackSecondaryColor="purple" BackGradientStyle="LeftRight" >
241+
<Area3DStyle Enable3D="true" />
242+
</ChartArea>
243+
```
175244

176245
### Legend
177246

@@ -183,6 +252,14 @@ Represents the legend for the chart image.
183252
|-------------|------------|
184253
|Enabled| Defines whether the legend is enabled. By default it is set to `True`.|
185254

255+
**Example**
256+
257+
```xml
258+
<Legends>
259+
<Legend Enabled="True"/>
260+
</Legends>
261+
```
262+
186263
### Series
187264

188265
Stores data points and series attributes.
@@ -196,12 +273,33 @@ Stores data points and series attributes.
196273
|ChartType| An enumeration value that indicates the chart type that is used to represent the series. The default value is Column. It supports the following chart types: <br/> - Column <br/> - StackedColumn <br/> - StackedColumn100 <br/> - Bar <br/> - StackedBar <br/> - StackedBar100 <br/> - Area <br/> - StackedArea <br/> - StackedArea100 <br/> - Line <br/> - Pie <br/> - Funnel <br/> - Tag <br/> - Doughnut <br/> - Point|
197274
|Color|Gets or sets the color of the data point. For funnel and pie charts, the color property defined in the series node is ignored, but picks the chart color from color palette.|
198275
|IsValueShownAsLabel|Gets or sets a flag that indicates whether to show the value of the data point on the label.|
276+
|CustomProperties|Allows users to set `FunnelNeckHeight` and `FunnelNeckWidth` to customize funnel chart's shape. FunnelNeckHeight & FunnelNeckWidth represents the percentage. This parameter is only supported for funnel chart types.|
199277
|IsVisibleInLegend|Gets or sets a flag that indicates whether the item is shown in the legend.|
200278
|LabelForeColor|Gets or sets the text color of the label.|
201279
|LabelFormat|Gets or sets the format of the data point label. More information: [Supported numeric format for charts](#supported-numeric-format-for-charts-in-unified-interface)|
202280
|LegendText|Gets or sets the text of the item in the legend. For funnel and pie charts, the legend displays each individual data point's value in a series. Instead of displaying the series name as a whole.|
203281
|YAxisType|Gets or sets the Y-axis type of a series. Only second Y-axis is supported, not second X-axis.|
204282

283+
**Example**
284+
285+
```xml
286+
<Series>
287+
<Series ChartType="Column" Color="91, 151, 213" LegendText="Est Revenue" IsVisibleInLegend="True" BorderColor="red" BorderWidth="1" IsValueShownAsLabel="True" LabelFormat="$#,0,.##K" LabelForeColor="59, 59, 59">
288+
</Series>
289+
<Series ChartType="Column" Color="237, 125, 49" LegendText="Actual Revenue" IsVisibleInLegend="True" BorderColor="red" BorderWidth="1" IsValueShownAsLabel="True" LabelFormat="$#,0,.##K" LabelForeColor="59, 59, 59" YAxisType="Secondary">
290+
</Series>
291+
</Series>
292+
```
293+
294+
### Supported color format in Unified Interface
295+
296+
Unified Interface supports the following color formats in chart presentation xml, which is compatible with web client:
297+
298+
- RGB Decimal format: 97,142,206
299+
- RGB HEX format: #4169E1
300+
- ARGB Decimal format: 127,90,138,57
301+
- Browser recognized named colors: red, transparent
302+
205303
### Supported numeric format for charts in Unified Interface
206304

207305
|Formatting values|Description|
@@ -221,38 +319,6 @@ Stores data points and series attributes.
221319
|%|Percent sign (%) in a format string causes a number to be multiplied by 100 before it is formatted|
222320
|||
223321

224-
### Example
225-
226-
The following is a sample presentation description XML string:
227-
228-
```xml
229-
<Chart Palette="BrightPastel">
230-
<Series>
231-
<Series _Template_="All" Color="153, 204, 255" BorderColor="164, 164, 164" BorderDashStyle="Solid" BorderWidth="1" ShadowColor="128, 128, 128, 128" ShadowOffset="1" IsValueShownAsLabel="true" Font="{0}, 6.75pt" BackGradientStyle="TopBottom" BackSecondaryColor="0, 102, 153" LabelForeColor="100, 100, 100" ChartType="Column">
232-
<SmartLabelStyle Enabled="True" />
233-
<Points />
234-
</Series>
235-
</Series>
236-
<ChartAreas>
237-
<ChartArea _Template_="All" BackColor="White" BorderColor="26, 59, 105" BorderWidth="0" BorderDashStyle="Solid"> <AxisY LineColor="204, 204, 204" TitleFont="{0}, 8pt, GdiCharSet=0" TitleForeColor="100, 100, 100" LabelAutoFitMaxFontSize="7" LabelAutoFitMinFontSize="7">
238-
<MajorTickMark LineColor="Gray" />
239-
<MajorGrid Enabled="false" />
240-
<LabelStyle Font="{0}, 6.75pt, GdiCharSet=0" ForeColor="100, 100, 100" />
241-
</AxisY>
242-
<AxisX LineColor="204, 204, 204" TitleFont="{0}, 8pt, GdiCharSet=0" TitleForeColor="100, 100, 100" LabelAutoFitMaxFontSize="7" LabelAutoFitMinFontSize="7"> <MajorTickMark LineColor="Gray" /> <MajorGrid Enabled="false" />
243-
<LabelStyle Font="{0}, 6.75pt, GdiCharSet=0" ForeColor="100, 100, 100" />
244-
</AxisX>
245-
</ChartArea>
246-
</ChartAreas>
247-
<Titles>
248-
<Title _Template_="All" Font="{0}, 9pt, style=Bold, GdiCharSet=0" ForeColor="100, 100, 100"></Title>
249-
</Titles>
250-
<BorderSkin PageColor="Control" BackColor="CornflowerBlue" BackSecondaryColor="CornflowerBlue" />
251-
</Chart>
252-
```
253-
254-
For more sample presentation description XML strings, see [Sample Charts](sample-charts.md).
255-
256322
### See also
257323
[Visualizations (Charts)](view-data-with-visualizations-charts.md)
258324
[Actions on Visualizations (Charts)](actions-visualizations-charts.md)

0 commit comments

Comments
 (0)