Dashboards & Visualizations
cancel
Turn on suggestions
Auto-suggest helps you quickly narrow down your search results by suggesting possible matches as you type.
Showing results for 
Search instead for 
Did you mean: 
Ask a Question
Solved! Jump to solution

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?

achitan
Explorer
‎02-17-2015 05:11 AM

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

Reply
1 Solution
Solved! Jump to solution
Solution

Raghav2384
Motivator
‎02-17-2015 05:53 AM 
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

Reply
Solved! Jump to solution
Solution

Raghav2384
Motivator
‎02-17-2015 05:53 AM 
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
Reply
Solved! Jump to solution

cherylheng9586
Loves-to-Learn Everything
‎06-17-2021 02:04 AM

Hello!

thank you for your syntax, it worked for me.

however, now when i zoom in on panel1, the zoom in does not happen. how should i edit the syntax such that the zoom in would still occur? i attach an image of my timechart here. I will need the zoom in to still happen because my data is collected at the millisecond level, and if i cant see a zoom-ed in version, my chart just looks like a block. hahaah

thank you so much nonetheless!!

 

cherylheng9586_0-1623920744974.png

 

0 Karma
Reply
Solved! Jump to solution

galbrilovich
Explorer
‎10-12-2020 06:12 AM

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
Reply
Solved! Jump to solution

achitan
Explorer
‎02-17-2015 06:46 AM

Thanks, Raghav

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

Thank you again, Adrian

0 Karma
Reply
Solved! Jump to solution

achitan
Explorer
‎02-17-2015 07:06 AM

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

Thanks!

Reply
Solved! Jump to solution

simona
Observer
‎08-07-2023 07:10 AM

How to make it work in Dashboard studio? Do you have an example for this ?

The solution works for Classic Dashboard but not for Dashboard studio 

Tags (1)
0 Karma
Reply
Solved! Jump to solution

Raghav2384
Motivator
‎02-17-2015 07:56 AM

Glad i was able to help 🙂

0 Karma
Reply
Get Updates on the Splunk Community!

Monitoring Postgres with OpenTelemetry

Behind every business-critical application, you’ll find databases. These behind-the-scenes stores power ...

Mastering Synthetic Browser Testing: Pro Tips to Keep Your Web App Running Smoothly

To start, if you're new to synthetic monitoring, I recommend exploring this synthetic monitoring overview. In ...

Splunk Edge Processor | Popular Use Cases to Get Started with Edge Processor

Splunk Edge Processor offers more efficient, flexible data transformation – helping you reduce noise, control ...