Overview of the custom chart configuration reference

Overview of the custom chart configuration reference

We've designed the default look and feel of Splunk charts to combine simplicity of design with strong usability. We want you to be able to easily generate your charts, incorporate them into dashboards, and share them with interested parties without needing to spend time "tinkering under the hood" to make things look just right.

But we also understand that the default chart design options in the Panel Editor won't fit everyone's needs all of the time. This is why we've also made it possible for you to customize just about every aspect of the charting UI, from the choice of chart colors, fonts, and line thicknesses to the formatting of legends and axis labels and controlling the way chart elements are laid out in the dashboard panel. All you have to do is adjust the properties for the charting elements in the underlying panel XML.

The topics in this reference chapter provide details on the various Splunk charting elements and properties that you can use to customize just about every aspect of your dashboard charts. Use this reference to customize charts whether they are built using the simplified or advanced dashboard XML. (For more information about the two kinds of XML, see "Introduction to advanced views" in this manual.)

Chart customization introduction and tutorial

While the topics in this reference chapter provide numerous small examples of how chart customization can be managed in simple dashboard XML with the Splunk charting controls, elsewhere in this manual you can find a comprehensive introduction to advanced chart customization. It includes:

• longer and more detailed chart customization examples, with some additional background on how they work.
• coverage of the slight syntax differences for chart customization in simple and advanced view XML.
• information about Splunk's two charting modules, JSChart and FlashChart. Splunk uses JSChart, a JavaScript-based charting library, to support graphics displays on iOS mobile devices. Charts in dashboards that use simple XML are displayed with JSChart by default. If your dashboard uses advanced XML, you need to manually specify which charting module each chart uses (JSChart or FlashChart).

Note: Certain chart customization properties are not supported by JSChart. If you use one of these unsupported chart customization properties with a chart in a dashboard that uses simpleXML, Splunk will use FlashChart to render the chart, which means that the chart will not display correctly in devices that do not support Flash. If you do the same thing with a chart that uses the JSChart module in an advanced XML dashboard, Splunk ignores the unsupported property setting.

For more information, see "Advanced charting options".

To learn more about adding charts to your dashboard see the "Add a chart" topic in this manual.

What you'll find in this reference

The topics in this reference provide tables for the Splunk charting elements that you can customize. The tables contain definitions of the properties available for those elements. They also tell you which properties are supported by JSChart, the JavaScript-based charting module mentioned above.

There are also tables for elements whose properties are either referred to by other elements (for example, a chart element might refer to a particular brush palette element, which in turn refers to a set of brush elements) or inherited by certain elements (for example, all chart elements inherit properties from the layoutSprite element, which in turn inherits a base set of properties from the sprite element).

This reference provides details on the following Splunk charting elements:

• Charts - The chart element controls properties specific to individual chart types. For example, when chart has a value of line, you can specify properties for a line chart, such as lineStyle or stackMode.
• Legends - You use the legend element to control aspects of the visual appearance of chart legends, including legend placement, label text, and text formatting.
• Axes - The axis element controls how data is mapped to the chart grid (but not how it appears--for that see the axisLabels element). It is set up to handle three types of chart axes: category axes (which map categorical values), numeric axes (which plot data along a numeric range), and time axes (which plot data along a range of time).
• Axis labels - The axisLabels element controls 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.
• Axis titles - The axisTitle element is mainly used for Cartesian (dual axis) charts such as bar, column, area, and line charts. It enables placement of the x- and y-axis titles within the chart layout.
• Grid lines - The gridLines element is used to control the display and appearance of chart grid lines in cartesian (dual axis) chart types, such as bar, column, area, and line charts. Grid lines correspond to axis tick marks from axis labels and extend across the span of the chart.
• Tool tips - Tool tips are the visual elements that appear on chart mouseover, displaying information that corresponds to the chart data sprite underneath the mouse pointer.
• Fonts - Font properties enable you to set a number of characteristics for the fonts used in the charts, such as the font size and style.
• Colors - Color properties enable you to set basic chart color characteristics, such as the color of the chart background.
• Brushes - You can apply a variety of different brushes for the purpose of rendering chart lines and fills in different ways. For example, if you want a line chart to render its lines with a dashed stroke instead of a solid one, you can use a brush element of the dashedStroke variety.
• Color palettes - The color palette element is used to control the colors used by brushes, which in turn are used to paint things like chart lines and series swatches in legends. You can define a set list of colors that the palette applies to series, or you can arrange to have the palette generate colors by interpolating between a range of colors (from red to yellow to blue for example).
• Brush palettes - Brush palettes match a series index to a brush type. This can come in handy for things like line charts, where you might want a different type of dashed or solid line for each series represented in the chart.
• Shapes and shape palettes - Shapes are used for markers in several cart types. You can have one shape be used throughout a chart, or you can use a shape palette to assign different shapes to different series.
• Layouts - The layout element controls the layout of all visual chart elements in a dashboard. In most cases you won't need to work with it, but you might use it to set up something like two charts that share the same x- or y-axis.
• Data - The data element enables you to tweak the tabular format that contains the reporting data from which the chart is generated. In most cases you won't need to adjust the data settings.
• Text blocks - textBlock elements control text display in legend and axis labels as well as axis title and message text.
• Layout sprites and sprites - The layoutSprite and sprite elements are formatting elements that feed Flash display properties to many other elements throughout the charting system. In most cases you won't need to adjust these settings.

• Was this topic useful?
• Post a comment