SVG Custom visualizations question

[bizsplunk]

Hi team,

Can you help with some questions concerning SVG Custom visualizations app https://splunkbase.splunk.com/app/3815/ ?
We have some dashboards based on the app. Result`s svg picture are built based on tokens and depends on it.
We faced the issue that while splunk search are running it updates tokens and there is no picture in this moment – only delay with “waiting for data” text.
Is there any way to solve this troubles to get picture static and let tokens put changes to exactly those svg parts which depends on tokens?

[msivill_splunk]

I was able to further simplify the shared example by taking out the CSS and Javascript references. Also the example doesn't create any SVG at all. From looking at the example I've guessed what you are trying to do an have produced a third working example of a token being passed in a dashboard.

<dashboard refresh="20">
   <label>Test Token 3</label>
   <row>
     <panel>
       <table>
         <search>
           <query>| makeresults | eval row1 = (random()%99)</query>
           <earliest>0</earliest>
           <latest></latest>
           <done>
             <set token="wertok">$result.row1$</set>
           </done>
         </search>
         <option name="drilldown">none</option>
         <option name="refresh.display">progressbar</option>
       </table>
     </panel>
     <panel>
       <title>$wertok$</title>
       <viz type="svg.svg">
         <search>
           <query>
<![CDATA[
| makeresults
| eval wertokev = $wertok$
| eval svg_viz_50_or_under = "<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 100 100' height='100' width='100'><rect x='5' y='5' width='90' height='90' stroke='blue' stroke-width='10' fill='white' /> <text dominant-baseline='central' text-anchor='middle' x='50' y='50' font-family='sans-serif' font-size='12' fill='blue'>Visualize this</text> </svg>"
| eval svg_viz_over_50 ="<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 100 100' height='100' width='100'><rect x='5' y='5' width='90' height='90' stroke='black' stroke-width='10' fill='white' /><text dominant-baseline='central' text-anchor='middle' x='50' y='50' font-family='sans-serif' font-size='12' fill='black'>Visualize that</text></svg>"
| eval svg_viz=if(wertokev>50, svg_viz_over_50, svg_viz_50_or_under )
]]>
</query>
         </search>
        <option name="drilldown">none</option>
        <option name="trellis.enabled">0</option>
        <option name="trellis.scales.shared">1</option>
        <option name="trellis.size">medium</option>
       </viz>
     </panel>
   </row>
 </dashboard>

I added a CDATA tag to the example so it is easier to read given all the special characters used - http://docs.splunk.com/Documentation/Splunk/7.1.1/Viz/OverviewofSimplifiedXML

Please remember to upvote answers that have been useful, in order to help other people trying to work out how to pass tokens to the SVG visualisation.

[bizsplunk]

hi team,
i reproduced your modified template, but issue still persists. There is delay with ""waiting data" between updates searches. possible to get rid of it?

https://screenshots.firefox.com/RGyHUiIrFcWVmltX/localhost

[msivill_splunk]

Hi, the original question implied it didn't change from "waiting data" ever. Is this now a different question? How to get rid of "waiting data" between search updates.

If so and the original question has been answered please upvote the relevant answer and ask a new question.

[bizsplunk]

original question is exactly about getting rid of "waiting for data" between updates:

We faced the issue that while splunk search are running it updates tokens and there is no picture in this moment – only delay with “waiting for data” text.
Is there any way to solve this troubles to get picture static and let tokens put changes to exactly those svg parts which depends on tokens?

[msivill_splunk]

I think this is a token specific thing not related to SVG unless you can create a simple example showing otherwise.

[msivill_splunk]

Another simple SVG example, this time without using a macro.

<form>
  <label>Test Token 2</label>
  <fieldset submitButton="false" autoRun="true">
    <input type="dropdown" token="circle_colour">
      <label>Circle Colour</label>
      <choice value="red">red</choice>
      <choice value="green">green</choice>
      <choice value="blue">blue</choice>
      <default>red</default>
      <initialValue>red</initialValue>
    </input>
  </fieldset>
  <row>
    <panel>
      <viz type="svg.svg">
        <search>
          <query>| makeresults 
| eval colour= "$circle_colour$"
| eval svg_viz = "<svg xmlns=\"http://www.w3.org/2000/svg\" viewBox=\"0 0 100 100\" width=\"100\" height=\"100\">
<circle cx=\"50\" cy=\"50\" r=\"40\" style=\"fill: ".colour.";\">
</svg>" 
| table svg_viz</query>
          <earliest>-1m</earliest>
          <latest>now</latest>
          <sampleRatio>1</sampleRatio>
        </search>
        <option name="drilldown">none</option>
      </viz>
    </panel>
  </row>
</form>

You do need to be careful with how you pass tokens around, in the above example I made sure there are quotes around the token (because it was text). By passing the tokens in as fields into the SVG field it makes it easier to test the SPL directly in "Search" by clicking on magnifying glass on the dashboard panel. Always check you can create the visualisation first (via passing in as field method) in "Search" before attempting to use on a dashboard panel.

[bizsplunk]

my example is on the refference. i did all steps and check for quotes and so on. issue is that there is "waiting for data" text between updating image after refresh dashboard and no pictire al all.

https://screenshots.firefox.com/8mTSak6OGhOa4T7E/localhost

[msivill_splunk]

When you do an eval on the token to create a new field don't combine it with anything else. In the screen shot you are passing wertok directly into an if statement. Create a new field per token in order to help with debugging.

Can you get this working directly in the "Search" tab by passing into the values as new fields?

There are now 2 simple examples on this splunk answer both of which work with tokens, the example you have provided is very detailed. As per first comment in order to progress we need to see a very simple example of the issue to progress. Can you create a simple example of a similar size to the ones on this answer showing the issue? Can you update the original question with the Simple dashboard XML?

[bizsplunk]

do you mean something like this : ... | eval wertokev = $wertok$ | eval wertokif = if(wertokev > 50,"my svg true", "my svg false") ?

[msivill_splunk]

Yep, this will help with debugging as when you run this from "Search" tab you can switch $wertok$ to an actual value to test the SVG. So removing token as potential issue as why SVG might not be rendering.

Also highly recommend stripping the example down to less that 40 lines and sharing the Simple Dashboard XML on this answer. There is alot going on in your dashboard and we need to reduce down other potential reasons why the SVG might not be rendering.

[bizsplunk]

<dashboard script="crosslogic.js" stylesheet="crosslogic.css" refresh="20">
  <label>svgticket</label>
  <row>
    <panel>
      <table>
        <search>
          <query>| makeresults | eval row1 = (random()%99)</query>
          <earliest>0</earliest>
          <latest></latest>
          <done>
            <set token="wertok">$result.row1$</set>
          </done>
        </search>
        <option name="drilldown">none</option>
        <option name="refresh.display">progressbar</option>
      </table>
    </panel>
    <panel>
      <title>$wertok$</title>
      <viz type="svg.svg">
        <search>
          <query>| makeresults
| eval wertokev = $wertok$ | eval werev=if(wertokev&gt;50,"my highlighted svg if true","my highlighted svg if false") | eval svg_viz="my svg visualization" |  table svg_viz</query>
          <earliest>0</earliest>
          <latest></latest>
        </search>
        <option name="drilldown">none</option>
        <option name="height">327</option>
        <option name="refresh.display">progressbar</option>
        <option name="svg.svg.debug">false</option>
        <option name="svg.svg.viewbox_height">250</option>
        <option name="svg.svg.viewbox_min_x">300</option>
        <option name="svg.svg.viewbox_min_y">50</option>
        <option name="svg.svg.viewbox_width">1000</option>
      </viz>
    </panel>
  </row>
</dashboard>

[bizsplunk]

i updated my search request, but there is still pause with "waiting for data" while updates.

[bizsplunk]

team, any updates?

[bizsplunk]

yes, it works for svg_viz_battery_bars_simple exactly, but i do via svg_viz request. and it still updates all image.

[msivill_splunk]

Below is simple dashboard example that allows a dropdown to be changed and the number of bars to be changed in the SVG image.

The example will run in the SVG app as it uses the SVG battery macro. In this example the token value is passed via a newly created field to the SVG.

<form>
  <label>Test Token</label>
  <fieldset submitButton="false" autoRun="true">
    <input type="dropdown" token="bar_count">
      <label>Bar Count</label>
      <choice value="0">0</choice>
      <choice value="1">1</choice>
      <choice value="2">2</choice>
      <choice value="3">3</choice>
      <choice value="4">4</choice>
      <choice value="5">5</choice>
      <default>3</default>
      <initialValue>3</initialValue>
    </input>
  </fieldset>
  <row>
    <panel>
      <viz type="svg.svg">
        <search>
          <query>| makeresults 
| eval bars=$bar_count$
| `svg_viz_battery_bars_simple(bars)`</query>
          <earliest>-1m</earliest>
          <latest>now</latest>
          <sampleRatio>1</sampleRatio>
        </search>
        <option name="drilldown">none</option>
      </viz>
    </panel>
  </row>
</form>

Hopefully this provides some pointers for you. Please share screenshots of your working example once you manage to get it working.

[bizsplunk]

yes, it works for svg_viz_battery_bars_simple exactly, but i do via svg_viz request. and it still updates all image.

[msivill_splunk]

Can you share a simple XML example of this issue? You are more likely to get a quicker response if people are able to change something that already exists.