Resizing FlashChart dynamically using Pulldown and ResultsValueSetter

[greg]

I'm trying to solve a problem with dynamic resizing of a Bar FlashChart in runtime.

What I want to achieve is to resize the chart height depending on the result count:

ChartHeight = 20 *ResultCount

i.e. to stretch it accordingly (20px per bar) and make it look readable and nice.

Since the official documentation says one can only set the chart height in design time only in pixels or percentage:

<param name="height">300px</param>

and there's no auto-resizing option (and default 210px is not an option), I gonna give Sideview techniques a try (Hi Nick ;).

Here is the raw scheme of the view fragment:

Pulldown (where number of results is selected)  
  PostProcess (to calculate the chart height)  
    ResultsValueSetter (to extract calculated height and pass it downstream)  
      PostProcess (to fullfil the chart)  
        ValueSetter (to set chart property "height")  
          FlashChart (that should take property "height" from upstream)

The problem is that the FlashChart (native Splunk module) doesn't grab "height" property from upstream and remains unresized. If I insert HTML module for debug purpose before the chart, I can see the height is calculated correctly (e.g. 200px or 400px).

Did I miss something? Is there any way to pass this value to FlashChart?

--

Here is the code sample in Advanced XML:

<module name="Pulldown">
  <param name="name">TopCount</param>
  <param name="label">Top:</param>
  <param name="float">left</param>
  <param name="staticOptions">
    <list>
      <param name="value">10</param>
    </list>
    <list>
      <param name="value">20</param>
      <param name="selected">True</param>
    </list>
    <list>
      <param name="value">50</param>
    </list>
    <list>
      <param name="value">100</param>
    </list>
  </param>

  ...
  Main Search Here
  ...

    <module name="HTML" layoutPanel="panel_row4_col1">
      <param name="html"><![CDATA[<h3>Panel 4</h3>]]></param>
      <module name="PostProcess">
        <param name="search">
          $postProcess$ | eval ChartHeight = 20*$TopCount$ | eval ChartHeight = ChartHeight."px"
        </param>
        <module name="ResultsValueSetter">
          <param name="fields">ChartHeight</param>
          <module name="PostProcess">
            <param name="search">
              $postProcess$ |
              table Host, Duration
            </param>
            <module name="HiddenChartFormatter">
              <param name="charting.chart">bar</param>
              <module name="ValueSetter">
                <param name="name">height</param>
                <param name="value">$ChartHeight$</param>
                <module name="FlashChart"></module>
              </module>
            </module>
          </module>
        </module>
      </module>
    </module>

[sideview]

Well, since all the Sideview modules accept $foo$ arguments pretty much anywhere (and it took a while for the users to point out all the 'everywheres' to me. =), you come to take it for granted that you can just use $foo$ tokens for things. However FlashChart is not a Sideview module - it's a Splunk module. And actually very few of the Splunk modules do any kind of $foo$ substitution.

Which means an easy task for a technical user whose not necessarily a developer, becomes suddenly quite difficult.

This solution may still involve too much custom code for you, and it probably has at least one typo and at least one pitfall I'm not thinking of. But if you're willing, I think the easiest answer is probably to use a little bit of ResultsValueSetter and a little bit of CustomBehavior. (Ordinarily the answer here would be to patch the source code of the FlashChart, but yes this can be as perilous as it sounds. RVS can do some ofthe work for us).

If you just jam this weird looking block in as a sibling of your FlashChart,

<module name="PostProcess">
  <param name="search">| stats count as rowCount</param>
  <module name="ResultsValueSetter">
    <param name="fields">rowCount</param>
    <module name="CustomBehavior">
      <param name="customBehavior">resizeOurFlashChartAccordingToRowCount</param>
    </module>
  </module>
</module>

it will do a lot of the work for us, in that

a) whenever onContextChange fires on the CustomBehavior module, you'll know it's time to check and possibly resize the chart .
b) the customBehavior can just call context.get("rowCount") at any time and get the current rowCount, courtesy of the ResultsValueSetter.

And here's a napkin-sketch of the customBehavior.

Sideview.utils.declareCustomBehavior("resizeOurFlashChartAccordingToRowCount", function(customBehaviorModule) {
    customBehaviorModule.onContextChange = function() {
        var context = this.getContext();
        var rowCount = context.get("rowCount");
        //probably here it's two steps.  
        // using the id of the FlashChart, like "FlashChart_0_1_0"
        var flashChartModuleId = "FlashChart_0_1_0";
        $("#" + flashChartModuleId + " .FlashWrapperContainer").height(rowCount*20 + "px");

        // and then you probably have to reach into the FlashChart module 
        // itself just to call update, but that's a bit of a guess. 
        Sideview.utils.getModule(flashChartModuleId).update();
    }
});

good luck. It might be a bit of an adventure.

[greg]

Thank you again for the detailed response!
Frankly speaking, I thought it would a little bit easier for such a simple task 😉 something like we deal with Pager and SimpleResultsTable. And yes, I so get used to these $foo$ tokens that I can't even imagine how people live without them in advanced XML views!
Anyway, I'll give it a try, maybe not right now since this small resizing feature might take some effort to implement. Will get back here with the results later on!

[greg]

This guy was close, but he was satisfied with assigning "height" property in design-time:
http://splunk-base.splunk.com/answers/73544/using-sideview-utils-can-one-define-the-height-of-a-pane...
I want it to be fully dynamic in runtime.