Charts

charts

Table of Contents

Overview

A chart is a complex output control that allows users to display a visual representation of a data set in the user interface. Widely used in data analysis and presentation, charts are a vital component of dashboard reports. Each chart must be associated with a Table Named Range (TNR) from the workbook.

Basics

Inserting a Chart

Inserting a chart into the web interface can be done by dragging and dropping a Chart module from the context menu into the staging area of the User Interface Designer.

Once placed, click on the chart to define its properties from the properties menu. Begin by selecting the Table Named Range (TNR) that contains the target data for the chart from Table Named Range selection. This range should include both the data and the column headers for the chart. Currently, only horizontally-oriented Table Named Ranges (TNR) are supported (i.e. columns are displayed horizontally).

For example, when graphing the total compensation paid to your employees by year, both the Year and Total Compensation columns need to be included in the Table Named Range (TNR). In the example below, this named range is identified as Chart.

Chart Data Structures

Select your chart from the Chart Type dropdown menu. This selection will be used to populate the appropriate chart configuration options in the properties menu.

The available charts can be categorized into three subsections:

  • Single-Axis Charts
  • Multi-Axis Charts
  • Special Charts
  • Gantt Chart

Single-Axis Charts

The Single-Axis Chart is useful when showing the contribution of a single item to a whole. The following charts belong to this category:

  • Donut
  • Pie
  • Funnel
  • Pyramid

Select a data field that contains your target categories for the Group Field. This column's data will indicate the grouping of segmentation of the chart.

The Size Field selection will determine the proportion of the whole for each group. This column's data will be aggregated to determine the size of the whole and then subdivided into categories by the Group Fields.

Multi-Axis Charts

Multi-Axis Charts contain two separate data axes that are used to plot a comparison of data columns. These types of charts are typically used to analyze and identify trends.

The list of available multi-axis charts are as follows:

  • Area
  • Bar
  • Columns
  • Line
  • Radar
  • Scatter

Begin by selecting column that contains the X Axis Field data from the dropdown menu. With the exception of the Column chart (where this could indicate a category), this axis typically corresponds to a numeric field.

The Y Axis Field(s) selection can accept more than one data field. You will be able to select from the multiple available columns. This data can be aggregated and stacked.

Special Charts

Any charts that do not fall into either of the aforementioned categories are considered Special Charts. The only special chart currently available in the system is the Bubble Chart.

The Bubble Chart is very similar to the scatter chart, but bubble introduces a third parameter in the form of the data plot size. This parameter can be selected from the Size Field option and must be numeric. It will ultimately indicate the size of the point on the chart.

The other features of this chart type function in accordance with the scatter chart.

Combo Chart

Combo charts essentially bring several chart types together and can demonstrate a direct comparison between different data using the same Y axis or two separate axes. All data groups need to share the same X axis regardless. Combo charts are useful for comparing two different metrics side-by-side.

Combo chart allows for one X Axis Field and at least two numbers of Y Axis Fields.

Please note that the Y Axis Fields need to contain numeric fields and remember to select Series Type and Axis Position for the Y Axis Fields by clicking on the field first and then choosing from the drop down. Available Series Types include Area, Column, Line and Scatter.

The other features of this chart type function in accordance with the multi-axis charts.

Gantt Chart

Gantt charts are great for illustrating a project schedule. Gantt charts show the start and finish dates of the projects, and the percentage complete. A Gantt chart requires at least one Task, one Start and one End field. Please note that Start and End need to be date data. You also need to select a Group Field to separate the Task data accordingly.

The other features of this chart type function in accordance with the multi-axis charts.

Properties

The properties of the chart control are outlined below.

Multiple Field

This field allows the visualization to be separated as groups by the data.

This is an optional field, and should only be selected if you want to display multiple visualizations.

Bar Gap (%)

Only available in Column and Bar charts, this option allows setting a ratio for the gap between each bar in the visualization. A higher ratio will set bars more apart, whereas a zero value will place them adjacent to each other.

Background Color

The background color of the chart from Background Color palette. Pressing the eraser button next to this parameter will remove any color selection.

Chart Title

Naming your charts can help users distinguish their content and make better sense of them. Entering a text into the Chart Title box will print it on top of the chart. Title text properties can be changed from Title Color and Title Font Size options.

You can further customize your chart by pressing the blue Edit buttons on the bottom of the right hand menu. Edit Legend properties affect the labels and colors of the chart legends, whereas Edit Tooltip options will determine the mouse-over text format.

Height

The height of the chart. Chart heights can be set manually within a range between 200 and 1000 pixels. Alternatively you can check Use auto-calculated height property.

Color Scheme

The color set of the chart. You can customize your charts' colors as you desired by clicking to Edit Color Scheme button. If a color set is not selected then it will use default color set from the Edit Application page.

Edit Buttons

You can further customize your chart by pressing the blue Edit buttons for the corresponding section, on the bottom of the right hand menu.

  • Edit Color Scheme determines the color set of the chart.
  • Edit X Axis determines the x-axis properties of the chart.
  • Edit Y Axis determines the the y-axis properties of the chart.
  • Edit Legend properties affect the labels and colors of the chart legend.
  • Edit Tooltip options determine the mouse-over text format.
  • Edit Labels properties affect the labels and colors of the chart.
  • Edit Animation properties affect the animation features of the chart.

Clicking Edit Color Scheme will open the color scheme selection menu. Here, you can customize your the chart colors by selecting from the presets. When you're done, remember to press Save to save your changes. Pressing Close will hide the menu. The chart will revert back to the default color schema Edit Application page when you press the Clear to Default button.

Clicking Edit X Axis will take you to the x-axis configuration menu. Here, you can enable or disable the x-axis, and customize its looks. When you're done, remember to press Submit to save your changes. Pressing Back will take you to the previous menu.

Clicking Edit Y Axis will take you to the y-axis configuration menu. Here, you can enable or disable the y-axis, and customize its looks. When you're done, remember to press Submit to save your changes. Pressing Back will take you to the previous menu.

Clicking Edit Legend will take you to the legend configuration menu. Here, you can enable or disable the chart legend, and customize its looks. When you're done, remember to press Submit to save your changes. Pressing Back will take you to the previous menu.

The order of the data groups shown on the Legend can be changed from the Order Direction property. The options consist of the following:

  • Ascending: Sort in ascending order (i.e. from A to Z).
  • Descending: Sort in descending order (i.e. from Z to A).
  • Custom: Sort in a custom order. Selecting this option will create the Custom Order property, where you can enter the group labels in the order you want them to be displayed in the chart Legend. The labels used in the Custom Order field are case-sensitive, and need to be separated with commas (,). If you do not include all group labels from your data, those that were entered into the Custom Order field will come first in the Legend, and then the rest of the labels will be sorted in ascending order. For example, if your data contains "Item 1, Item 2, Item 3, Item 4", and you enter only "Item 2, Item 1" into the Custom Order field, the sorting will be as follows: "Item 2, Item 1, Item 3, Item 4".

Clicking Edit Tooltip will take you to the tooltip configuration menu. You can enable or disable, and customize tooltips that are displayed when you mouse over the chart elements. When you're done, remember to press Submit to save your changes. Pressing Back will take you to the previous menu

You can set a number or date formatting for tooltip contents using "{keyword:#,##0.00}". Data field names are also aplicable to tooltip contents using "[FieldName:#,##0.00]". A list of available formatting options is given below:

  • [Anything] : Label information will be displayed inside the brackets, where ‘Anything’ label is entered. This can be used for currency formatting. (i.e. [$]#,##0.00)
  • #,## : Adds a comma separator. This keyword also requires adding “0” or “0.x” to the end (i.e. #,##0.00).
  • 0 : The number will be rounded to the nearest whole number.
  • 0.0 : The number will be rounded to one decimal place. More zeroes added to the right means more decimal places allowed. (i.e. 0.000 means 3 numbers after the decimal)
  • s : Adds SI-prefix to numbers. (i.e. a format like #,##0.00s will be displayed as 45M with a value of 45150000. Adding one more zero before the ‘s’ will give 45.1M.)
  • % : Converts the number into a percentage. This works like the “s” keyword. The values will be multiplied by 100.
  • AM/PM: Adds 12-hour clock format.
  • YYYY: Adds full year.
  • YY: Adds last two digits of the year.
  • mmmm: Adds full month name.
  • mmm: Adds abbreviated month name.
  • mm: Adds month as a decimal number. (i.e. 01, 12]
  • dddd: Adds full weekday name.
  • ddd: Adds abbreviated weekday name.
  • dd: Adds weekday as a decimal number. (i.e. 01, 12]
  • HH: Adds hours as a decimal number.
  • MM: Adds minutes as a decimal number.
  • SS: Adds seconds as a decimal number.

Clicking Edit Labels will take you to the label configuration menu. Here, you can enable or disable the chart labels, and customize their looks. When you're done, remember to press Submit to save your changes. Pressing Back will take you to the previous menu.

You can set label contents to include data values using a "{keyword}". A list of supported keywords is given below:

  • Single-Axis Charts
    • {title}: Places the corresponding group field value in label.
    • {value}: Places the corresponding size field value in label.
    • {percent}: Places the corresponding percent value in label.
    • {total}: Places the corresponding total value in label.
  • Multi-Axis Charts
    • {x}: Places the corresponding x axis data value in label.
    • {y}: Places the corresponding y axis data value in label.
  • Bubble Chart
    • {x}: Places the corresponding x axis data value in label.
    • {y}: Places the corresponding y axis data value in label.
    • {size}: Places the corresponding size value in label.
  • Combo Chart
    • {x}: Places the corresponding x axis data value in label.
    • {y}: Places the corresponding y axis data value in label.
  • Gantt Chart
    • {task}: Places the corresponding task value in label.
    • {start}: Places the corresponding start value in label.
    • {end}: Places the corresponding end value in label.
    • {group}: Places the corresponding group value in label.

You can set a number or date formatting for label contents using "{keyword:#,##0.00}". Data field names are also aplicable to label contents using "[FieldName:#,##0.00]". A list of available formatting options is given below:

  • [Anything] : Label information will be displayed inside the brackets, where ‘Anything’ label is entered. This can be used for currency formatting. (i.e. [$]#,##0.00)
  • #,## : Adds a comma separator. This keyword also requires adding “0” or “0.x” to the end (i.e. #,##0.00).
  • 0 : The number will be rounded to the nearest whole number.
  • 0.0 : The number will be rounded to one decimal place. More zeroes added to the right means more decimal places allowed. (i.e. 0.000 means 3 numbers after the decimal)
  • s : Adds SI-prefix to numbers. (i.e. a format like #,##0.00s will be displayed as 45M with a value of 45150000. Adding one more zero before the ‘s’ will give 45.1M.)
  • % : Converts the number into a percentage. This works like the “s” keyword. The values will be multiplied by 100.
  • AM/PM: Adds 12-hour clock format.
  • YYYY: Adds full year.
  • YY: Adds last two digits of the year.
  • mmmm: Adds full month name.
  • mmm: Adds abbreviated month name.
  • mm: Adds month as a decimal number. (i.e. 01, 12]
  • dddd: Adds full weekday name.
  • ddd: Adds abbreviated weekday name.
  • dd: Adds weekday as a decimal number. (i.e. 01, 12]
  • HH: Adds hours as a decimal number.
  • MM: Adds minutes as a decimal number.
  • SS: Adds seconds as a decimal number.

Clicking Edit Animation will take you to the animation configuration menu. Here, you can customize the animation behavior for charts. When you're done, remember to press Submit to save your changes. Pressing Back will take you to the previous menu.

Inverted Data swaps the X Axis Field and Y Axis Field data fields, without actually transposing them in Excel.

The background color of the chart from the Background Color palette can be customized in this field. Pressing the eraser button next to this parameter will remove any color selection.

Naming your charts can help users distinguish their contents. Entering a text into the Chart Title box will print it on top of the chart. Title text properties can be changed from Title Color and Title Font Size options.

You can further customize your chart by pressing the blue Edit buttons on the bottom of the right hand menu. Edit X Axis and Edit Y Axis menus allow editing the label properties for values that are displayed on the two axes. Edit Legend properties affect the labels and colors of the chart legends, whereas Edit Tooltip options determine the mouse-over text format.

Additional chart-specific options are as follows:

  • In Line chart you can select a Line Drawing Style by choosing from Linear, Smooth, and Step. This property determines line behavior.
  • In Bar chart, Column chart, and Area chart, you can choose a Stack Type, which determines how the data fields will be shown on the char area. Normal will add all data fields on top of each other, while Full will stretch all data to the entire chart area, and display the percentage contribution of each item to the total for that field.

Visible

The Visible property sets the conditions under which the chart will be visible. This can be set to Always or Never.

If there are any Boolean Named Ranges (BNR) defined in your workbook (i.e. single named ranges that evaluate to TRUE or FALSE), then an additional option (By Value Of) will be available. This option allows you to configure a Boolean named range that determines whether or not this section is visible. This can either be calculated or input-based.