Combined chart types in a single chart display

[Lucas_K]

I did not think that different chart types (bar/line) can be used in the same graphs in splunk, even with advanced xml, but I would like to be proven wrong. I don't think i've seen an example of this.

A client has asked for the replication of the following graphs.

or this

The red and yellow data are statistical trend calculations against the actual green events.

[jonuwz · Accepted solution]

This is totally doable with flash charts, but not necessarily for the faint of heart.

Relavant code :

<module name="HiddenChartFormatter">
          <param name="charting.chart2.useAbsoluteSpacing">True</param>
          <param name="charting.chart2">column</param>
          <param name="charting.axisLabelsY2">#axisLabelsY</param>
          <param name="charting.chart2.columnAlignment">.5</param>
          <param name="charting.transparentBrushPalette.colorPalette">#myColorPalette</param>
          <param name="charting.chart2.columnSpacing">20</param>
          <param name="charting.chart.data">@data1</param>
          <param name="charting.axisY2">#axisY</param>
          <param name="charting.axisTitleY.text">Interesting things</param>
          <param name="charting.data2.columns">[0,3,4,5,6,7,8]</param>
          <param name="charting.data2.table">@data</param>
          <param name="charting.data1.table">@data</param>
          <param name="charting.axisTitleY2.text">BLAHBLAHBLAH</param>
          <param name="charting.transparentBrushPalette.alpha">0.7</param>
          <param name="charting.chart.nullValueMode">zero</param>
          <param name="charting.axisLabelsY2.majorLabelVisibility">hide</param>
          <param name="charting.axisLabelsY2.axis">@axisY2</param>
          <param name="charting.transparentBrushPalette">solidFill</param>
          <param name="charting.axisTitleY2">axisTitle</param>
          <param name="charting.chart2.stackMode">stacked100</param>
          <param name="charting.chart2.axisY">@axisY2</param>
          <param name="charting.chart2.columnBrushPalette">@transparentBrushPalette</param>
          <param name="charting.data1">view</param>
          <param name="charting.data2">view</param>
          <param name="charting.legend.masterLegend">woohoo</param>
          <param name="charting.axisLabelsY2.placement">right</param>
          <param name="charting.data1.columns">[0,1,2]</param>
          <param name="charting.chart">line</param>
          <param name="charting.myColorPalette.colors">[0x956E96,0x6CB8CA,0x9AC23C,0xFAC61D,0xF7912C,0xD85E3D,0x5479AF,0x999755]</param>
          <param name="charting.layout.axisLabels">[@axisLabelsX,@axisLabelsY2,@axisLabelsY]</param>
          <param name="charting.axisLabelsY.placement">left</param>
          <param name="charting.myColorPalette">list</param>
          <param name="charting.layout.charts">[@chart2,@chart]</param>
          <param name="charting.layout.axisTitles">[@axisTitleX,@axisTitleY2,@axisTitleY]</param>
          <param name="charting.chart2.data">@data2</param>
          <module name="FlashChart">
            <param name="enableResize">False</param>
            <param name="height">300px</param>
          </module>
        </module>

The data passed in has 9 columns, 1 is the time, 6 make up the 1st Yaxis (the columns) and the other 2 make up the line plots.

Everything you need is here. Read it, then read it again : )

A painful gotcha :

When you replicate an axis, modifications made to the original axis after you've duplicated it also affect the replica (true as of 4.3.4)

So set your attibutes for the original Y axis, duplicate, then modify the replica.

Explanation of @data

We define charting.data1 is a "view" of data, and we should use the raw results from the search (@data)

<param name="charting.data1">view</param>
<param name="charting.data1.table">@data</param>

Then we say we're only interested in colums 0, 1 and 2

<param name="charting.data1.columns">[0,1,2]</param>

Then we say that charting.chart (the 1st graph) should use the data defined in charting.data1

<param name="charting.chart.data">@data1</param>

Repeat for the 2nd graph

<param name="charting.data2">view</param>
<param name="charting.data2.table">@data</param>
<param name="charting.data2.columns">[0,3,4,5,6,7,8]</param>
<param name="charting.chart2.data">@data2</param>

[Lucas_K]

Amazing! That's exactly what I was after.

These sort of excellent code examples need to exist inside the official documentation itself as its not entirely obvious of how many of the parameters are actually used.

I'm not sure exactly what the @data is actually doing (so i'll re-read that doco several times and see if I can figure it out 😉 but I think its some sort of pointer to the existing search dataset ).

Hopefully the jschart features catches up to what flash is capable of but this should hopefully do in the mean time.

Thank you very much for this answer.

[Damien_Dallimor]

You could achieve this using the Splunk Javascript SDK (which is also bundled in Splunk 5.0) and a charting library such as Google Charts, which has a Combo Chart component

[Damien_Dallimor]

It's good to know about all the options 🙂 Using the Javascript SDK you have access to all manner of visualization potential , https://github.com/mbostock/d3/wiki/Gallery

[Lucas_K]

Thanks for that link. I was trying to avoid using anything that was outside of the normal xml/advanced xml methods.