WinStudio

Specify Chart Settings Dialog Box

Use this dialog box to specify settings for a chart component. Not all settings are required; if you do not specify a value for an optional setting, a default value is used.

As used in this topic:

The canvas is the area where the chart is displayed.
The legend is an area outside the canvas (but within the area of the component) that describes the chart.
Alpha is a transparency setting from 0-100. 100 means no transparency, that is, solid color. 0 means invisible. Numbers from 1 to 99 are levels of transparency, with the lower numbers being more transparent and higher numbers less transparent/more solid.
Color values are stored in a hexadecimal RGB (Red/Green/Blue) format. Each color value (R,G, and B) is assigned a value from 0 to 255, which in hexadecimal notation is 00 to FF. Each value represents the amount of color, so for example, FF0000 is solid red, 000000 is solid black, and FFFFFF is solid white. You can use the Color dialog box to select a color or create a custom color.

Data Tab

This tab specifies general information about the type of chart, as well as the data binding.

Chart Attributes

Field	Description
Chart Style	Specify the style of chart: Single Series Charts depict one set of data, for example one month. Multi Series Charts depict one or more sets of data, for example multiple months. Combination Charts combine two or more chart types, for example a bar and a line chart.
Chart Type	The list of chart types depends on the Chart Style you selected: Single Series Charts include: Column2D, Column 3D, Line, Area 2D, Bar 2D, Pie 2D, Pie 3D, Doughnut 2D, Doughnut 3D, Pareto 2D, Pareto 3D, Spline, SplineArea, Waterfall2D, Funnel, Pyramid, SparkLine, and SparkColumn. Multi Series Charts include: MSColumn2D, MSColumn3D, MsLine, MSBar2D, MSBar3D, MSArea, Marimekko, ZoomLine, ScrollColumn2D, ScrollLine2D, ScrollArea2D, StackedColumn2D, StackedColumn3D, StackedBar2D, StackedBar3D, StackedArea2D, MSSpline, MSSplineArea, LogMSColumn2D, LogMSLine, InverseMSArea, InverseMSColumn2D, InverseMSLine, Radar, and MSStepline. Combination Charts include: MSCombi2D, MSCombi3D, and MSColumnLine3D. To see an example of each chart type, select the chart type and click Preview.
Caption	Specify the caption (title) for the chart. Note: You can set the font, color, and size of the text for the chart on the Other tab.
Sub-Caption	Specify the subtitle, if any, for the chart.
X-Axis Name	Specify the label for the X (horizontal) axis.
Y-Axis Name	Specify the label for the Y (vertical) axis.

Axes

Field	Description
Property for X-Axis Labels	Select the property from the collection to use for the X-axis labels.

Binding

Field	Description
Bind Chart to Entire Collection	Use this option to chart all the data in the collection together. For example, this option is useful on mobile forms.
Bind Chart to Current Row	Use this option if you want the chart data to change on selection of each row. This option will be used on most Multiview forms

Chart Data

Field	Description
Collection	Specify the collection whose properties you want to chart. The drop-down list includes all IDO collections that are available on the current form.
Available Properties	Select a property from the collection and click Add>> to add it to the list of fields you want to chart. For example, you might want to chart quantities and amounts on a form. To remove a property from the list of fields you want to chart, click <<Remove. Use the Up and Down buttons to move properties within the list. These properties represent the series of the chart, so for a multi-series chart, you specify multiple properties here. If you specify multiple properties for a single-series chart, only the first property is used; the others are ignored.
Render As	Specify how each series of a combination chart is rendered: as a Column, Area, or Line. For example, if you specify MSCombi2D as the chart type, and you then add two series to the property list and set Render As to Line for one of the properties, one series is displayed as a column chart and the other series is displayed as a line chart.

Trend Lines Tab

Trend lines are horizontal or vertical lines that help users interpret the data in relationship to a predetermined value. For example, a trend line can indicate the target values.

Field	Description
Start and End Values	If you are defining a trend line, specify just a starting value. If you are defining a slanted trend line, specify starting and ending values. If the value you specify is not within the chart limits, the trend line or zone is not included.
Display Value	Specify the label, if any, for the trend line.
Color	Double-click to display the Color dialog box, where you can select a color or define a custom color for the trend line. The color is displayed in hexadecimal after you apply your changes.
Trend Zone	Select to mark a trend zone (range of values) instead of a line.
Show On Top	Select to display the trend line or zone on top of the chart values.
Thickness	Specify the thickness of the line, in pixels.
Alpha	Specify the transparency of the trend line, from 0 to 100.
Dashed Dash Length Dash Gap	Select Dashed to use a dashed line. You can also specify the length of the dash and the gap between dashes, in pixels.
Value on Right	Select to show the trend line label to the right of the chart.
Tool Text	Specify the tool text, if any, that displays when you hover over the line.

General Tab

Legend

In multi-series or combination charts, the name of each dataset is displayed in the legend of the chart, to link data to its description by color. The legend is not displayed for single-series charts.

Field	Description
Show Legend	Select to display the legend for the chart.
Legend Caption	Specify the caption to use for the legend.
Legend Position	Specify BOTTOM or RIGHT to indicate where the legend is displayed.
Back Color	Double-click to display the Color dialog box, where you can select a color or define a custom color for the background. The color is displayed in hexadecimal after you apply your changes. To use a gradient fill, specify each of the colors required for the gradient fill as hexadecimal, separated by commas.
Back Alpha	Specify the transparency of the background, from 0 to 100.
Border Color	Double-click to display the Color dialog box, where you can select a color or define a custom color for the canvas border.
Border Thickness	Specify the thickness of the border around the legend (in pixels).
Border Alpha	Specify the transparency of the legend border, from 0 to 100.
Show Legend Shadow	Select to display a shadow for the legend.
Reverse Legend	Select to reverse the order of the items in the legend. This can be useful in stacked charts.

Functional Attributes

Field	Description
Palette	Specify a palette number, from 1 to 5, with 1 as the default. You can select a palette and click Preview to see what it looks like. The palette theme configures colors for: Background and border Canvas border and background Fonts Div lines Tooltip Anchors Legend
Palette Colors	To specify custom colors for a palette, instead of using one of the predefined themes, specify the colors in hex, separated by commas.
Label Display	Specify how you want long X-Axis labels to be displayed: AUTO: Automatically use the best display mode (rotate or wrap). WRAP: Wrap labels in multiple lines. If there is not enough space, labels are automatically trimmed, with ellipses (...) added and tool-tips displayed on mouseover. STAGGER: Distribute labels along multiple lines under the chart. ROTATE: Rotate labels so they display vertically. NONE: Do not display labels.
Label Step	If X-axis labels represent an incremental quantity such as dates, specify a number (n) here, to display every n-th label instead of all labels. This can make a chart less cluttered.
Y-Axis Values Step	If Y-axis values represent an incremental quantity with divisional lines or grids, specify a number (n) here, to display a value on every n-th line. Specify 1 or leave blank to display a value on every line.
Y-Axis Min Value	Specify the minimum value to display on the Y-axis. Otherwise, the system determines the value automatically based on the available data.
Y-Axis Max Value	Specify the maximum value to display on the Y-axis. Otherwise, the system determines the value automatically based on the available data. For example, a percent chart normally ranges from 0 to 100. If your allowable data range is only from 1 to 10, you can use those values as the min and max.
Animated	Select to animate the chart so that data displays gradually, rather than all at once.
Show/Rotate/Slant Labels	Specify whether you want to display X-axis labels on the chart, and if so, whether they should be rotated (displayed vertically) or slanted at 45 degrees.
Show/Rotate Values	Specify whether you want to display data values on the chart, and if so, whether they should be rotated (displayed vertically).
Place Values Inside	Select to display data values inside the chart objects that represent them.
Show Y-Axis Values	Select to display Y-axis data values on the chart.
Show Limits	Select to display the Y-axis upper & lower limit values on the chart.
Show Div Line Values	Select to display values for divisional lines, which are horizontal lines that divide the Y-axis into smaller units.
Show Shadow	Select to add a shadow effect to the chart.
Auto Div Line Adjust	Select to automatically set the Y-axis upper & lower limit values and the number of divisional lines.
Rotate/Center Y-Axis Name	Select this option to display the Y-Axis name vertically. Clear this option to show the name horizontally and centered.

Cosmetics Tab

Padding and Margins

Padding and margins are specified in pixels.

Field	Description
Caption Padding	Specify the space between the chart caption and the top of the chart canvas. If a subcaption is defined, this value controls the space between the subcaption and the top of the canvas.
X-Axis Name Padding	Specify the distance between the top of the X-Axis title and the bottom of data labels (or canvas, if data labels are not displayed).
Y-Axis Name Padding	Specify the distance between the Y-Axis name and values.
Y-Axis Values Padding	Specify the padding between the left side of the chart canvas and the Y-Axis values.
Label Padding	Specify the vertical space between the bottom of the canvas and the data labels.
Value Padding	Specify the space between the columns or anchors and the value text boxes.
Plot Space Percent	On a bar or column chart, define the spacing between bars or columns, from 0 to 80. By default, the spacing is set to 20% of canvas width. For example, if you want bars flush against each other, set this value to 0. If you want thin bars with a lot of space between, set this value to 80.
Margins	Chart margins are the padding between the chart border and the canvas. Each of the margins - left, right, top, and bottom - can be set individually.
Canvas Margins	Canvas margins are the padding between the start of the chart canvas and the chart itself. Each of the margins - left, right, top, and bottom - can be set individually. For 2D charts, the canvas is the visible rectangular box. For 3D charts, the canvas is the imaginary box around the 3D canvas. By default, the system calculates the margin space based on the elements placed on the chart. Use this attribute to override the default space with a higher value. You cannot specify a lower value. This attribute is helpful if you have multiple charts on a page and you want all of the canvases to align with each other.

Cosmetics

Field	Description
Back Color/Alpha/ Ratio/Angle	Color: Double-click to display the Color dialog box, where you can select a color or define a custom color for the chart background. The color is displayed in hexadecimal after you apply your changes. To use a gradient fill, specify all the colors required for the gradient fill, separated by commas. Alpha: For each color you specified above, specify the transparency of the background, from 0 to 100. Separate the alphas by commas. Ratio: Specify the ratio of each color in the gradient on a scale of 100. The total of the ratios must equal 100. For example, to plot an equidistant gradient for two colors, specify the ratio as 0,100. Angle: Specify the angle of the gradient fill, in degrees, from 0 to 360.
Show Border	Select to display an outer border around the whole chart, containing the canvas and the legend as well.
Border Color/ Thickness/Alpha	Color: Double-click to display the Color dialog box, where you can select a color or define a custom color for the border around the chart. The color is displayed in hexadecimal after you apply your changes. Thickness: Specify the thickness of the border, in pixels. Alpha: Specify the transparency of the border.
Canvas Back Color/Alpha/ Ratio/Angle	Color: Double-click to display the Color dialog box, where you can select a color or define a custom color for the canvas background. The color is displayed in hexadecimal after you apply your changes. To use a gradient fill, specify all the colors required for the gradient fill, separated by commas. Alpha: For each color you specified above, specify the transparency of the background, from 0 to 100. Separate the alphas by commas. Ratio: Specify the ratio of each color in the gradient on a scale of 100. The total of the ratios must equal 100. For example, to plot an equidistant gradient for two colors, specify the ratio as 0,100. Angle: Specify the angle of the gradient fill, in degrees, from 0 to 360.
Canvas Border Color/Thickness/ Alpha	Color: Double-click to display the Color dialog box, where you can select a color or define a custom color for the border around the canvas. The color is displayed in hexadecimal after you apply your changes. Thickness: Specify the thickness of the border, in pixels. Alpha: Specify the transparency of the border. Note: There is a Show Border property to show or hide the outer border, but there is no Show Canvas Border property to show or hide the canvas border. However, you can still hide the canvas border by setting its Alpha value to 0.
Show V-Line Label Border	Select to display a border for the V-Line label. The V-Line is a vertical, or horizontal in the case of bar charts, separator line used to separate blocks of data.

Data Plot Cosmetics

Field	Description
Use Round Edges	Select to plot chart objects with round edges and fill them with a glass effect gradient. When you select this option, plot fill and borders are not displayed.
Show Plot Border	Select to display borders on the plotted chart objects.
Plot Border Color/Thickness/ Alpha	Specify the plotted chart objects' border color (double-click to select), thickness (from 0 to 5 pixels), and alpha gradient (from 0 to 100).
Plot Border Dashed/ Dash Length/Gap	Select Dashed to use a dashed line for the plot border. You can also specify the length of the dash and the gap between dashes, in pixels.
Plot Fill Angle/Ratio/Alpha	If you chose to fill the plot object with a gradient, specify the fill angle for gradient (0 to 360), the ratio for the gradient (0 to 100), and the alpha (0 to 100).
Plot Gradient Color	Double-click to select a second color to globally add a gradient to the entire plot of the chart. For example, if you specified individual colors for columns, to create a gradient that ends in white, specify FFFFFF (white) here, and the chart draws plots as gradient.

Anchors

Anchors, or marker points, are polygons that are displayed where two consecutive lines or area points are joined on a line or area chart. These indicators show the position of data points. The anchors can be used to display tool tips and links for the data points. If anchors are hidden, tool tips are not displayed and links will not work.

Field	Description
Draw Anchors	Select to display anchors on the chart.
Anchor Side/ Radius	Side: Specify the number of sides, from 3 to 20, that the anchor has. For example, an anchor with 3 sides is displayed as a triangle. Radius: Specify the radius, in pixels, of the anchor. A larger radius draws a larger anchor.
Border Color/ Thickness	Color: Double-click to display the Color dialog box, where you can select a color or define a custom color for the border around the anchor. The color is displayed in hexadecimal after you apply your changes. Thickness: Specify the thickness of the border, in pixels.
Back Color	Double-click to display the Color dialog box, where you can select a color or define a custom background color for the anchor. The color is displayed in hexadecimal after you apply your changes.
Alpha	Specify the transparency of the anchor, from 0 to 100.
Back Alpha	Specify the transparency of the anchor background, from 0 to 100.

Other Tab

Font

Field	Description
Base Font/Size/ Color	Specify the font to use for all text on the chart. Specify a font size (0 to 72) and double-click in the Color field to select a font color. If you also specify an outside canvas font, the base font applies only to tooltips and data values.
Outside Canvas Font/Size/Color	If you specify a second font for the outside canvas, that font applies to all text that lies outside the canvas. Specify a font size (0 to 72) and double-click in the Color field to select a font color.

Tooltips

Field	Description
Show Tooltip	Select to display tool tips when the mouse hovers over a data point. Tool tip information depends on the type of chart: For single series charts except pie and doughnut: Name and value For pie and doughnut charts: Name and value/percentage For multi-series and combination charts: Series name, category name, and data value
Show Tooltip Shadow	Select to display a shadow on tool tips.
Series Name in Tooltip	Select to include the series names (X-axis labels for data points) in the tool tip.
Tooltip Back Color	Double-click to select a background color for the tool tip.
Tooltip Border Color	Double-click to select a border color for the tool tip.
Tooltip Separator Char	Specify a separator character to use between different types of information in the tool tip.

Number Formatting

Field	Description
Format Number	Select to automatically add commas to numbers in the appropriate places.
Format Number Scale	Select to automatically format numbers by adding K (kilo, for thousands) or M (million) and truncating the numbers. For example, 10,000 is truncated to 10K.
Force Decimals	Select to include trailing zeros if necessary so that all values in the chart are displayed to the decimal precision specified in Decimal Places, below.
Force Y-Axis Decimals	Select to include trailing zeros on the secondary axis on dual Y-axis charts, if necessary, so that values in the secondary axis are displayed to the decimal precision specified in Y-Axis Decimal Places, below.
Default Number Scale and Unit/ Value	Use the number scale and number scale unit/value together to define units of scaling for the chart. By default, the charts use (1000,1000) (K,M) scaling, which equates to 1000 = 1K and 1000K = 1M. To add billions to the scaling, set the Scale to 1000,1000,1000 and the Unit/Value to K,M,B, which equates to 1000=1K, 1000K=1M, and 1000M = 1B. To use a time scale, set the Scale to 60,60,24,7 and the Unit/Value to min,hr,day,wk, which equates to 60 seconds = 1 min, 60 minute = 1 hr, 24 hrs = 1 day, and 7 days = 1 week.
Number Prefix/Suffix	Prefix: Specify a value to add it as a prefix to all numbers plotted on the primary axis. For example, to display all numbers as dollars, specify $ as the prefix. Suffix: Specify a value to add it as a suffix to all numbers plotted on the primary axis. For example, to display all numbers as per year, specify /yr as the suffix.
Decimal Separator	Specify a decimal separator if you do not want to use the default value, which is a period.
Thousand Separator	Specify a thousands separator if you do not want to use the default value, which is a comma.
Decimal Places	Specify the number of decimal places to round to. This controls the decimal precision of all numbers on the chart. For example, if your data includes 0.12352, 0.134 and 0.13, and you set this value to 3, the data is displayed as 0.124, 0.134 and 0.13. Note that the system does not add the 0 padding to 0.13 to form 0.130. To force the display of trailing zeros, use Force Decimals (above).
Y-Axis Decimal Places	On dual Y-axis charts, specify the number of decimal places to round to, for the secondary Y-axis. To force the display of trailing zeros, use Force Y-Axis Decimals (above).

Divisional Lines

Divisional lines are horizontal lines running through the canvas, dividing the y-axis into smaller units.

Field	Description
Num Div Lines	Specify the number of divisional lines, if you do not want to use the default value.
Div Line Color/ Thickness/Alpha	Color: Double-click to display the Color dialog box, where you can select a color or define a custom color for the divisional lines. The color is displayed in hexadecimal after you apply your changes. Thickness: Specify the thickness of the lines, in pixels. Alpha: Specify the transparency of the lines.
Div Line is Dashed/Dash Length/Gap	Select Dashed to use a dashed divisional line. You can also specify the length of the dash and the gap between dashes, in pixels.
Zero Plane Color/Thickness/ Alpha	The zero plane separates positive and negative numbers on a chart. Color: Double-click to display the Color dialog box, where you can select a color or define a custom color for the zero plane. The color is displayed in hexadecimal after you apply your changes. Thickness: Specify the thickness of the plane, in pixels. Alpha: Specify the transparency of the plane.
Show Alternate H-Grid Color/Color/ Alpha	Select Show Alternate H-Grid Color to display alternating horizontal grid bands in the color you select, with the transparency (alpha) you select.
Show Alternate V-Grid Color/Color/ Alpha	Select Show Alternate H-Grid Color to display alternating vertical grid bands in the color you select, with the transparency (alpha) you select.

Chart XML Tab

This tab displays the XML that is used to generate the chart in the form. The XML is display-only.

Buttons

Click Apply to save your changes.

Click Preview to preview the chart using the options that you selected. The previewed example does not show Framework data.