All Apps and Add-ons

Sideview Utils: How to create a timechart with the zoom capability?

lyndac
Contributor

I am new to using Sideview Utils to build my dashboards, but I am liking it so far! One thing I'm missing though is how to make a timechart that provides the zoom capability. Using the following XML, I get a line chart with time as the x-axis, but it's not a "timechart" in that I cannot zoom. How do I get the timechart functionality?

<module name="Search" autoRun="True>
  <param name="search">index=foo  proc=$proc$ | timechart span=1h sum(length) as MB</param>
  <module name="JobProgressIndicator" layoutPanel="panel_row3_col1"/>
  <module name="HiddenChartFormatter">
      <param name="chart">line</param>
      <param name="charting.chart">line</param>
      <param name="chart.nullValueMode">connect</param>
      <module name="FlashChart" layoutPanel="panel_row3_col1" />
  </module>
</module>
1 Solution

sideview
SplunkTrust
SplunkTrust

by zoom functionality I'm assuming you mean how you can click-and-drag on a chart in Splunk's Search view and it will instantly zoom the visualization in on just that subset of the bars/points/lines etc.

Since the Sideview XML uses a different charting framework, I'm afraid this isn't possible. Sorry!

What maybe will be a kind of consolation prize, is how easy it is to do drilldowns. Here's an example where the main chart has a 12-hour granularity, but clicking on the points will make a second chart show a 15-minute granularity timechart of the 12-hour period that the user clicked.

<module name="Search" autoRun="True>
  <param name="search">index=foo  proc=$proc$ | timechart span=12h sum(length) as MB</param>

  <module name="JobProgressIndicator" layoutPanel="panel_row3_col1"/>

  <module name="HiddenChartFormatter">
    <param name="chart">line</param>
    <param name="charting.chart">line</param>
    <param name="chart.nullValueMode">connect</param>

    <module name="FlashChart" layoutPanel="panel_row3_col1">

      <module name="Search">
        <param name="search">index=foo  proc=$proc$ | timechart span=15min sum(length) as MB</param>

        <module name="JobProgressIndicator"/>

        <module name="FlashChart" />
      </module>
    </module>
  </module>
</module>

The reason why nothing seems to be passed to the second FlashChart is because the framework handles time arguments completely automatically. It picks up that you've clicked on a timechart and the data passed to the second search and thus the second chart, already has had it's timerange modified to represent the clicked upon range.

Another note, this could be reworked to use a base search and two postprocesses such that you wouldn't have to redispatch the search but here I've avoided that complexity and just let the drilldown have its own second search.

View solution in original post

sideview
SplunkTrust
SplunkTrust

by zoom functionality I'm assuming you mean how you can click-and-drag on a chart in Splunk's Search view and it will instantly zoom the visualization in on just that subset of the bars/points/lines etc.

Since the Sideview XML uses a different charting framework, I'm afraid this isn't possible. Sorry!

What maybe will be a kind of consolation prize, is how easy it is to do drilldowns. Here's an example where the main chart has a 12-hour granularity, but clicking on the points will make a second chart show a 15-minute granularity timechart of the 12-hour period that the user clicked.

<module name="Search" autoRun="True>
  <param name="search">index=foo  proc=$proc$ | timechart span=12h sum(length) as MB</param>

  <module name="JobProgressIndicator" layoutPanel="panel_row3_col1"/>

  <module name="HiddenChartFormatter">
    <param name="chart">line</param>
    <param name="charting.chart">line</param>
    <param name="chart.nullValueMode">connect</param>

    <module name="FlashChart" layoutPanel="panel_row3_col1">

      <module name="Search">
        <param name="search">index=foo  proc=$proc$ | timechart span=15min sum(length) as MB</param>

        <module name="JobProgressIndicator"/>

        <module name="FlashChart" />
      </module>
    </module>
  </module>
</module>

The reason why nothing seems to be passed to the second FlashChart is because the framework handles time arguments completely automatically. It picks up that you've clicked on a timechart and the data passed to the second search and thus the second chart, already has had it's timerange modified to represent the clicked upon range.

Another note, this could be reworked to use a base search and two postprocesses such that you wouldn't have to redispatch the search but here I've avoided that complexity and just let the drilldown have its own second search.

Get Updates on the Splunk Community!

Index This | Why did the turkey cross the road?

November 2025 Edition  Hayyy Splunk Education Enthusiasts and the Eternally Curious!   We’re back with this ...

Enter the Agentic Era with Splunk AI Assistant for SPL 1.4

  &#x1f680; Your data just got a serious AI upgrade — are you ready? Say hello to the Agentic Era with the ...

Feel the Splunk Love: Real Stories from Real Customers

Hello Splunk Community,    What’s the best part of hearing how our customers use Splunk? Easy: the positive ...