Advanced charting options

Advanced charting options

Charts and graphs built in Splunk are extremely customizable. Each chart and graph is built in Flash from your data. You can customize everything from the axis labels to the chart colors. This page discusses a few common customizations in both the simplified and advanced XML. For more information on building charts in simplified XML, read the page about adding a chart to your dashboard. Also, check out the charting reference in this manual for a complete list of all the chart formatting options.

Chart colors

You may want to set a specific set of colors for your series in your chart. To change chart colors, use the seriesColors property charting.seriesColors. The seriesColors property is the simplest way to adjust the colors of series in a Splunk chart. It is represented as a list of hexadecimal color values (0xRRGGBB values separated by commas and surrounded by brackets).

For example, using the simplified dashboard XML:

<dashboard>
 <label>My dashboard</label>
 <row>
  <chart>
   <searchName>My saved report</searchName>
    <option name="charting.seriesColors">[0xFF0000,0xFFFF00,0x00FF00]</option>
   </chart>
  </row>
</dashboard>

In the advanced XML, use the charting options with HiddenChartFormatter, like this:

...
<module name="HiddenChartFormatter">
  <param name="charting.seriesColors">[0xFF0000,0xFFFF00,0x00FF00]</param>
...

Series colors for Splunk charts are index-based, which means that a color is assigned to a particular series based on its index among all other series (note that this usage of "index" does not refer to Splunk event indexes or indexers) assigned to legend labels in a specific order. Given the seriesColors list defined above, the first series of a chart would be assigned color 0xFF0000 (red), the second series would be assigned 0xFFFF00 (yellow), and so on.

For example, using the simplified dashboard XML:

<dashboard>
 <label>My dashboard</label>
 <row>
  <chart>
   <searchName>My saved report</searchName>
    <option name="charting.legend.labels">[error,warn,info]</option>
    <option name="charting.seriesColors">[0xFF0000,0xFFFF00,0x00FF00]</option>
   </chart>
  </row>
</dashboard>

Using the advanced XML:

...
<module name="HiddenChartFormatter">
  <param name="charting.legend.labels">[error,warn,info]</param>
  <param name="charting.seriesColors">[0xFF0000,0xFFFF00,0x00FF00]</param>
...

This assigns the series named error to the color 0xFF0000 (red) and the series named warn to the color 0xFFFF00 (yellow) (and so on) from the seriesColors list above.

However, if there are other charts in a view, this mapping won't necessarily be guaranteed. That's because all legends for all charts in a view are connected to a common "master legend" by default so that their colors are synchronized. The master legend determines the final label/series index mapping from the merged mappings of its "slave" legends. The first slave legend to be processed by the master legend (typically the first one in a view) has its labels placed before the labels of the next legend to be processed (minus duplicates). Therefore, error at series index 0 in the labels list above won't necessarily be at series index 0 in the master list. To alleviate this problem, you can exclude a legend from synchronization by assigning its masterLegend property to null or an empty string.

In your simplified dashboard XML, this would appear as:

<dashboard>
 <label>My dashboard</label>
 <row>
  <chart>
   <searchName>My saved report</searchName>
    <option name="charting.legend.labels">[error,warn,ok]</option>
    <option name="charting.seriesColors">[0xFF0000,0xFFFF00,0x00FF00]</option>
    <option name="charting.legend.masterLegend"></option>
   </chart>
  </row>
</dashboard>

This guarantees a one-to-one mapping between the labels and seriesColors lists above.

But what if you want to assign a color to a particular series based on its name instead of its series index? In that case you can use another property, fieldColors, to map specific colors to particular fields. The fieldColors property is represented as a map of field/color pairs surrounded by curly braces:

<option name="charting.fieldColors">{"error":0xFF0000,"warn":0xFFFF00,"info":0x00FF00}</option>

This example assigns the series named <code>error to the color 0xFF0000 (red), the series named warn to the color 0xFFFF00 (yellow), and the series named info to the color 0x00FF00 (green). Although not required in this case, double quotes must surround field names containing any of these characters []{}(),:". Existing double quotes or backslashes in the field name must be escaped with a preceding backslash.

Brushes and palettes

The entire concept of a series “color” is a drastic simplification of how a series, or any other visual element in Splunk charts, is actually styled. For example, the default style of all series in Splunk charts is not a solid color at all – it’s a gradient of two colors. The seriesColors property described earlier is actually a convenience property to simplify the complexity of how chart styles are really defined. If you’re only interested in changing the default series color mappings of a chart, while keeping the rest of the default styling, then the seriesColors property will suffice. If, however, you want more elaborate styling beyond the default gradients or even beyond colors, then you’ll need to become familiar with the underlying brush and palette architecture.

All visual elements in Splunk charts, with the exception of text, are “painted” using brushes. A brush can paint fills, strokes, gradients, images, and even video, or any combination and layering these. For example, a Solid Fill Brush paints solid color fills, while a Solid Stroke Brush paints solid color strokes. There is also a Group Brush that paints with a group of brushes simultaneously, which can be used, for example, to paint a solid color fill surrounded by a solid color stroke. Here's an example of how a brush with a solid red fill and 50% transparency might be written:

<dashboard>
 <label>My dashboard</label>
 <row>
  <chart>
   <searchName>My saved report</searchName>
    <option name="charting.myBrush">solidFill</option>
    <option name="charting.myBrush.color">0xFF0000</option>
    <option name="charting.myBrush.alpha">0.5</option>
  </chart>
 </row>
</dashboard>

A chart, however, might have several series to plot and, therefore, might need several brushes. Instead of requiring a brush to be specified for each individual series, charts use brush “palettes”. A brush palette essentially maps a series index to a brush. There are various brush palettes available in Splunk charts, the simplest of which is the Solid Fill Brush Palette. The Solid Fill Brush Palette generates a solid fill brush for each series. To determine the color of each brush it generates, it uses another type of palette - a color palette. Like a brush palette, a color palette maps a series index to a color. For example, a List Color Palette maps a series index directly to a color from a specified list of colors. By default, if an index is out of range of the list of colors, it is wrapped around to the beginning of the list, essentially repeating the colors. The List Color Palette can optionally interpolate between the list of colors, instead of wrapping, to produce a range of colors that will span over the total number of series. The following example specifies a color palette that interpolates between red, green, and blue:

<dashboard>
 <label>My dashboard</label>
 <row>
  <chart>
   <searchName>My saved report</searchName>
    <option name="charting.myColorPalette">list</option>
    <option name="charting.myColorPalette.colors">[0xFF0000,0x00FF00,0x0000FF]</option>
    <option name="charting.myColorPalette.interpolate">true</option>
   </chart>
  </row>
</dashboard>

Property references

In order to use the color palette we defined above to generate Solid Fill Brushes for a chart, we need to reference it from the appropriate property of a Solid Fill Brush Palette. To reference a property to use as the value of another property, you use the “@” symbol followed by the property name to reference (minus the “charting” prefix). The Solid Fill Brush Palette has a colorPalette property that expects a color palette as its value:

<option name="charting.myBrushPalette">solidFill</option> <option name="charting.myBrushPalette.colorPalette">@myColorPalette</option>

Now we can again use a property reference to create a Column Chart whose columns will be painted using the brushes generated from myBrushPalette. The Column Chart has a columnBrushPalette property specifically for this purpose:

<option name="charting.chart">column</option> <option name="charting.chart.columnBrushPalette">@myBrushPalette</option>

We could have also used a property reference in our original definition of myColorPalette to reference another property defining the list of colors. This is exactly how the simple seriesColors property described earlier is wired up to the underlying default set of brushes and palettes in Splunk charts:

<option name="charting.myColorPalette.colors">@seriesColors</option>

Create chart options on the fly

You can define your own properties on the fly by simply declaring them. For example, the following declares a custom brush with a red solid fill:

   <option name="charting.myBrush">solidFill</option>
   <option name="charting.myBrush.color">0xFF0000</option>

You can assign a property to another property either by reference or copy. The ‘@’ symbol denotes a property reference and the ‘#’ symbol denotes a property copy (or clone). For example, to use the custom brush defined above as the background of the tooltip, you can use a property reference:

   <option name="charting.tooltip.backgroundBrush">@myBrush</option>

However, if you would like to use a brush that’s the same as the custom brush defined above except it has an alpha transparency of 50%, you can clone it then modify the alpha property of the clone.

 
   <option name="charting.tooltip.backgroundBrush">#myBrush</option>
   <option name="charting.tooltip.backgroundBrush.alpha">0.5</option>

If you need to use either the ‘@’ or ‘#’ symbols as the first character of a string (like for an axis title), you can escape it with a second symbol:

 
   <option name="charting.axisTitleY.text">## Of Downloads</option>
   <option name="charting.axisTitleX.text">@@Foo</option>

• Was this topic useful?
• Post a comment