topic Re: Make charts clickable in Dashboards & Visualizations

Make charts clickable

gnovak — Tue, 13 Dec 2011 16:24:46 GMT

I have a question. I developed a dashboard in advanced XML that has 1 chart and 2 tables. For the most part 1 search is driving the chart and heatmap and at the bottom another search is making the table.

I have some issues:

None of these are clickable. What I mean by clickable is usually you can click on an area in the chart, or even click on something in the legend and have Splunk open a new window with a search. It just doesn't do this for either the chart or the tables.
For the 2 tables I have on the dashboard, the View Results link appears to have disappeared.
For the line chart I have at the top, when I click on a line in the chart or a username in the legend, it becomes "stuck" or that line is highlighted and I have no way to get it unstuck other then to reload the entire dashboard.

I'm not sure how to get the results i want at this point.

I've tried multiplie things such as adding height to the chart, adding flashchart to the tables, etc. I figured I'd throw it out here first.

Here's my dashboard code:

<view template="dashboard.html">
  <label>YNFS1 Space Usage</label>
  <module name="AccountBar" layoutPanel="navigationHeader"/>
  <module name="AppBar" layoutPanel="navigationHeader"/>

  <module name="Message" layoutPanel="messaging">
    <param name="filter">*</param>
    <param name="clearOnJobDispatch">False</param>
    <param name="maxSize">1</param>
  </module>

<module name="TimeRangePicker" layoutPanel="panel_row1_col1">
    <param name="searchWhenChanged">True</param>
    <param name="default">Last 7 days</param>
<module name="HiddenSavedSearch" layoutPanel="panel_row2_col1" group="YNFS1 Space Usage" autoRun="True">
        <param name="savedSearch">Andrew ynfs1 search</param>
        <module name="HiddenChartFormatter">
          <param name="charting.chart">line</param>
          <param name="chart.stackMode">none</param>
          <param name="secondaryAxisTitle.text">Space(GB)</param>
        <module name="ChartTypeFormatter">
        <module name="StackModeFormatter">
          <module name="JobProgressIndicator"></module>
            <module name="FlashChart">
              <param name="width">100%</param>
              <param name="height">400px</param>
             </module>
            </module>
          </module>
         </module>
          <module name="ViewRedirectorLink">
            <param name="viewTarget">flashtimeline</param>
            <param name="popup">True</param>      
          </module> 
      </module>
     <module name="HiddenSavedSearch" layoutPanel="panel_row3_col1" group="YNFS1 Space Usage Heat Map" autoRun="True">
       <param name="savedSearch">Andrew ynfs1 search</param>
       <module name="SimpleResultsTable">
       <param name="dataOverlayMode">heatmap</param>
       <module name="ViewRedirectorLink">
         <param name="viewTarget">flashtimeline</param>
         <param name="popup">True</param>
        </module>      
       </module> 
    </module>
  </module> 
<module name="HiddenSearch" layoutPanel="panel_row4_col1" group="YNFS1 Top 20 Space Users Last 24 Hours" autoRun="True">
     <param name="search">host="ynfs1" sourcetype=userdiskusage earliest=-1d | rex field=_raw "(?&lt;Space&gt;\d+)\s*\/home\/(?&lt;UserName&gt;\S+)" | search NOT UserName="shares" | eval SpaceGB = Space/1048576 | sort SpaceGB,UserName desc | head 20 | table UserName,SpaceGB</param>
     <module name="SimpleResultsTable">
        <param name="count">20</param> 
     <module name="ViewRedirectorLink">
         <param name="viewTarget">flashtimeline</param>
         <param name="popup">True</param>
        </module>      
       </module> 
    </module>
</view>

The Andrew ynfs1 search is below:

host="ynfs1" sourcetype=userdiskusage | rex field=_raw "(?<Space>\d+)\s*\/home\/(?<UserName>\S+)" | search NOT UserName="shares" | eval SpaceGB = Space/1048576| timechart Max(SpaceGB) span=1d by UserName where max in top20

Re: Make charts clickable

gnovak — Tue, 13 Dec 2011 16:25:24 GMT

I'm running splunk 4.2.1 btw

Re: Make charts clickable

jerrad — Tue, 13 Dec 2011 17:04:04 GMT

Is your intent to have the one chart show up and then you click a bar on that chart to drive the other panels? Or do you simply want all three panels to show up immediately?

I suspect you want to click something and have it move down to your child modules in some fashion, in which case you can't close off your tags until the end of the dashboard. If you have one panel which has a chart and you want a module below it to act on that click in some way you need to move your tag for the first chart to below the child or children modules.

In my case I am almost always drilling down from panel 1, to 2, to 3 etc in which case all of my tags are at the very end of my code before the last tag.

Re: Make charts clickable

gnovak — Tue, 13 Dec 2011 19:29:09 GMT

I tried this but it did nothing. If anything now the View Results link just disappeared from the Line Chart.

Re: Make charts clickable

gnovak — Tue, 13 Dec 2011 20:12:31 GMT

My intent is that each chart or table should have "view results". The last table is a totally different search. I have the ViewRedirector module in there, but nothing happens. Also the table at the bottom of the dashboard isn't even clickable. I can't click to view any of the results at all.

Re: Make charts clickable

gnovak — Tue, 13 Dec 2011 20:12:56 GMT

also i can't resize the table and looking at SimpleResultsTable I don't see anything in regards to resizing it. ?

Re: Make charts clickable

jerrad — Tue, 13 Dec 2011 20:59:42 GMT

I did a quick re-arrangement of your statements and noticed that the view results show up after you click some sort of clickable value on the charts.

It looks like the "ViewRedirectorLink" isn't being executed because it falls after the chart/simple results and until you interact with the chart/table it doesn't have a chance to move down to that next piece of code.

Here is a re-arrangement of the code that shows the view results for me albeit at the top left of the panel instead of the bottom left.

    <view template="dashboard.html">
  <label>YNFS1 Space Usage</label>
  <module name="AccountBar" layoutPanel="navigationHeader"/>
  <module name="AppBar" layoutPanel="navigationHeader"/>

  <module name="Message" layoutPanel="messaging">
    <param name="filter">*</param>
    <param name="clearOnJobDispatch">False</param>
    <param name="maxSize">1</param>
  </module>

<module name="TimeRangePicker" layoutPanel="panel_row1_col1">
    <param name="searchWhenChanged">True</param>
    <param name="default">Last 7 days</param>
<module name="HiddenSavedSearch" layoutPanel="panel_row2_col1" group="YNFS1 Space Usage" autoRun="True">
        <param name="savedSearch">sample_saved_search</param>
        <module name="HiddenChartFormatter">
          <param name="charting.chart">line</param>
          <param name="chart.stackMode">none</param>
          <param name="secondaryAxisTitle.text">Space(GB)</param>
        <module name="ChartTypeFormatter">
        <module name="StackModeFormatter">
          <module name="JobProgressIndicator"></module>
                   <module name="ViewRedirectorLink">
            <param name="viewTarget">flashtimeline</param>
            <param name="popup">True</param>
          </module>
            <module name="FlashChart">
              <param name="width">100%</param>
              <param name="height">400px</param>
             </module>
            </module>
          </module>
         </module>

      </module>
     <module name="HiddenSavedSearch" layoutPanel="panel_row3_col1" group="YNFS1 Space Usage Heat Map" autoRun="True">
       <param name="savedSearch">sample_saved_search</param>
              <module name="ViewRedirectorLink">
         <param name="viewTarget">flashtimeline</param>
         <param name="popup">True</param>
        </module>
       <module name="SimpleResultsTable">
       <param name="dataOverlayMode">heatmap</param>

       </module>
    </module>
  </module>
<module name="HiddenSearch" layoutPanel="panel_row4_col1" group="YNFS1 Top 20 Space Users Last 24 Hours" autoRun="True">
     <param name="search">host="ynfs1" sourcetype=userdiskusage earliest=-1d | rex field=_raw "(?&lt;Space&gt;\d+)\s*\/home\/(?&lt;UserName&gt;\S+)" | search NOT UserName="shares" | eval SpaceGB = Space/1048576 | sort SpaceGB,UserName desc | head 20 | table UserName,SpaceGB</param>
      <module name="ViewRedirectorLink">
         <param name="viewTarget">flashtimeline</param>
         <param name="popup">True</param>
        </module>
        <module name="SimpleResultsTable">
        <param name="count">20</param>

       </module>
    </module>
</view>

Re: Make charts clickable

jerrad — Tue, 13 Dec 2011 21:18:12 GMT

OK I think the key is to ensure you close off the "FlashChart" module before the ""ViewRedirectorLink" in the case of the first panel and close the "SimpleResultsTable" before the "ViewRedirectorLink" in the two other panels and that will bring the view results down to the bottom left.

Same concept holds true though it looks like the Chart and Simple Results modules were preventing the downstream ViewRedirectorLink from executing due to the tag being after the ViewRedirectorLink instead of before it.

Re: Make charts clickable

gnovak — Tue, 13 Dec 2011 21:45:25 GMT

That did work. Thanks as this was driving me crazy for a while!

Re: Make charts clickable

gnovak — Tue, 13 Dec 2011 21:53:17 GMT

However the one thing I still notice is that the main line chart still isn't clickable....

Re: Make charts clickable

gnovak — Tue, 13 Dec 2011 21:53:48 GMT

This isn't a huge problem as having the view results link does help with that, but was just wondering why I can't get it to be clickable...

Re: Make charts clickable

jerrad — Tue, 13 Dec 2011 22:22:04 GMT

What do you want to happen when you click the main line chart? Is the intent to launch a new window with the results just for that specific time, or do you want it to influence the time range for the child panels?