Splunk Search

Combined chart types in a single chart display

Lucas_K
Motivator

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.

alt text

or this

alt text

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

Tags (1)
1 Solution

jonuwz
Influencer

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

multiaxis

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>

View solution in original post

jonuwz
Influencer

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

multiaxis

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
Motivator

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.

0 Karma

Damien_Dallimor
Ultra Champion

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
Ultra Champion

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

0 Karma

Lucas_K
Motivator

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

0 Karma
Get Updates on the Splunk Community!

Index This | I am a number, but when you add ‘G’ to me, I go away. What number am I?

March 2024 Edition Hayyy Splunk Education Enthusiasts and the Eternally Curious!  We’re back with another ...

What’s New in Splunk App for PCI Compliance 5.3.1?

The Splunk App for PCI Compliance allows customers to extend the power of their existing Splunk solution with ...

Extending Observability Content to Splunk Cloud

Register to join us !   In this Extending Observability Content to Splunk Cloud Tech Talk, you'll see how to ...