Dashboards & Visualizations

Is there a way to zoom in inside a panel and then all other panels in the dashboard automatically zoom in to the same period/search conditions?

Explorer

Hi guys (splunk 6.2.1),

So I have a dashboard that contains 1 table and 2 bar plots (both having _time as the X-axis). Also there are 2 dropdown inputs and one time input for data filtering in there. Would it be possible to zoom-in in one of the plots and then make the other plot also zoom in on the same period?

Or even better, would it be possible that the time input change to reflect the zoomed period? (that will automatically make the entire dashboard zoom in on the period)

If you need more information please don't hesitate to ask.

Cheers and thank you very much in advance,
Adrian

1 Solution

Motivator
There's an example in 6.x dashboard examples app. Example Name: **Pan and Zoom Chart Controls**

    <panel>
          <chart>
            <title>Use Pan and Zoom to Select Time Ranges Used By Other Visualizations</title>
            <searchString>index=_internal | timechart count</searchString>
            <earliestTime>-4h@h</earliestTime>
            <latestTime>now</latestTime>
            <option name="charting.chart">line</option>
            <option name="charting.legend.placement">none</option>
            <option name="charting.legend.masterLegend">null</option>
            <option name="charting.seriesColors">[0x1D2F3E]</option>
            <option name="height">150px</option>
            <option name="charting.axisTitleX.visibility">collapsed</option>
            <option name="charting.axisTitleY.visibility">collapsed</option>
            <option name="charting.axisTitleY2.visibility">visible</option>
            <selection>
              <set token="selection.earliest">$start$</set>
              <set token="selection.latest">$end$</set>
              <set token="start.count">$start.count$</set>
              <set token="end.count">$end.count$</set>
            </selection>
          </chart>
          <html>
            <p>Token Values:</p>
            <code>New Selected Time Range: $selection.earliest$ - $selection.latest$</code>


            <code>Count Value Range: $start.count$ - $end.count$</code>
          </html>
          <chart>
            <searchString>index=_internal | top sourcetype</searchString>
            <earliestTime>$selection.earliest$</earliestTime>
            <latestTime>$selection.latest$</latestTime>
            <option name="charting.chart">bar</option>
            <option name="charting.legend.placement">none</option>
            <option name="charting.legend.masterLegend">null</option>
            <option name="charting.seriesColors">[0xC9E1C1]</option>
            <option name="height">250px</option>
          </chart>
        </panel>

Create tokens and refer them in your second bar chart. That should apply the range for the dependent as well. Hope this helps!

Thanks,
Raghav

View solution in original post

Motivator
There's an example in 6.x dashboard examples app. Example Name: **Pan and Zoom Chart Controls**

    <panel>
          <chart>
            <title>Use Pan and Zoom to Select Time Ranges Used By Other Visualizations</title>
            <searchString>index=_internal | timechart count</searchString>
            <earliestTime>-4h@h</earliestTime>
            <latestTime>now</latestTime>
            <option name="charting.chart">line</option>
            <option name="charting.legend.placement">none</option>
            <option name="charting.legend.masterLegend">null</option>
            <option name="charting.seriesColors">[0x1D2F3E]</option>
            <option name="height">150px</option>
            <option name="charting.axisTitleX.visibility">collapsed</option>
            <option name="charting.axisTitleY.visibility">collapsed</option>
            <option name="charting.axisTitleY2.visibility">visible</option>
            <selection>
              <set token="selection.earliest">$start$</set>
              <set token="selection.latest">$end$</set>
              <set token="start.count">$start.count$</set>
              <set token="end.count">$end.count$</set>
            </selection>
          </chart>
          <html>
            <p>Token Values:</p>
            <code>New Selected Time Range: $selection.earliest$ - $selection.latest$</code>


            <code>Count Value Range: $start.count$ - $end.count$</code>
          </html>
          <chart>
            <searchString>index=_internal | top sourcetype</searchString>
            <earliestTime>$selection.earliest$</earliestTime>
            <latestTime>$selection.latest$</latestTime>
            <option name="charting.chart">bar</option>
            <option name="charting.legend.placement">none</option>
            <option name="charting.legend.masterLegend">null</option>
            <option name="charting.seriesColors">[0xC9E1C1]</option>
            <option name="height">250px</option>
          </chart>
        </panel>

Create tokens and refer them in your second bar chart. That should apply the range for the dependent as well. Hope this helps!

Thanks,
Raghav

View solution in original post

Explorer

Hi, i have a porblem with this solution. 
it changes the time range of the second panel when i do zoom on the first panel, but the time range of the first panel doesnt change.
how can i do that?

0 Karma

Explorer

Thanks, Raghav

I got it :D. Didn't know about the selection object.

Thank you again, Adrian

0 Karma

Explorer

Just finished the implementation, works like a charm :D.

Thanks!

Motivator

Glad i was able to help 🙂

0 Karma