Saltar al contenido principal
waffle.svg
Domo

Spark Line Graph

Version 2

 

Important: When referencing this page outside of Knowledge Base, use this link: http://knowledge.domo.com?cid=linegraph

Intro

A Spark Line graph is basically the same thing as a standard Line graph except that it a) does not include axes, providing a simple and uncluttered view of rises and falls in your data, and b) includes a built-in gauge that shows the degree of change in the chart data. For example, the following screenshots shows a Spark Line graph in which the COGS value has fallen 74.35% from an initial value of $6.68K.

spark_line_example.png

By default, the gauge shows the degree of change between the first and last data items in the chart; however, you can change this to show the degree of change for the last two data items if you want. You can also change other aspects of Spark Line graphs, such as whether the degree of change is a percentage or a value, whether it appears as green or red, the fill color for the graph, etc. You can make all of these changes in the Chart Properties for the graph.

As with most other chart types, Spark Line graphs include hover labels that show the specific data for each data point. So even though there are no axes, users can still ascertain values for data points by mousing over them. For more information about hover labels, see Formatting Data Label and Hover Text in Your Chart.

Powering Spark Line graphs

Spark Line graphs require only two columns or rows of data from your DataSet—one for categories (generally dates or times) and one for values. As with most other Line graphs, categories are represented along the horizontal axis and values are represented on the vertical axis (though these are not shown in a Spark Line chart for the sake of simplicity). To build a Spark Line in Analyzer, you drag your category column into the "X Axis" field and your value column into the "Y Axis" field.

For information about value, category, and series data, see Understanding Chart Data

In the Analyzer, you choose the columns containing the data for your Spark Line graph. For more information about choosing data columns, see Applying DataSet Columns to Your Chart.

For more information about formatting charts in the Analyzer, see KPI Card Building Part 2: The Analyzer.

Customizing Spark Line graphs

You can customize the appearance of a Spark Line graph by editing its Chart Properties. For information about all chart properties, see Chart Properties. Unique properties of Spark Line graphs include the following. You can click a thumbnail image to see a larger image.

Property

Description

Example

General > Background Fill

Specifies the background fill color for the graph. If Default is selected, no background color is used. 

sparkline_background_fill.png

Value Options > Hide

Hides the summary value in the graph. (This is the first number that appears in the graph's built-in gauge. For example, in the screenshot of the graph at the top of this article, the value is 6.68K.)

Value Options > Value

Indicates how the graph's summary value is derived. You can choose from any of the following options for this property:

First Value

The summary value is the first value on your line. This is the default option.

Last Value

The summary value is the last value on your line.

Sum

The summary value is the sum of all values on the line.

Average

The summary value is the average of all values on the line.

Minimum

The summary value is the minimum value on the line.

Maximum

The summary value is the maximum value on the line.

Count

The summary value is a count of the number of values on the line.

 

Value Options > Size

Specifies the size of the summary value in the graph. You can choose from Medium (default) or Small.

Value Options > Value Format

Determines the general number format for your graph's summary value. Options include Number (which includes no special formatting), Currency (in which a currency symbol is affixed), and Percentage (in which a percent symbol is affixed).

Value Options > Divide Value By

Refers to the number that the gauge value is to be divided by, if any. This option is useful when the value is very large and you want to abbreviate it by dividing by a common number. For example, if the gauge value represented millions of dollars, you could choose to divide by millions—the gauge value would then be reduced to more comprehendible single digits. When you choose to divide by Percentage, the gauge value is multiplied by 100.

Value Options > Decimal Places

Determines the number of decimal places used in the summary value. You can choose from DefaultNone, and options for numbers of decimal places (from ".0" to ".00000"). By default, Domo automatically determines the optimal number of decimal places for the gauge value. When you select None, the value is rounded to the nearest whole number.

Value Options > Negative Numbers

Determines the format for negative numbers.

If you select -100, negative values have a minus symbol affixed. If you select (100), negative values are enclosed in parentheses.

Change Value Options > Hide

Hides the change value in the graph. (This is the second number that appears in the graph's built-in gauge. For example, in the screenshot of the graph at the top of this article, the value is -74.35%.)

Change Value Options > Value

Specifies whether the change value is a percent change (default) or a difference in values. 

Change Value Options > Data

Specifies whether the change value is derived from the first and last values in the chart (default) or the last two values in the chart. 

Change Value Options > Size

Specifies the size of the change value in the graph. You can choose from Medium (default) or Small.

Change Value Size > Direction Indicator

Specifies whether the symbol used to represent change in the change value is an arrow (default), a curved arrow, or a triangle. Examples of all three of these are shown at right.

sparkline_arrow1.png

sparkline_arrow2.png

sparkline_arrow3.png

Change Values > Reverse Color Direction

By default, if your change value is positive, the value appears green; if it is negative, the value appears red. By setting the Reverse Color Direction property, you can switch this default behavior. This is useful for gauges in which low values are ideal (such as a gauge that keeps track of workplace accidents). 

Change Value Options > Value Format

Determines the general number format for your graph's change value. Options include Number (which includes no special formatting), Currency (in which a currency symbol is affixed), and Percentage (in which a percent symbol is affixed).

Note: The Number and Currency options will not work unless you set Change Value Options > Value to Value Change.

Change Value Options > Hover Format

Determines the number format for your graph's hovers (i.e. the text that appears when you mouse over a data point in the graph). Options include Number (which includes no special formatting), Currency (in which a currency symbol is affixed), and Percentage (in which a percent symbol is affixed). 

For more information about hovers, see Formatting Data Label and Hover Text in Your Chart.

Change Value Options > Hover Decimal Places

Determines the number of decimal places that appear in values in your graph's hovers (i.e. the text that appears when you mouse over a data point in the graph). 

For more information about hovers, see Formatting Data Label and Hover Text in Your Chart.

Change Value Options > Positive Color

Specifies the color used when the degree of change in your graph is positive.

Change Value Options > Negative Color

Specifies the color used when the degree of change in your graph is negative.

Line Options > Style

Determines whether the line in your graph is angular (Plain) or curved. Plain is the default.

Line Options > Thickness

Determines whether the line in your graph is thin (default), medium, or thick. The example at right shows a Spark Line graph in which Thick has been selected.

sparkline_thick.png

Line Options > Hide Area Fill

Hides the area fill in the graph. The example at right shows a graph in which this has been done.

sparkline_no_fill.png