Dashboards & Visualizations

FieldColor Advanced XML Issue

Explorer

I'm using the search below to create a dataset that contains _time, daily average of response time, and then an SLA evaluation that is then bound to a color-coded set of variables. My issue is that my legend for the graph is now less than ideal. Instead of one over-arching series of 'Availability', I now have red/yellow/green, which is a bit messy given the intended audience of this dashboard. Is there any way to filter out certain items from a legend within the context of my end-goal of the search/graph?

Or is there a way to use rangemap in replacement of the eval/if statements below along with an advanced XML dashboard? My attempts at getting rangemap to work within the advanced dashboard have not gone well. It doesn't seem to be coloring the columns correctly.

In the chart config below, I obviously do switch the field colors to match red/yellow/green when I'm using that search block.

Eval Search:

    index=sla site="xx" |
    timechart span=1d sum(success) as success,count(success) as total, avg(responsetime) as "Response Time" |
    eval availability=round((success/total)*100,3) | eval red = if(availability<99.7,availability,0) |
    eval yellow = if(availability==99.7,availability,0) |
    eval green = if(availability>99.7,availability,0) |
    fields - success,total,availability

Rangemap Search:

    index=sla site="xx" |
    timechart span=1d sum(success) as success,count(success) as total, avg(responsetime) as "Response Time" |
    eval availability=round((success/total)*100,3) |
    rangemap field=availability low=99.71-100 high=99.7-99.7 severe=0-99.69 default=severe |
    fields - success,total

module name="HiddenChartFormatter"


param name="chart">column
param name="charting.chart.stackMode">stacked
param name="chartTitle">Site Report
param name="charting.axisLabelsX.minorUnit">P1D
param name="charting.axisLabelsX.majorUnit">P1D
param name="charting.axisX">time
param name="charting.chart.columnAlignment">.5
param name="charting.axisY">numeric
param name="charting.axisY.minimumNumber">99
param name="charting.axisY.maximumNumber">100
param name="charting.axisLabelsY.majorTickSize">12
param name="charting.axisLabelsY.integerUnits">false
param name="charting.axisLabelsY.scaleMajorUnit">false
param name="charting.axisTitleX.text">Day of Month
param name="charting.axisTitleX.placement">bottom
param name="charting.axisTitleY.text">Availability
param name="charting.axisTitleY.placement">left
param name="charting.fieldColors">{"low":0x72c72d, "high":0xe9da34, "severe":0xbb2121}
param name="charting.axisY2">numeric
param name="charting.axisY2.minimumNumber">150
param name="charting.axisY2.maximumNumber">400
param name="charting.axisTitleY2">#axisTitleY
param name="charting.axisTitleY2.text">Response Time (ms)
param name="charting.axisLabelsY2">#axisLabelsY
param name="charting.axisTitleY2.placement">right
param name="charting.axisLabelsY2.integerUnits">true
param name="charting.axisLabelsY2.scaleMajorUnit">true
param name="charting.axisLabelsY2.axis">@axisY2
param name="charting.axisLabelsY2.placement">right
param name="charting.data0">results
param name="charting.data0.jobID">@data.jobID
param name="charting.data1">view
param name="charting.data1.table">@data0
param name="charting.data1.columns">[0,2,3,4]
param name="charting.data2">view
param name="charting.data2.table">@data0
param name="charting.data2.columns">[0,1]
param name="charting.chart.data">@data1
param name="charting.chart2">line
param name="charting.chart2.axisY">@axisY2
param name="charting.chart2.data">@data2
param name="charting.layout.charts">[@chart,@chart2]
param name="charting.layout.axisTitles">[@axisTitleX,@axisTitleY,@axisTitleY2]
param name="charting.layout.axisLabels">[@axisLabelsX,@axisLabelsY,@axisLabelsY2]
param name="charting.legend.placement">bottom

module name="FlashChart" layoutPanel="panelrow2col1">
param name="height">300px
param name="enableResize">False

1 Solution

SplunkTrust
SplunkTrust

I think your best course of action is to turn off the legend entirely. That will turn off the unwanted red/yellow/green items in the legend, but of course it will keep the red/yellow/green coloring of the columns in the chart.

<param name="charting.legend.placement">none</param>

For the search side, your first search using eval and timechart looks like a good approach. Your second one using timechart and rangemap is headed in a weird direction. that will be giving you result rows that have three fields, "_time", "Response Time", and a third field called "range" that will have a value of either "low", "high" or "severe". While the FlashChart will graph the response-time numbers over time, it wont know what to make of this "range" field since it's not numerical, so it'll probably ignore it. (It has no way of knowing that your intention here is to color the lines/columns of the ResponseTime dataseries, using the colors specified in fieldColors, for the "range" field values)

Also that's a whole lot of advanced XML specifying pretty arcane charting keys that you don't seem to be using. I suspect it's been copied-and-pasted far from its original source so maybe a lot of that can be safely deleted.

View solution in original post

SplunkTrust
SplunkTrust

I think your best course of action is to turn off the legend entirely. That will turn off the unwanted red/yellow/green items in the legend, but of course it will keep the red/yellow/green coloring of the columns in the chart.

<param name="charting.legend.placement">none</param>

For the search side, your first search using eval and timechart looks like a good approach. Your second one using timechart and rangemap is headed in a weird direction. that will be giving you result rows that have three fields, "_time", "Response Time", and a third field called "range" that will have a value of either "low", "high" or "severe". While the FlashChart will graph the response-time numbers over time, it wont know what to make of this "range" field since it's not numerical, so it'll probably ignore it. (It has no way of knowing that your intention here is to color the lines/columns of the ResponseTime dataseries, using the colors specified in fieldColors, for the "range" field values)

Also that's a whole lot of advanced XML specifying pretty arcane charting keys that you don't seem to be using. I suspect it's been copied-and-pasted far from its original source so maybe a lot of that can be safely deleted.

View solution in original post

Explorer

Hah. I do believe you're right on that front...the light is becoming hard to see. Ultimately, I think I'll go with removing the legend to keep the aesthetics and either leave it as-is or add a hand-made legend of some sort that will cover what I need it to. Appreciate the comments!

0 Karma

SplunkTrust
SplunkTrust

There are some complex ways to superimpose other data series from entirely different search results into a chart, and it's possible such an approach could effectively draw horizontal lines that denote your thresholds, but allowing you to keep the main response time chart rendering as a column chart. Just a thought. The charting system is crazy deep and judging by your charting config maybe you've already gone down the rabbithole a bit yourself. 😃

0 Karma

Explorer

Thanks. I'm probably a fan of removing the legend, but that's not my call (unless I can't find a solution of course)! The fields do seem to be a bit much, but for the most part I've had to add/tweak each one while getting the graph to where I want. I started off with your utilities and then based on feedback from above, began tweaking.

You're right about the rangemap, I'd love for it to work how I picture it in my head, but reality is exactly what you said.

I think I'm ultimately going to have to either forgo the coloring and tackle this differently, or pull the legend. Thanks for commenting

0 Karma