Developing Views and Apps for Splunk Web

Axis and grid line properties

This topic lists the properties for the axis, axisLabels, axisTitle, and gridLines elements.

Axis

Usage: charting.axisX.* and charting.axisY.*

An axis is a non-visual object that maps data to some relative location depending on its type and various options. The visual part of an axis is handled by a separate element - axis labels.

If you are working with a single-axis chart (range marker, value marker), then you just use axisX to work with its axis properties.

If you are working with a dual axis chart (area, bar, bubble, column, histogram, line, and scatter) you use axisX and axisY to set properties for the x- and y-axes, respectively.

Note: Keep in mind that for bar charts, axisY is reversed so that values descend from top to bottom vertically:

<option name="charting.axisY.reverse">true</option>

For more information, see the documentation of the reverse parameter, below.

Values

axis has three main values that depend on the type of values being plotted on the axis:

• category: For the plotting of categorical values, like a series of host names in a column chart.
• numeric: For the plotting of numeric values, such as a range from 1-1000.
• time: For the plotting of time values along a timeline.

Example

<option name="charting.axisX">numeric</option>
<option name="charting.axisX.minimumNumber">10</option>
<option name="charting.axisX.maximumNumber">200</option>
<option name="charting.axisY">category</option>
<option name="charting.axisY.categories">[red,white,blue]</option>

This code sets up a numeric x-axis scale that starts at 10 and stops at 200. Values below and above that range are not plotted on the chart.

It also hard-codes three categories for the y-axis: red, white, and blue. If the search upon which the chart is based is charting values of a colors field, this ensures that only events with red, white, and blue values get plotted. (Note that you can also arrange this behavior through search language.)

Also used by

axis is not used by other elements.

Properties for all axis types

All axis types The following properties affect all axis types.
Property name	Value type	Definition	Default	Supported by JSChart?
reverse	boolean	Determines whether or not the axis is reversed. Bar chart Y axes are reversed so that values descend from top to bottom vertically.	false	No

Properties for category (non-numeric) axes

Category axes The following properties apply only to category axes, which plot categorical values (values that are string-based in nature, but are not time values).
Property name	Value type	Definition	Default	Supported by JSChart?
categories	array<string>	The list of categories to plot on the axis, delimited by commas without spaces and formatted within brackets.	auto	No
comparator	comparator	The comparator to use to sort the list or categories. Comparators can be alphabetic (values are sorted alphabetically), natural (values are sorted according to their natural ordering), numeric (values are sorted numerically), or sequentialNumeric (values are sorted according to the sequence of numbers contained within them--useful for IP addresses, version strings, and similar numeric sequences).	none	No

Properties for numeric axes

Numeric axes The following properties apply only to numeric axes, which plot numeric values.
Property name	Value type	Definition	Default	Supported by JSChart?
scale	scale	For numeric axes, this represents the type of scale that Splunk applies to a numerical axis. Potential values are linear and log (for a logarithmic scale). It's only supported for the Y-axis (charting.axisY.scale) in most chart types, with the exception of scatter charts, where it also applies to the X-axis (charting.axisX.scale).	linear	Yes
includeZero	boolean	When set to true this forces the axis range to include zero.	false	Yes
minimumNumber	number	Sets the minimum number for the visible axis range.	auto	Yes
maximumNumber	number	Sets the maximum number for the visible axis range.	auto	Yes

Properties for time axes

Time axes The following properties apply only to time axes, which plot time values along a timeline.
Property name	Value type	Definition	Default	Supported by JSChart?
minimumTime	datetime	Sets the minimum time for the visible axis range. Value should be an ISO-8601 date time string in the following format: YYYY-MM-DDTHH:MM:SS.MMM-HH:MM	auto	No
maximumTime	datetime	Sets the maximum time for the visible axis range. Value should be an ISO-8601 date time string in the following format: YYYY-MM-DDTHH:MM:SS.MMM-HH:MM	auto	No

Axis labels

Usage: charting.axisLabelsX.* and charting.axisLabelsY.*

The axisLabels element enables the visualization of chart axes. It places tick marks and labels at locations along chart axes that are appropriate depending upon the state of those axes.

The separation between the axis and axisLabels element allows a single axis to have multiple sets of labels and tick marks, which is useful if you want duplicate labels on both sides of a chart (in other words, a chart with an X axis at the bottom, and duplicate Y axes on the left and right side). The Search app timeline is an example of just such a chart. This separation also enables the setup of charts with labels in different unit resolutions (such as one in years and one in months).

Values

The axisLabels element has three values that relate to the three types of axes that Splunk supports (see the axis element for more information).

• category
• numeric
• time

It's important to note that most axisLabels parameters belong to all axis types.

Example

<option name="charting.axisLabelsX">numeric</option>
<option name="charting.axisLabelsX.integerUnits">true</code>
<option name="charting.axisLabelsX.minorTickSize">10</option>
<option name="charting.axisLabelsX.majorTickSize">20</option>
<option name="charting.axisLabelsX.majorLabelAlignment">afterTick</option> *
<option name="charting.axisLabelsX.minorLabelStyle.margin">(3,3,2,2)</option>
<option name="charting.axisLabelsX.minorLabelStyle.alignmentX">0</option>
<option name="charting.axisLabelsX.minorLabelAlignment">afterTick</option> *

This sets up a variety of parameters for numeric x-axis labels. It sets the small and large tick size in pixels, defines the x-axis margins, and gives the labels an alignment that places them after their corresponding tick mark. It also indicates that the major unit labels for the numeric x-axis should be rounded to the nearest integer.

Also used by

• layout.axisLabels.*

See the "Layout properties" discussion for more details.

Axis label properties

all axis labels The following properties apply to all three axis label types. All axis label types inherit properties from LayoutSprite as well.
Property name	Value type	Definition	Default	Supported by JSChart?
placement	string	Controls the placement of the axis labels within a dual axis chart layout. Valid values are left, right, top, and bottom.	bottom	No
axis	axis	Indicates the axis to label. For example, to indicate the y-axis, use: <option name= "charting.axislabelsY.axis"> @axisY</option>	See the axis section for properties and defaults.	No
axisBrush	brush	Indicates the brush to use to paint the line that runs along the length of the axis (perpendicular to the tick marks). For example, to use the predefined axisLineBrush element, which provides the standard axis line brush properties: <option name= "charting.axisLabelsX.axisBrush"> @axisLineBrush</option>	See the brush section for properties and defaults.	No
axisVisibility	string	Determines whether or not the axis line is visible or not. Valid values are show and hide	show	Yes
majorTickBrush	brush	Indicates the brush to use to paint the major axis tick marks. For example, to use the predefined axisLineBrush element, which provides the standard axis line properties: <option name= "charting.axisLabelsX.majorTickBrush"> @axisLineBrush</option>	See the brush section for properties and defaults.	No
majorTickSize	number	The size of the major tick marks in pixels.	6	Yes
majorTickVisibility	string	Determines whether the major tick marks are visible or not. Valid values are auto (shows a major tick only if the corresponding label is visible), show (forces all major ticks to be visible, regardless of label visibility), and hide (forces all major ticks to be hidden).	auto	Yes
minorTickBrush	brush	Indicates the brush to use to paint the minor axis tick marks. For example, to use the predefined axisLineBrush element, which provides the standard axis line properties: <option name= "charting.axisLabelsX.minorTickBrush"> @axisLineBrush</option>	See the brush section for properties and defaults.	No
minorTickSize	number	The size of the minor tick marks in pixels.	6	Yes
minorTickVisibility	string	Determines whether the minor tick marks are visible or not. Valid values are auto (shows a minor tick only if the corresponding label is visible), show (forces all minor ticks to be visible, regardless of label visibility), and hide (forces all minor ticks to be hidden).	auto	Yes
majorLabelStyle	style<textBlock>	Applies properties to major tick mark labels.	See the textBlock table for specific properties and defaults.	No
majorLabelAlignment	string	Controls the alignment of the major labels relative to their corresponding tick mark. Valid values are atTick, afterTick, and beforeTick.	atTick	No
majorLabelVisibility	string	Controls the visibility of the major tick mark labels. Valid values are auto (automatically shows or hides individual major labels to maintain readability in the available space without overlapping), show (forces all major labels to be visible even when there isn't enough space to display them without overlapping), and hide (hides all major labels). Set majorLabelVisibility to show if you always want labels to appear, even when a large number of results are displayed.	auto	Yes
minorLabelStyle	style<textBlock>	Applies properties to minor tick mark labels.	See the textBlock table for specific properties and defaults.	No
minorLabelAlignment	string	Controls the alignment of the minor labels relative to their corresponding tick mark. Valid values are atTick, afterTick, and beforeTick.	atTick	No
minorLabelVisibility	string	Controls the visibility of the minor tick mark labels. Valid values are auto (automatically shows or hides individual minor labels to maintain readability in the available space without overlapping), show (forces all minor labels to be visible even when there isn't enough space to display them without overlapping), and hide (hides all minor labels). Set minorLabelVisibility to show if you always want labels to appear, even when a large number of results are displayed.	auto	No
extendsAxisRange	boolean	Determines whether the range of the axis should be extended to snap to whole major tick marks.	true	Yes

Category axis label properties

There are currently no properties that are specific to this axis label type.

Numeric axis label properties

Numeric axis labels The numeric axis labels place labels for a corresponding numeric axis. The following properties are specific to the numeric axis label type.
Property name	Value type	Definition	Default	Supported by JSChart?
majorUnit	number	The spacing unit at which to place major tick marks along the numeric axis. By default, this value is automatically calculated based on the scale of the related axis.	auto	Yes
minorUnit	number	The spacing at which to place minor tick marks. Possible values vary depending on the scale you are working with. By default, this value is automatically calculated based on the scale of the related axis.	auto	No
scaleMajorUnit	boolean	Determines whether the major unit is relative to the scale of the numeric axis.	true	No
scaleMinorUnit	boolean	Determines whether the minor unit is relative to the scale of the numeric axis. (The minor unit of a numeric axis is usually relative to the major unit.)	false	No
integerUnits	boolean	Indicates whether the major unit should be rounded to the nearest integer.	false	Yes

Time axis label properties

Note the restriction for usage of the majorUnit property for time axis labels. It is only supported in Flash, and to make it appear in Flash you must add an additional tag to the chart definition.

Time axis labels The time axis labels place labels for a corresponding time axis. The following properties are specific to the time axis label type.
Property name	Value type	Definition	Default	Supported by JSChart?
timeZone	timeZone	The time zone in which labels are computed. Can be: 1) the character z or Z, indicating UTC time (constant offset 0); or 2) A numeric value, indicating the time zone offset in seconds, or 3) a string in serialized time zone format, indicating the offset changes for the time zone on the Splunk server. Any other value is interpreted as the local time in whatever browser is being used to view the chart. For more information see the zoneinfo (TZ) database.	By default timeZone is assigned a serialized string from the Splunk server that contains all the information about where the time zone offset changes occur.	No
majorUnit	duration	Determines the spacing at which to place major tick marks, in terms of duration. By default this is determined automatically. To define a specific spacing, use an ISO-8601 duration string in the following format: PnYnMnDTnHnMnS. Note: Splunk will ignore your setting for this property unless you force the chart to display in Flash. To do this, add a line for another unsupported property such as scaleX to your chart definition. This forces the chart to display in Flash with your majorUnit setting displaying appropriately along the time axis. Example: You want to force the time axis to be marked in 1 hour increments. If you just put in <option name="charting.axisLabelsX.majorUnit"> P0Y0M0DT1H0M0S</option>, Splunk will ignore the setting. But if you add <option name="charting.scaleX">1</option>, Splunk will be forced to display the chart in Flash with the desired 1 hour unit setting on the X axis.	auto	No
minorUnit	duration	Determines the spacing at which to place minor tick marks, in terms of duration. By default this is determined automatically. To define a specific spacing, use an ISO-8601 duration string in the following format: PnYnMnDTnHnMnS	auto	No

Axis title

Usage: charting.axisTitleX.* and charting.axisTitleY.* The axisTitle element is designed to enable the placement of the axis title within a dual axis chart layout.

Note: While axisTitle is mainly to be used for dual axis charts, you could create an axisTitle element and place it within the layout.axisTitles list for a single-axis chart or pie chart.

Values

• axisTitle

Example

<option name="charting.axisTitleX.text">Source type</option> <option name="charting.axisTitleY.text">KB indexed</option>

Also used by

• layout.axisTitlesX.*, layout.axisTitlesY.*

See the "Layout properties" discussion for more details.

Properties

All axis titles The axis title element inherits properties from textBlock and has one additional property: placement.
Property name	Value type	Definition	Default	Supported by JSChart?
placement	string	Determines the placement of the axis title within a dual axis chart layout. Valid values are left, right, top, and bottom.	bottom	No

Grid lines

Usage: charting.gridLinesX.* and charting.gridLinesY.*

The gridLines element is used by dual axis charts to control the display and appearance of chart grid lines, which correspond to axis tick marks from axis labels and extend across the span of the chart.

Values

• gridLines

Also used by

• layout.gridLines.*

See the "Layout properties" discussion for more details.

Properties

All grid lines Grid lines inherit properties from layoutSprite and have the following additional properties as well.
Property name	Value type	Definition	Default	Supported by JSChart?
axisLabels	axisLabels	Indicates the axis labels for which to generate the grid lines. Axis labels should use the @ sign to reference the axis labels. For example: @myAxisX.	Not assigned.	No
majorLineBrush	brush	Indicates the brush to use to paint the major grid lines (corresponds to the major tick marks). For example, to use the predefined gridLineBrush element, which provides the standard grid line brush properties: <option name="charting.gridLinesY.majorLineBrush"> @gridLineBrush</option>	See the brush section for properties and defaults.	No
minorLineBrush	brush	Indicates the brush to use to paint the minor grid lines (corresponds to the minor tick marks). For example, to use the predefined gridLineBrush element, which provides the standard grid line brush properties: <option name="charting.gridLinesY.minorLineBrush"> @gridLineBrush</option>	See the brush section for properties and defaults.	No
showMajorLines	boolean	Determines whether major grid lines are visible.	true	Yes
showMinorLines	boolean	Determines whether minor grid lines are visible.	false	Yes