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.

Got questions? Get answers!

Join the Splunk Community Slack to learn, troubleshoot, and make connections with fellow Splunk practitioners in real time!

Meet up IRL or virtually!

Join Splunk User Groups to connect and learn in-person by region or remotely by topic or industry.

Get Updates on the Splunk Community!

Agent Mode Engaged! Enchaining Agentic Operations with Splunk AI Assistant 2.0

    Are you ready to transform how your team handles complex data requests? We invite you to our upcoming ...

Announcing Modern Navigation: A New Era of Splunk User Experience

We are excited to introduce the Modern Navigation feature in the Splunk Platform, available to both cloud and ...

Modernize your Splunk Apps – Introducing Python 3.13 in Splunk

We are excited to announce that the upcoming releases of Splunk Enterprise 10.2.x and Splunk Cloud Platform ...