Dashboard to display varied graph types on a single timeline with tool tip pointer

[pavanml]

I have multiple logs from a single application that has different index, source type and log types. And i am trying to display 3 of these logs on a single page view as a dashboard. All the 3 graphs have the same X-axis (i.e.) timeline, but the Y-axis varies as error count, # of requests, % utilization, etc.

The ask
While i am able to display these 3 logs as graphs on a single page using available Splunk functions, the ask is to capture the 'point-in-time' values across these 3 graphs as a tool tip display on whichever graphs the mouse points to! (i.e.) when i point to 2:20:21 PM in the graph for error count, the tool tip should display the #of error counts, # of requests, % utilization at 2:20:21 PM. How do i go about it? I am flexible to have this displayed as a small pane on the page, if the tool tip is too complicated.

I have tried so far researching the available examples, but found none.

Any help will be appreciated.

[niketn · Accepted solution]

@pavanml, you can use image sharing site like imgur and upload using image button.

In case you need multiple series values to be highlighted you can try out one of the following two options:

1) Series Compare option added in Splunk Entperise 7 (Refer to Splunk 7.0 Overview App on Splunkbase)

2) Use of Horizon Chart Custom Visualization from Splunkbase with multiple lanes and bands and single hover line

Following is the run anywhere dashboard code :
PS: 1st panel required Splunk Enterprise 7 and 2nd panel requires Horizon Chart Custom Visualization

<dashboard>
  <label>Mutiple Series Tooltip</label>
  <row>
    <panel>
      <title>Option 1 : Splunk 7 Multiple Series Compare</title>
      <chart>
        <search>
          <query>index="_internal" sourcetype="splunkd" log_level!="INFO" earliest="-1d@d" latest="-0d@d"
| timechart span=1h count by log_level</query>
          <earliest>-24h@h</earliest>
          <latest>now</latest>
          <sampleRatio>1</sampleRatio>
        </search>
        <option name="charting.axisLabelsX.majorLabelStyle.overflowMode">ellipsisNone</option>
        <option name="charting.axisLabelsX.majorLabelStyle.rotation">0</option>
        <option name="charting.axisTitleX.visibility">visible</option>
        <option name="charting.axisTitleY.visibility">visible</option>
        <option name="charting.axisTitleY2.visibility">visible</option>
        <option name="charting.axisX.abbreviation">none</option>
        <option name="charting.axisX.scale">linear</option>
        <option name="charting.axisY.abbreviation">none</option>
        <option name="charting.axisY.scale">linear</option>
        <option name="charting.axisY2.abbreviation">none</option>
        <option name="charting.axisY2.enabled">1</option>
        <option name="charting.axisY2.scale">inherit</option>
        <option name="charting.chart">line</option>
        <option name="charting.chart.bubbleMaximumSize">50</option>
        <option name="charting.chart.bubbleMinimumSize">10</option>
        <option name="charting.chart.bubbleSizeBy">area</option>
        <option name="charting.chart.nullValueMode">gaps</option>
        <option name="charting.chart.overlayFields">WARN</option>
        <option name="charting.chart.showDataLabels">none</option>
        <option name="charting.chart.sliceCollapsingThreshold">0.01</option>
        <option name="charting.chart.stackMode">default</option>
        <option name="charting.chart.style">shiny</option>
        <option name="charting.drilldown">none</option>
        <option name="charting.layout.splitSeries">0</option>
        <option name="charting.layout.splitSeries.allowIndependentYRanges">0</option>
        <option name="charting.legend.labelStyle.overflowMode">ellipsisMiddle</option>
        <option name="charting.legend.mode">seriesCompare</option>
        <option name="charting.legend.placement">right</option>
        <option name="charting.lineWidth">2</option>
        <option name="refresh.display">progressbar</option>
        <option name="trellis.enabled">0</option>
        <option name="trellis.scales.shared">1</option>
        <option name="trellis.size">medium</option>
      </chart>
    </panel>
  </row>
  <row>
    <panel>
      <title>Option 2 : Horizon Chart Custom Visualization</title>
      <viz type="horizon_chart_app.horizon_chart">
        <search>
          <query>index="_internal" sourcetype="splunkd" log_level!="INFO" earliest="-1d@d" latest="-0d@d"
| timechart span=1h count by log_level</query>
          <earliest>-60m@m</earliest>
          <latest>now</latest>
          <sampleRatio>1</sampleRatio>
        </search>
        <option name="drilldown">none</option>
        <option name="horizon_chart_app.horizon_chart.negativeColor">#d93f3c</option>
        <option name="horizon_chart_app.horizon_chart.numBands">9</option>
        <option name="horizon_chart_app.horizon_chart.positiveColor">#6db7c6</option>
        <option name="horizon_chart_app.horizon_chart.relative">false</option>
        <option name="horizon_chart_app.horizon_chart.showChangeInPercent">false</option>
        <option name="horizon_chart_app.horizon_chart.smoothen">false</option>
        <option name="refresh.display">progressbar</option>
        <option name="trellis.enabled">0</option>
        <option name="trellis.scales.shared">1</option>
        <option name="trellis.size">medium</option>
        <option name="height">200</option>
      </viz>
    </panel>
  </row>
</dashboard>

[pavanml]

Thank you. The requirement I have is:
-> In the example above you have the graph for below query (Let me call it Chart 1 - Splunk 7 Multiple Series Compare)
index="_internal" sourcetype="splunkd" log_level!="INFO" earliest="-1d@d" latest="-0d@d"
| timechart span=1h count by log_level

Say in the same dashboard there are two other graphs based on different queries:
-> App Server - Log
index="app_serv_index" sourcetype="app_serv001" earliest="-1d@d" latest="-0d@d" | timechart span=1h count by hits

-> DB Server - Log
index="db_serv_index" sourcetype="db_serv002" earliest="-1d@d" latest="-0d@d" | timechart span=1h requests

Now if I point the mouse at a specific time in the graph of "DB Server - Log" graph; how do I show the values for below other two graphs at the same time ?
- Chart 1 - Splunk 7 Multiple Series Compare List item
- DB Server - Log

[pavanml]

Hi.. I was able to achieve it using Multiseries tooltip option 1 with series compare with timechart by sourcetypes. When I scroll over the timeline, it definitely shows the dots on all the graphs at the same time, but how does it show what is the value at each of those dots it puts in on that vertical time line ? Cause I only see dots, can understand the trend but how to see exact value for each of the dots on the vertical time line ?

[niketn]

@pavanml, the exact value is displayed next to the legends in Option 1. The tool tip just displays the selected time.

If you want the values to be displayed in vertical timeline, you would need to use Option 2 with Horizon Chart.

In the example you can see that Warning count is 30313 and Error count is 48 for both options.

[p_gurav]

Hi Pavanml,

I think you require swim lane kind of visualisation. Tell me if I consider your requirement wrong.

This link may helpful to you:
https://answers.splunk.com/answers/233449/xml-or-search-examples-of-swim-lane-chart.html

[niketn]

@pavanml, can you add a mock screenshot of what is required?

[pavanml]

I am not able to attach the screenshot; but let me again explain what I am trying to ask:
Say I have 3 graphs in a dashboard:
1. DB Request count over time (timechart) - This is from DB log file uploaded with a different source type and index type and graph populated with its own query.
2. IIS Request count over time (timechart) - This is from webserver log file uploaded with a different source type and index type and graph populated with its own query.
3. Application server hits (timechart) - This is from application server log file uploaded with a different source type and index type and graph populated with its own query.

All 3 graphs have X axis as time and Y axis as some kind of count based on their own log, source, index.

Requirement:
Say on graph 3 (Application server hits) I point my mouse at a specific point in time on this graph, there should be a tooltip shown which shows values at that time from all 3 graphs. Eg. If I point my mouse on Application server hits graph at 12/29/2017 2:10 PM to see the value of Application server hits as 100021 then the tooltip there should show:
_time - 12/29/2017 2:10 PM
DB request count = 1
IIS request count = 40
App server hit = 100021

Similarly say on graph 1 (DB request count) I point my mouse at a specific point in time on this graph, there should be a tooltip shown which shows values at that time from all 3 graphs. Eg. If I point my mouse on DB request count graph at 12/29/2017 5:30 PM to see the value of DB request count as 7 then the tooltip there should show:
_time - 12/29/2017 2:10 PM
DB request count = 7
IIS request count = 35
App server hit = 54998

So moving the mouse around any of these 3 graphs populated should read the time value in that graph and be able to pull the value at that specific time from all the 3 graphs at that time and display as a tooltip.

If this is not feasible then atleast a vertical line should be shown from top to bottom running across all the 3 graphs at that same time, so we can see all 3 values at that time from all graphs at the time.