Dashboards and Visualizations

 


Chart controls

Chart controls

This topic describes advanced behavior for viewing data in charts.

Pan and zoom chart controls

The pan and zoom feature allows you to highlight chart details and optionally view the details in a separate panel. Pan and zoom is available for the following charts:

Column
Line
Area

The following examples show how to access the pan and zoom charting features.

Pan and zoom behavior

The following dashboard shows a chart displaying source types over a seven day period. The Y-axis uses a logarithmic scale to provide a more meaningful graphic. The panel specifies the following search.

index=_internal | timechart count by sourcetype

The screen capture below shows a selection for the results for two days.

Viz PanAndZoomDrag.png


The resulting chart zooms in to the selection and now displays details of the selected area.

  • Use the left and right arrows along the X-axis to move the selection window earlier or later.
  • Click Reset Zoom to return to the original chart.

Viz PanAndZoomSelect.png

Zoom to another chart

You can specify pan and zoom behavior to display results in a separate chart. The following example uses the same base example illustrated above in Pan and zoom behavior. The leftmost chart lists all source types and also shows the selection for a single day. The rightmost chart lists only the splunk_web_access source type for the selected time range.

You can drag an edge of the time range in the leftmost chart to expand the time range. You can also move the selected time range to the left or right to specify an earlier or later time range.

The bottommost chart shows the values for the tokens that implement the pan and zoom behavior.

Viz PanZoomSelection.png

Implementation details

To display zoom results in a separate chart, first edit the base chart in simple XML. Use the <selection> element to set token values for the selection time range.

$start$
$end$

Defines the beginning and end of the selection time range.

$start.splunk_web_access$
$end.splunk_web_access$

Specifies a series value to capture for the selection time range.


<chart>
  <title>Pan and Zoom (All source types)</title>
  <searchString>
    index=_internal | timechart count by sourcetype
  </searchString>
  <earliestTime>-7d@h</earliestTime>
  <latestTime>now</latestTime>
  . . .
  <selection>
    <set token="selection.earliest">$start$</set>
    <set token="selection.latest">$end$</set>
    <set token="start.splunk_web_access">$start.splunk_web_access$</set>
    <set token="end.splunk_web_access">$end.splunk_web_access$</set>
  </selection>
  . . .
</chart>


In the target chart, use the $selection$ token to access the selection time range.

$selection.earliest$
$selection.latest$

Defines the time range for the target chart.

<chart>
  <title>Pan and Zoom (Web access source type)</title>
  <searchString>
    index=_internal sourcetype=splunk_web_access
    |  timechart count by sourcetype
  </searchString>
  <earliestTime>$selection.earliest$</earliestTime>
  <latestTime>$selection.latest$</latestTime>
  . . .
</chart>


The HTML panel shows the values captured by the $start$ and $selection$ tokens.

<html>
  <h3>Token values for the splunk_web_access selection</h3>        
  <table border="0" cellpadding="12" cellspacing="0">
  <tr>
    <td>
        <p><b>Time range (epoch time)</b></p>
        <p><b>$$selection.earliest$$</b>: $selection.earliest$
        <br /><b>$$selection.latest$$</b>: $selection.latest$</p>
    </td>
    <td>
        <p><b>Count at the begining and end of time range.</b></p>
        <p><b>$$start.count$$</b>: $start.splunk_web_access$
        <br /><b>$$end.count$$</b>: $end.splunk_web_access$</p>
    </td>
  </tr>
</table>      
</html>

Chart overlay

Use chart overlays to represent two different series on a single chart. You can highlight one series of search results as a line graph on top of a column chart, area chart, or another line chart.

When using overlays, you can specify the overlaid values on a single axis or dual axis. With single axis, you plot the overlaid value and the search results against the same Y-axis. For dual axis, you specify a second Y-axis to represent the overlaid values.

Chart overlay example (single axis)

This example shows the count of splunk_web_access source type events over a time chart on a weekly basis for one month. Overlaid on this chart is the weekly average count of these events.

OverlaySingle.png

Here is the search to create this chart:

index=_internal sourcetype=splunk_web_access | timechart span=1week count | eventstats avg(count) as average | eval average=round(average,0)

You can create the overlay using the Visualization Editor.

  1. From the dashboard, click Edit > Edit Panels.
  2. Add a panel specifying the following:

    • Content Title: Chart Overlay (Single Axis)
    • Search String: The search string listed above.
    • Time Range: 30 days.
  3. For the chart overlay panel, click the Edit Properties icon. Click Chart Overlay.
  4. Click in the Overlay field. Select average from the fields available for selection as an overlay.
  5. For View as Axis, click Off.
    This example does not specify a second Y-axis.
  6. Click Apply. Click Done.

Chart overlay example (dual axis)

This example overlays the event count of the splunk_web_access source type against the total for all source types. The chart plots the Web Access totals against a separate Y-axis.

OverlayDual.png

Here is the search to create this chart:

index=_internal sourcetype=* | timechart span=1week count as "All Sourcetypes" count(eval(sourcetype="splunk_web_access")) as "Web Access"

You can create the overlay using the Visualization Editor.

  1. From the dashboard, click Edit > Edit Panels.
  2. Add a panel specifying the following:

    • Content Title: Chart Overlay (Dual Axis)
    • Search String: The search string listed above.
    • Time Range: 30 days.
  3. For the chart overlay panel, click the Edit Properties icon. Click Chart Overlay.
  4. Click in the Overlay field. Select Web Access from the fields available for selection as an overlay.
  5. For View as Axis, click On to specify a second Y-axis.
  6. For Title, click Custom. Type Web Access in the adjacent text field to specify a title for the second axis..
  7. For Scale, click Inherit to inherit the selection for the scale from the first Y-axis.
  8. Click Apply. Click Done.

This documentation applies to the following versions of Splunk: 6.1 , 6.1.1 , 6.1.2 , 6.1.3 , 6.1.4 View the Article History for its revisions.


Comments

In the chart examples above you have the wrong span period : span=1week should be span=1d

Ffrig
May 15, 2014

You must be logged into splunk.com in order to post comments. Log in now.

Was this documentation topic helpful?

If you'd like to hear back from us, please provide your email address:

We'd love to hear what you think about this topic or the documentation as a whole. Feedback you enter here will be delivered to the documentation team.

Feedback submitted, thanks!