Turn on suggestions

Auto-suggest helps you quickly narrow down your search results by suggesting possible matches as you type.

Showing results for

Archive

Auto-suggest helps you quickly narrow down your search results by suggesting possible matches as you type.

Showing results for

- Subscribe to RSS Feed
- Mark Topic as New
- Mark Topic as Read
- Float this Topic for Current User
- Bookmark
- Subscribe
- Mute
- Printer Friendly Page

Highlighted

- Mark as New
- Bookmark
- Subscribe
- Mute
- Subscribe to RSS Feed
- Permalink
- Email to a Friend
- Report Inappropriate Content

Lucas_K

Motivator

11-14-2012
07:33 PM

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.

1 Solution

Highlighted
##

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

- Mark as New
- Bookmark
- Subscribe
- Mute
- Subscribe to RSS Feed
- Permalink
- Email to a Friend
- Report Inappropriate Content

Re: Combined chart types in a single chart display

Damien_Dallimor

Ultra Champion

11-15-2012
12:17 AM

Highlighted
##

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

- Mark as New
- Bookmark
- Subscribe
- Mute
- Subscribe to RSS Feed
- Permalink
- Email to a Friend
- Report Inappropriate Content

Re: Combined chart types in a single chart display

Lucas_K

Motivator

11-15-2012
01:52 PM

Highlighted
##

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

- Mark as New
- Bookmark
- Subscribe
- Mute
- Subscribe to RSS Feed
- Permalink
- Email to a Friend
- Report Inappropriate Content

Re: Combined chart types in a single chart display

Damien_Dallimor

Ultra Champion

11-15-2012
09:38 PM

Highlighted

- Mark as New
- Bookmark
- Subscribe
- Mute
- Subscribe to RSS Feed
- Permalink
- Email to a Friend
- Report Inappropriate Content

jonuwz

Influencer

11-15-2012
05:21 AM

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>
```

Highlighted
##

- Mark as New
- Bookmark
- Subscribe
- Mute
- Subscribe to RSS Feed
- Permalink
- Email to a Friend
- Report Inappropriate Content

Re: Combined chart types in a single chart display

Lucas_K

Motivator

11-15-2012
01:57 PM

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.