Support Portal

Welcome
Login

Cartesian Charts - Area Chart

Area Chart Options

This page describes the options for editing area charts in the visualization menu. This menu can be accessed by clicking the gear in the upper right corner of the visualization tab.

Please note that some of the options listed below may be grayed out or hidden in situations where they would conflict with other settings you have chosen.

Plot Menu Options

Grid Layout

Grid Layout provides options to separate, or trellis, a chart into several smaller charts, each representing a single row or pivot from the results table.

You can separate a chart into a maximum of 12 smaller charts. If you have more than 12 rows or pivots, limit your data by using the Row Limit, Column Limit, or Limit Displayed Rows options.



Once you select By Pivot or By Row from the drop-down menu, the Number of Charts per Row option appears. You can input a number between 1 and 12.

Series Positioning

Series Positioning specifies how series are clustered visually on a chart. The following options are available. Note that not all options apply to all chart types.

  • Grouped - For column and bar charts. Series are clustered side-by-side.
  • Overlay - For scatter, line, and area charts. Series are overlayed on the chart.
  • Stacked - Series values are added on the y-axis, so each consecutive series appears above the last. Be sure that the units of all series match.
  • Stacked Percentage - Series values are presented as percentages stacked on the y-axis, where all values add up to 100%.

Line Interpolation

Line Interpolation specifies how lines are drawn on the chart. The following options are available:

  • Linear - Displays straight lines between points
  • Monotone - Displays smooth curves between points
  • Step (center) - Points are connected by steps, with the data point located in the middle of the step
  • Step (before) - Points are connected by steps, with the data point located at the beginning of the step
  • Step (after) - Points are connected by steps, with the data point located at the end of the step

Focus Lines on Hover

Focus Lines on Hover enables greater focus on a series when a user is looking at it. When ON, if a user hovers over a data point on a particular line, all of the other lines on the chart will fade into the background.

Plot Null Values

Plot Null Values toggles the appearance of null values on the chart. When ON, null values are plotted at zero. When OFF, sections of line and area charts may show gaps. This parameter is only available when Series Positioning is Overlay.

Swap X and Y

Swap X and Y toggles whether the x and y axes are swapped from the normal configuration. When swapped, dimensions will be plotted on the y-axis, and measures will be plotted on the x-axis.

Point Style

Point Style specifies how data points will appear on the chart. The following options are available:

  • None - For line and area charts. Points are not displayed.

  • Circle (filled) - Filled circles are displayed.

  • Circle (outline) - Outlined circles are displayed.

Hide Legend

Hide Legend toggles the appearance of the series legend on a chart. This is only available when there is more than one series (except in the case of a pie chart).

Legend Align

Legend Align specifies whether the series legend will appear to the left, center, or right of the chart. This is only available when Hide Legend is off, and when there is more than one series.

Limit Displayed Rows

Limit Displayed Rows enables you to show or hide rows in a visualization, based on their position in the results. For example, if your visualization was displaying a 7-day rolling average, you may want to hide the first 6 rows.

Click Limit Displayed Rows to toggle this feature on, then specify the following options:

  • Hide or Show: Choose Hide to exclude certain rows from the visualization. Choose Show to display only a limited number of rows in the visualization.
  • First or Last: Choose if the rows to be hidden or shown will be the first or last rows in the result set.
  • Number: Specify the number of rows to be hidden or shown.

In the Data section below your visualization, any excluded rows will be shown in a darker color, and will be marked with a symbol to the left of the row number:

This option is dependent on the row order, so changing the query's sort order or adding a row limit can change the rows that are shown or hidden in the visualization.

Series Menu Options

Colors

The Colors section enables you to define the default color scheme for a chart.

Using a Predefined Color Scheme

The Colors dropdown menu enables you to choose from Analytics' pre-defined color options. Analytics includes color palettes for a variety of use cases, such as highlighting differences, showcasing a progression, serving a color-blind audience, and so forth.

Colors will be assigned to each series in order. The first series in the underlying data will be assigned the first color, and so on. If the query returns more data series than colors listed, the colors will repeat from the beginning of the list.

Creating a Custom Color Scheme

To create a custom color scheme, you can either:

  1. Click on one of the colors present to edit it.
  2. Click the + or - buttons below the color palette to add a color to the end of the palette or remove a selected color.
  3. Click EDIT ALL at the bottom right of the menu to use a comma-separated list of color values

Clicking on one of the colors already present, or clicking the "+" button, will bring up a color picker that you can use to select a color. The corresponding hex value for that color will also be displayed at the bottom of the color picker:

Alternatively, you can input a list of CSS or hex colors by first clicking on the "#" button:

You can input a list of hex strings, such as #2ca6cd, or CSS named color strings, such as mediumblue.

You'll notice that the the text box will be populated with the hex codes of any color scheme you've already chosen or customized. Copying and pasting this list is the best way to copy custom color schemes from one visualization to another.

Show Full Field Name

Show Full Field Name toggles whether to show the view name along with the field name for each axis title and series name.

Customizations

Each series in the chart can be customized in several different ways:

  1. Click the arrow next to a series to expand its options.
  2. Click on the color swatch to select a custom color for the series. This will override the color palette defined by the Colors option.
  3. Enter a custom series label if desired. This will impact the chart legend and tooltips.
  4. Select a different chart type for the series if desired. This can be useful if you want to combine different chart types on the same visualization, such as showing one series as columns and another series as a line.
  5. For line, area, or scatter series types, select the shape of the chart points.

Values Menu Options

Value Labels

Value Labels toggles the appearance of value labels for each data point on a chart.

Label Null Columns

Label Null Columns toggles the appearance of labels for null data points.

Totals Labels

Totals Labels toggles the appearance of totals for each stacked group of data points on a chart. Totals Labels is only available with Series Positioning Stacked.

Show Silhouette of Disabled Series

Show Silhouette of Disabled Series toggles a lightly-shaded representation of a disabled series in a stacked chart. Click on a series name in the bottom legend of the visualization to disable or enable the series in the visualization. Show Silhouette of Disabled Series is only available with Series Positioning Stacked.

Totals Colors

Totals Colors defines the colors of the totals labels. Click on the color swatch to select a custom color for the totals labels. Totals Colors is only available with Series Positioning Stacked.

Value Colors

Value Colors defines the colors of the value labels. This parameter takes a comma-separated list of one or more color values. The color values can be formatted as RGB hex strings, such as #2ca6cd, or as CSS named color strings, such as mediumblue.

If set to multiple colors, colors will be assigned to each series in order. The first series in the underlying table will be assigned the first color, and so on. If the query returns more data series than colors listed, Analytics will assign the series color to the value label after it runs out of your custom colors.

If no Colors values are provided, Analytics assigns the series color to the value label.

Font Size

Font Size sets the font size of value labels using any valid CSS size. Generally users will specify a number of pixels, such as 10px or 12px.

Value Rotation

Value Rotation sets the rotation of the value labels. This parameter accepts values between -360 and 360, denoting the number of degrees to rotate the labels. Value Rotation is only available with Series Positioning Grouped.

Totals Rotation

Totals Rotation sets the rotation of the totals labels. This parameter accepts values between -360 and 360, denoting the number of degrees to rotate the labels. Totals Rotation is only available with Series Positioning Stacked.

Value Format

Value Format specifies the format of the value, independent of the underlying dimension or measure. The field accepts Excel-style formatting. If no formatting is specified, the value will be displayed in the format of the underlying dimension or measure.

You can read Excel's complete guide about how to specify these formats in their documentation. However, note that color formatting is not supported in Analytics.

Using this field, you can specify the formatting of numeric values. Some of the most common formatting options are shown here:

Value FormatMeaning
#Integer (123)
*00#Integer zero-padded to 3 places (001)
0.##Number up to 2 decimals (1. or 1.2 or 1.23)
0.00Number with exactly 2 decimals (1.23)
*00#.00Number zero-padded to 3 places and exactly 2 decimals (001.23)
#,###Number with comma between thousands (1,234)
#,##0.00Number with comma between thousands and 2 decimals (1,234.00)
0.000,," M"Number in millions with 3 decimals (1.234 M). Please note division by 1 million happens automatically.
$#Dollars with 0 decimals ($123)
$0.00Dollars with 2 decimals ($123.00)
$#,##0.00Dollars with comma between thousands and 2 decimals ($1,234.00)
#%Percent with 0 decimals (1%). Please note multiplication by 100 happens automatically.
0.00%Percent with 2 decimals (1.00%). Please note multiplication by 100 happens automatically.
0.00\%Percent with 2 decimals (1.00%). Multiplication by 100 does NOT happen automatically here.


Value Density

Value Density sets the density of the value labels. Move the slider left for less dense and right for more dense.

X Menu Options

Scale Type

Scale Type specifies how the x-axis scale is calculated and displayed. The following options are available. Note that not all options apply to all chart types.

  • Automatic Based on Data - The scale will be guessed based on the underlying data. This is the default setting.
  • Ordinal - The data is plotted along the x-axis as evenly-spaced, discrete entries, regardless of relative distance between data points.
  • Linear - For scatter, line, and area charts. The data is plotted as linear numeric values. This option only applies when the underlying data can be converted to numbers.
  • Time - The data is plotted as time values. The x-axis is labeled with appropriate time increments.

Reverse Axis

Reverse Axis toggles the direction of the x-axis. When off, values increase from left to right. When on, values decrease from left to right.

Show Axis Name

Show Axis Name toggles the appearance of the x-axis name.

Custom Axis Name

Custom Axis Name sets the name for the x-axis. It accepts any string value. This parameter is only available when Show Axis Name is ON.

Axis Value Labels

Gridlines

Gridlines toggles the appearance of gridlines extending from the x-axis. Gridlines are spaced based on the scaling of the x-axis.

Label Rotation

Label Rotation sets the rotation of the x-axis value labels. This parameter accepts values between -360 and 360, denoting the number of degrees to rotate the labels.

Time Label Format

Time Label Format specifies how x-axis value labels are displayed for charts with a time dimension on the x-axis. This parameter accepts time formatting syntax, as shown below. See Time Formatting for Analytics Charts for all formatting options.

  • %b '%y, %H:%M displays Aug '14, 22:31
  • %B %Y, %I:%M %p displays August 2014, 10:31 PM
  • %x %X displays 12/15/2014 10:31:00
  • %I:%M:%S %p displays 10:31:00 PM

Time Tick Count

Time Tick Count sets the approximate tick count for the x-axis when Scale Type is Time. This parameter accepts number values larger than 0 and will approximate the tick count based on this value.

Padding Left

Padding Left sets the spacing between the left end of the x-axis and the left side of the chart. This parameter accepts integer values between 0 and 100, which denote the number of pixels of whitespace.

Padding Right

Padding Left sets the spacing between the right end of the x-axis and the right side of the chart. This parameter accepts integer values between 0 and 100, which denote the number of pixels of whitespace.

Y Menu Options

Gridlines

Gridlines toggles the appearance of gridlines extending from the y-axis. Gridlines are spaced based on the scaling of the y-axis.

Reverse Axis

Reverse Axis toggles the direction of the y-axis. When off, values increase going up the axis. When on, values decrease going up the axis.

Left Axes and Right Axes

The Left Axes and Right Axes sections let you configure the chart’s y-axes. The example below shows a chart with three y-axes, two on the left and one on right, each on a different scale:

On the left and right side of the chart, you can have one or more y-axes, each associated with one or more data series. Each data series is based on a measure, even if the measure has been pivoted. Table calculations that use a measure are listed as a data series and can be moved to another axis.

Benefits of Specifying Axes

Using this functionality, any chart can:

  • Combine arbitrary series in any number of axes
  • Split pivoted series across various axes by measure
  • Render top and bottom axes in rotated charts
  • Render charts with various measure types so long as they are not combined (such as linear and log)
  • Render log charts with values between 0 and 1

Each y-axis has its own set of configuration options and displays one or more data series on a scale relative to that y-axis.

Assigning, Removing and Changing Axes

To assign a data series to a y-axis, click and drag the data series to the desired Left or Right Axes area. You can create a new axis or add the data series to an existing y-axis. The following example shows the Order Items Total Sale Price data series being moved from the Left 1 y-axis to the Right Axes area to create a new Right 1 y-axis. A tab is created for the new Right 1y-axis that contains configuration options for the Right 1 y-axis.

Similarly, you can remove an axis by dragging each of its data series to another y-axis.

When moving a data series to a different axis:

  • If a data series is the only series associated with an axis, and you move that series to a new axis, all of its settings are preserved, including the Axis Name.
  • If a data series is one of multiple series associated with an axis, and you move that series to a new axis, almost all of its settings are preserved, except for the Axis Name.
  • If you move a data series to an existing axis it will inherit the settings of the destination axis.

Configure Axis

The Configure Axis section displays a tab for each y-axis configured in the Left Axes and Right Axes sections:

Click on the tab for an axis to configure that y-axis. You configure each y-axis separately using its own set of configuration options.

Scale Type

Scale Type specifies how the y-axis scale is calculated and displayed. The following options are available. Note that not all options apply to all chart types.

  • Linear - The data is plotted along the y-axis as evenly-spaced, discrete entries, regardless of relative distance between data points. This is the default setting. Most data is best displayed on a linear scale.

  • Logarithmic - The data is plotted along the y-axis using a logarithmic scale, which is based on orders of magnitude. If the data has a cluster of very small and very large values, this setting enables you to see variation in the small values while also showing the larger values. The logarithmic scale type can only be used for data with positive values, and is only available when you have set Series Positioning to "Grouped" or "Overlay" on the Plot tab.

Show Axis Names

Show Axis Names toggles the appearance of y-axis labels.

Show Axis Values

Show Axis Values toggles the appearance of y-axis values.

Unpin Axis From Zero

Unpin Axis From Zero toggles letting the chart focus on the area for which data exists, rather than showing the full scale starting at zero.

Axis Name

Axis Name lets you enter the label for the selected y-axis.

Y Axis Format

Y Axis Format specifies the number format of the y-axis values, independent of the underlying dimension or measure. The parameter accepts Excel style formatting. If no formatting is specified, the value will be displayed in the format of the underlying dimension or measure.

You can read Excel's complete guide about how to specify these formats in their documentation. However, at this time date formatting and color formatting are not supported in Analytics.

Some of the most common formatting options are shown here:

Value FormatMeaning
#Integer (123)
*00#Integer zero-padded to 3 places (001)
0.##Number up to 2 decimals (1. or 1.2 or 1.23)
0.00Number with exactly 2 decimals (1.23)
*00#.00Number zero-padded to 3 places and exactly 2 decimals (001.23)
#,###Number with comma between thousands (1,234)
#,##0.00Number with comma between thousands and 2 decimals (1,234.00)
0.000,," M"Number in millions with 3 decimals (1.234 M). Please note division by 1 million happens automatically.
$#Dollars with 0 decimals ($123)
$0.00Dollars with 2 decimals ($123.00)
$#,##0.00Dollars with comma between thousands and 2 decimals ($1,234.00)
#%Percent with 0 decimals (1%). Please note multiplication by 100 happens automatically.
0.00%Percent with 2 decimals (1.00%). Please note multiplication by 100 happens automatically.
0.00\%Percent with 2 decimals (1.00%). Multiplication by 100 does NOT happen automatically here.


Tick Density

Tick Density sets the density of tick marks on the y-axis. The following options are available:

  • Default - Sets ticks to the default density.

  • Custom - Enables you to set ticks with a custom density. Selecting this option will display a slider bar where you can set the custom density.

Minimum Value

Minimum Value defines the minimum value for the selected y-axis.

Maximum Value

Maximum Value defines the maximum value for the selected y-axis.

Add Reference Line

The Add Reference Line button enables the creation of reference lines in a chart. Click it as many times as you like to add any number of reference lines, and reveal the settings for those reference lines. To delete a reference line, click the X in the upper right of its settings.

Reference lines are applied to the first series in your query results (the leftmost column in the result set), even if that series is hidden from the visualization. You can reorder your columns to change the series the reference line is applied to.


Type (for a reference line)

Type specifies the type of reference line to apply to the chart. The following options are available:

  • Line: A horizontal line is plotted at the y-axis value entered in the Valuesetting.
  • Range: A shaded range is plotted including and between the y-axis values entered in the Start Value and End Value settings.
  • Line with Margins: A horizontal line is plotted at the y-axis value entered in the Value setting. Shaded ranges are plotted above and below the horizontal line, based on the values entered in the Margin Above and Margin Below settings.

Value, Start Value, and End Value (for a reference line)

Value specifies the point on the axis to plot the reference line. You can set the value to the median, average (mean), maximum, or minimum for the data returned in your query results. You can also select Custom to enter a specific value from the axis.

When Type is set to Range, the Start Value and End Value settings replace the Value setting; they accept the same types of values as Value.

Margin Above and Margin Below (for a reference line)

Margin Above and Margin Below specify the shaded ranges to plot on either side of a reference line when Type is set to Line with Margins.

You can set the margin values to the population standard deviation or population variance for your query results. You can also select Custom to enter a specific value or "min", "max", "mean", or "median" to use those calculations from your query results.

Label (for a reference line)

Enter the label that you'd like to appear on the reference line in the Labelfield. You can also use the following calculations, embedded in double curly brackets {{ }}, in the Label field:

  • median
  • mean
  • max
  • min
  • deviation (for population standard deviation)
  • variance (for population variance)

For example, you could enter "Average: {{mean}}" to show something like Average: 123.4.

If you leave the Label field blank, the value of the line will appear on the reference line.

Label Position (for a reference line)

You can position the reference line label at the left of the chart, the right of the chart, or in the center, by selecting one of those options under Label Position.

Color (for a reference line)

Color enables you to specify the color of the reference line in a chart.

Click the color box to reveal a palette picker that you can scroll through to choose a color. To choose a custom color, select the Custom tab on the palette picker and use the color picker that appears, or enter a hex string or CSS named color string into the color value box.

Value Format (for a reference line)

Add custom formatting to the value shown in the reference line label with the Value Format field.

You can use Excel-style formatting to format the label value. 

Add Trend Line

The Add Trend Line button enables the creation of trend lines in a chart. Click it as many times as you like to add any number of trend lines, and reveal the settings for those trend lines. To delete a trend line, click the X button to the upper right of the trend line's settings (described below).

Analytics ignores any NULL values in your data and extrapolates the trend line based on non-NULL values.

Trend Type

Trend Type specifies the type of trend line to apply to the chart. Click the Add Trend Linebutton first to add a trend line to your chart and reveal this setting. The following options are available:

  • Linear - A linear trend line plots a straight line that best fits the data. It is often used when the values are increasing or decreasing at a fairly steady rate. Your data can have negative and/or positive values.
    For those who are interested, the equation that governs a linear trend line is y = a + bx.
  • Exponential - An exponential trend line treats the y-variable as an exponential function of the x-variable. It is typically used when y-values exponentially rise or fall. You cannot use this option if your y-variable includes zero or negative values.For those who are interested, the equation that governs an exponential trend line is y = aebx.
  • Logarithmic - A logarithmic trend line plots the y-variable as a logarithmic function of the x-variable (which is based on orders of magnitude). It is typically used when the rate of change in the y-variable increases or decreases quickly and then levels out. The line will be curved on a linear scale and a straight line on a logarithmic scale. You set the type of scale using the Scale Type option. You cannot use this option if your x-variable includes zero or negative values.For those who are interested, the equation that governs a logarithmic trend line is y = a + b * ln(x).
  • Moving Average - The data is plotted along the y-axis as a moving average, also called a rolling average. It is typically used to smooth out minor fluctuations and show an overall trend more clearly. Each point on the moving average trend line is the average value of the previous data points. The number of previous data points to include can be specified with the Period setting. For example, if you apply a trend line to Daily Sales, and the period is set to 7, then for a given date, the Moving Average plots the average sales for the 7-day period ending that date. In the case where the number of previous data points is less than the period setting, the moving average will be calculated over the partial periods, but is rebased to the number of available data points.

Period (for a trend line)

Period specifies the number of data points to include when calculating a moving average. Click the Add Trend Line button first to add a trend line to your chart, then choose a Trend Type of "Moving Average" to reveal this setting.

Since moving averages are typically used for date-based data, the choices are 7 (for a week), 14 (for two weeks) and 28 (for 4 weeks).

Series Index (for a trend line)

Series Index enables you to specify which chart series should have a trend line added to it. Click the Add Trend Line button first to add a trend line to your chart and reveal this setting.

This option defaults to 1, the first defined series. Each series is numbered according to the order it appears in your data table.

Show Label (for a trend line)

Show Label toggles adding a descriptive label to the trend line.

Label (for a trend line)

Label specifies the label text.

Label Position (for a trend line)

Label Position specifies whether the trend line label will appear at the left edge of the trend line, the center of the trend line, or at the right edge of the trend line.

Label Type (for a trend line)

Label Type specifies the type of label to apply to the trend line. The following options are available:

  • String - Applies the text specified in the Label box to the trend line.
  • R^2 - Applies a coefficient of determination label - also known as R squared - to the trend line. The R^2 label indicates the proportion of the variance in the Series Index data. It helps you understand how well the trend line matches the data, with 0 meaning no fit, 1 meaning perfect fit, and values in between indicating partial fit. This option will only work when Trend Type is set to "Linear".
  • Equation - Applies a label to the trend line that shows the equation used to determine the trend line.

Color (for a trend line)

Color enables you to specify the color of the trend line in a chart. Click the Add Trend Line button first to add a trend line to your chart and reveal this setting.

Click the color box to reveal a color picker you can use to choose a color. The picker initially displays the current color and its hex value. You can change the color by clicking on the colors or by typing a hex value.



Did you find it helpful? Yes No