Dynamic svg rendering

[vinzent]

Hi,

I'm using Splunk SVG application. Great feature.
I'm ok to render a simple svg object and print metrics above/in/below it.
Now I would like to create dynamic SVG objects.

My query :

index=rswaf type_=Controller_Business_Log_SecurityLog events{}.tokens.eventType=security
| rename context.applianceName as app
| stats count by app
| table app, count
| eval svg_viz = " Svg Vector Icons : http://www.onlinewebfonts.com/icon

".app." ".count." "
| table svg_viz

This query generates two svg objects.
Here is the result, troncated in order to show the most interesting part :

In green, we can see the two SVG objects were created with the two expected sets of data (WAF11 with 111 event count and WAF12 with 2 event count).
But these two SVG objects have the same position and coordinates (in red).
As a result, I can only see one SVG in graphic mode.

How to proceed in order to have two SVG object printed beside each other like this ?

Many thanks for your precious help !

[vinzent]

Thanks msivill.
Very clean to me now.
I made tremendous progress in working with svg with your help.

Vince

[msivill_splunk · Accepted solution]

I was able to create the following with the Scalable Vector Graphics - Custom Visualization app in Trellis layout for consideration.

Example SPL -

| makeresults count=4
| streamstats count 
| eval name = CASE (count==1, "WAF06", count==2, "WAF09", count==3, "WAF42", count==4, "WAF99")
| eval count = random()%10000
| stats sum(count) as count by name 
| eval svg_viz = "<svg version=\"1.1\" xmlns=\"http://www.w3.org/2000/svg\" viewBox=\"0 0 1000 1000\">
<g><g transform=\"translate(0.000000,511.000000) scale(0.100000,-0.100000)\"><path d=\"M6176.2,4322.5c-23.7-9.9-51.4-39.6-61.3-63.3c-9.9-25.7-21.7-298.7-29.7-609.2c-5.9-310.5-17.8-619.1-23.7-686.3l-11.9-124.6l-2927.4-4L195,2829.2l-47.5-55.4l-47.5-55.4V-208.9c0-3121.2-4-3016.3,89-3052c17.8-5.9,1119.5-11.9,2444.7-11.9h2413.1l134.5-114.7c379.8-328.3,743.7-518.2,1222.4-638.9c694.2-176,1432-96.9,2068.9,221.5c269,134.5,464.8,273,688.3,486.6c379.8,367.9,611.2,785.2,712.1,1291.6c45.5,221.5,31.7,751.6-27.7,1087.9c-104.8,595.4-344.2,1263.9-652.7,1819.7c-112.7,203.7-162.2,243.3-265,205.7c-61.3-21.8-73.2-41.5-174.1-308.6c-73.2-193.8-257.1-498.4-356-589.4l-55.4-49.4l11.9,59.3c49.5,237.4,94.9,526.1,112.8,700.2c67.3,678.4-55.4,1309.4-348.1,1776.2c-417.4,666.6-1032.5,1252-1661.5,1580.4C6285,4344.3,6253.4,4352.2,6176.2,4322.5z M6621.3,3794.4c632.9-419.3,1256-1161,1428.1-1703c185.9-581.5,156.3-1323.3-87-2142.1c-73.2-249.2-73.2-310.5,7.9-352.1c63.3-35.6,118.7-25.7,241.3,39.6c259.1,138.5,508.3,403.5,702.2,749.6l100.9,178l75.2-164.2c419.3-915.8,591.4-1809.8,466.8-2417c-185.9-900-985-1600.2-2009.6-1760.4c-298.7-47.5-727.9-31.6-1018.6,37.6C5571-3514,4886.6-2853.4,4706.6-1977.2c-13.8,65.3-23.7,229.4-23.7,365.9c4,559.8,158.2,971.2,718,1898.8c575.6,955.3,749.6,1354.9,878.2,2027.4c73.2,383.7,130.5,987,130.5,1400.4c0,166.2,5.9,211.6,25.7,199.8C6447.2,3907.2,6532.3,3851.8,6621.3,3794.4z M3482.3,1711.7v-811H1949.4H416.5v811v810.9h1532.9h1532.9V1711.7z M5994.3,2492.9c0-75.2-102.9-498.4-166.1-694.3c-67.2-197.8-290.8-682.4-385.7-832.7l-41.6-65.3h-801.1h-801.1v811v810.9h1097.8C5857.8,2522.6,5994.3,2518.7,5994.3,2492.9z M2034.4-220.8l-5.9-807l-805-5.9l-807-4v811v811h811h811L2034.4-220.8z M5203.1,572.4c0-5.9-85-154.3-191.9-330.3c-296.7-500.4-458.9-852.5-571.6-1256c-5.9-19.8-225.5-23.7-1050.3-19.8l-1044.3,5.9l-5.9,807l-4,805h1434C4558.3,584.2,5203.1,578.3,5203.1,572.4z M3482.3-2145.3v-811H1949.4H416.5v811v811h1532.9h1532.9V-2145.3z M4378.3-1664.7c7.9-271,19.8-367.9,61.3-526.1c47.5-185.9,185.9-500.4,298.7-680.4l51.4-85h-494.5h-496.5v811v811h284.8h282.8L4378.3-1664.7z\"/></g><text dominant-baseline=\"central\" text-anchor=\"middle\" x=\"715\" y=\"690\" font-family=\"sans-serif\" font-weight=\"bolder\" font-size=\"150\" fill=\"black\">".count."</text>
</g>
</svg>"

Dashboard XML -

<dashboard>
  <label>Firewall</label>
  <row>
    <panel>
      <viz type="svg.svg">
        <search>
          <query>| makeresults count=4
| streamstats count 
| eval name = CASE (count==1, "WAF06", count==2, "WAF09", count==3, "WAF42", count==4, "WAF99")
| eval count = random()%10000
| stats sum(count) as count by name 
| eval svg_viz = "<svg version=\"1.1\" xmlns=\"http://www.w3.org/2000/svg\" viewBox=\"0 0 1000 1000\">
<g><g transform=\"translate(0.000000,511.000000) scale(0.100000,-0.100000)\"><path d=\"M6176.2,4322.5c-23.7-9.9-51.4-39.6-61.3-63.3c-9.9-25.7-21.7-298.7-29.7-609.2c-5.9-310.5-17.8-619.1-23.7-686.3l-11.9-124.6l-2927.4-4L195,2829.2l-47.5-55.4l-47.5-55.4V-208.9c0-3121.2-4-3016.3,89-3052c17.8-5.9,1119.5-11.9,2444.7-11.9h2413.1l134.5-114.7c379.8-328.3,743.7-518.2,1222.4-638.9c694.2-176,1432-96.9,2068.9,221.5c269,134.5,464.8,273,688.3,486.6c379.8,367.9,611.2,785.2,712.1,1291.6c45.5,221.5,31.7,751.6-27.7,1087.9c-104.8,595.4-344.2,1263.9-652.7,1819.7c-112.7,203.7-162.2,243.3-265,205.7c-61.3-21.8-73.2-41.5-174.1-308.6c-73.2-193.8-257.1-498.4-356-589.4l-55.4-49.4l11.9,59.3c49.5,237.4,94.9,526.1,112.8,700.2c67.3,678.4-55.4,1309.4-348.1,1776.2c-417.4,666.6-1032.5,1252-1661.5,1580.4C6285,4344.3,6253.4,4352.2,6176.2,4322.5z M6621.3,3794.4c632.9-419.3,1256-1161,1428.1-1703c185.9-581.5,156.3-1323.3-87-2142.1c-73.2-249.2-73.2-310.5,7.9-352.1c63.3-35.6,118.7-25.7,241.3,39.6c259.1,138.5,508.3,403.5,702.2,749.6l100.9,178l75.2-164.2c419.3-915.8,591.4-1809.8,466.8-2417c-185.9-900-985-1600.2-2009.6-1760.4c-298.7-47.5-727.9-31.6-1018.6,37.6C5571-3514,4886.6-2853.4,4706.6-1977.2c-13.8,65.3-23.7,229.4-23.7,365.9c4,559.8,158.2,971.2,718,1898.8c575.6,955.3,749.6,1354.9,878.2,2027.4c73.2,383.7,130.5,987,130.5,1400.4c0,166.2,5.9,211.6,25.7,199.8C6447.2,3907.2,6532.3,3851.8,6621.3,3794.4z M3482.3,1711.7v-811H1949.4H416.5v811v810.9h1532.9h1532.9V1711.7z M5994.3,2492.9c0-75.2-102.9-498.4-166.1-694.3c-67.2-197.8-290.8-682.4-385.7-832.7l-41.6-65.3h-801.1h-801.1v811v810.9h1097.8C5857.8,2522.6,5994.3,2518.7,5994.3,2492.9z M2034.4-220.8l-5.9-807l-805-5.9l-807-4v811v811h811h811L2034.4-220.8z M5203.1,572.4c0-5.9-85-154.3-191.9-330.3c-296.7-500.4-458.9-852.5-571.6-1256c-5.9-19.8-225.5-23.7-1050.3-19.8l-1044.3,5.9l-5.9,807l-4,805h1434C4558.3,584.2,5203.1,578.3,5203.1,572.4z M3482.3-2145.3v-811H1949.4H416.5v811v811h1532.9h1532.9V-2145.3z M4378.3-1664.7c7.9-271,19.8-367.9,61.3-526.1c47.5-185.9,185.9-500.4,298.7-680.4l51.4-85h-494.5h-496.5v811v811h284.8h282.8L4378.3-1664.7z\"/></g><text dominant-baseline=\"central\" text-anchor=\"middle\" x=\"715\" y=\"690\" font-family=\"sans-serif\" font-weight=\"bolder\" font-size=\"150\" fill=\"black\">".count."</text>
</g>
</svg>"</query>
          <earliest>-1m</earliest>
          <latest>now</latest>
          <sampleRatio>1</sampleRatio>
        </search>
        <option name="height">220</option>
        <option name="drilldown">none</option>
        <option name="trellis.enabled">1</option>
        <option name="trellis.scales.shared">1</option>
        <option name="trellis.size">medium</option>
      </viz>
    </panel>
  </row>
</dashboard>

While it is not using the same query, hopefully, you get an idea on how to put it together.

I found and tweaked the following SVG image (firewall) from OnlineWebFonts as the basis of the firewall images.

[vinzent]

Dear Msivill,

Thanks for your answer. You gave me a serious help and now I can generated SVG objects dynamically.
Here is my code :

index=rswaf  | rename context.applianceName as app | stats count by app
| eval svg_viz = "<svg version=\"1.1\" xmlns=\"http://www.w3.org/2000/svg\" xmlns:xlink=\"http://www.w3.org/1999/xlink\" x=\"0px\" y=\"0px\" viewBox=\"0 0 1000 1000\" enable-background=\"new 0 0 1000 1000\" xml:space=\"preserve\">
<metadata> Svg Vector Icons : http://www.onlinewebfonts.com/icon </metadata>
<g><g transform=\"translate(0.000000,511.000000) scale(0.100000,-0.100000)\"><path d=\"M6176.2,4322.5c-23.7-9.9-51.4-39.6-61.3-63.3c-9.9-25.7-21.7-298.7-29.7-609.2c-5.9-310.5-17.8-619.1-23.7-686.3l-11.9-124.6l-2927.4-4L195,2829.2l-47.5-55.4l-47.5-55.4V-208.9c0-3121.2-4-3016.3,89-3052c17.8-5.9,1119.5-11.9,2444.7-11.9h2413.1l134.5-114.7c379.8-328.3,743.7-518.2,1222.4-638.9c694.2-176,1432-96.9,2068.9,221.5c269,134.5,464.8,273,688.3,486.6c379.8,367.9,611.2,785.2,712.1,1291.6c45.5,221.5,31.7,751.6-27.7,1087.9c-104.8,595.4-344.2,1263.9-652.7,1819.7c-112.7,203.7-162.2,243.3-265,205.7c-61.3-21.8-73.2-41.5-174.1-308.6c-73.2-193.8-257.1-498.4-356-589.4l-55.4-49.4l11.9,59.3c49.5,237.4,94.9,526.1,112.8,700.2c67.3,678.4-55.4,1309.4-348.1,1776.2c-417.4,666.6-1032.5,1252-1661.5,1580.4C6285,4344.3,6253.4,4352.2,6176.2,4322.5z M6621.3,3794.4c632.9-419.3,1256-1161,1428.1-1703c185.9-581.5,156.3-1323.3-87-2142.1c-73.2-249.2-73.2-310.5,7.9-352.1c63.3-35.6,118.7-25.7,241.3,39.6c259.1,138.5,508.3,403.5,702.2,749.6l100.9,178l75.2-164.2c419.3-915.8,591.4-1809.8,466.8-2417c-185.9-900-985-1600.2-2009.6-1760.4c-298.7-47.5-727.9-31.6-1018.6,37.6C5571-3514,4886.6-2853.4,4706.6-1977.2c-13.8,65.3-23.7,229.4-23.7,365.9c4,559.8,158.2,971.2,718,1898.8c575.6,955.3,749.6,1354.9,878.2,2027.4c73.2,383.7,130.5,987,130.5,1400.4c0,166.2,5.9,211.6,25.7,199.8C6447.2,3907.2,6532.3,3851.8,6621.3,3794.4z M3482.3,1711.7v-811H1949.4H416.5v811v810.9h1532.9h1532.9V1711.7z M5994.3,2492.9c0-75.2-102.9-498.4-166.1-694.3c-67.2-197.8-290.8-682.4-385.7-832.7l-41.6-65.3h-801.1h-801.1v811v810.9h1097.8C5857.8,2522.6,5994.3,2518.7,5994.3,2492.9z M2034.4-220.8l-5.9-807l-805-5.9l-807-4v811v811h811h811L2034.4-220.8z M5203.1,572.4c0-5.9-85-154.3-191.9-330.3c-296.7-500.4-458.9-852.5-571.6-1256c-5.9-19.8-225.5-23.7-1050.3-19.8l-1044.3,5.9l-5.9,807l-4,805h1434C4558.3,584.2,5203.1,578.3,5203.1,572.4z M3482.3-2145.3v-811H1949.4H416.5v811v811h1532.9h1532.9V-2145.3z M4378.3-1664.7c7.9-271,19.8-367.9,61.3-526.1c47.5-185.9,185.9-500.4,298.7-680.4l51.4-85h-494.5h-496.5v811v811h284.8h282.8L4378.3-1664.7z\"/></g></g>       <text fill=\"black\">
    <tspan font-family=\"Helvetica\" font-size=\"30\" font-weight=\"bold\" x=\"650\" y=\"650\" textLength=\"100.256836\">".app."</tspan>    <tspan font-family=\"Helvetica\" font-size=\"30\" font-weight=\"bold\" x=\"680\" y=\"720\" textLength=\"100.256836\">".count."</tspan>
      </text>
</svg>"

I now have 2 objects created, each with the appropriate values from Splunk index query :

<svg version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px" viewBox="0 0 1000 1000" enable-background="new 0 0 1000 1000" xml:space="preserve">
<metadata> Svg Vector Icons : http://www.onlinewebfonts.com/icon </metadata>
<g><g transform="translate(0.000000,511.000000) scale(0.100000,-0.100000)"><path d="M6176.2,4322.5c-23.7-9.9-51.4-39.6-61.3-63.3c-9.9-25.7-21.7-298.7-29.7-609.2c-5.9-310.5-17.8-619.1-23.7-686.3l-11.9-124.6l-2927.4-4L195,2829.2l-47.5-55.4l-47.5-55.4V-208.9c0-3121.2-4-3016.3,89-3052c17.8-5.9,1119.5-11.9,2444.7-11.9h2413.1l134.5-114.7c379.8-328.3,743.7-518.2,1222.4-638.9c694.2-176,1432-96.9,2068.9,221.5c269,134.5,464.8,273,688.3,486.6c379.8,367.9,611.2,785.2,712.1,1291.6c45.5,221.5,31.7,751.6-27.7,1087.9c-104.8,595.4-344.2,1263.9-652.7,1819.7c-112.7,203.7-162.2,243.3-265,205.7c-61.3-21.8-73.2-41.5-174.1-308.6c-73.2-193.8-257.1-498.4-356-589.4l-55.4-49.4l11.9,59.3c49.5,237.4,94.9,526.1,112.8,700.2c67.3,678.4-55.4,1309.4-348.1,1776.2c-417.4,666.6-1032.5,1252-1661.5,1580.4C6285,4344.3,6253.4,4352.2,6176.2,4322.5z M6621.3,3794.4c632.9-419.3,1256-1161,1428.1-1703c185.9-581.5,156.3-1323.3-87-2142.1c-73.2-249.2-73.2-310.5,7.9-352.1c63.3-35.6,118.7-25.7,241.3,39.6c259.1,138.5,508.3,403.5,702.2,749.6l100.9,178l75.2-164.2c419.3-915.8,591.4-1809.8,466.8-2417c-185.9-900-985-1600.2-2009.6-1760.4c-298.7-47.5-727.9-31.6-1018.6,37.6C5571-3514,4886.6-2853.4,4706.6-1977.2c-13.8,65.3-23.7,229.4-23.7,365.9c4,559.8,158.2,971.2,718,1898.8c575.6,955.3,749.6,1354.9,878.2,2027.4c73.2,383.7,130.5,987,130.5,1400.4c0,166.2,5.9,211.6,25.7,199.8C6447.2,3907.2,6532.3,3851.8,6621.3,3794.4z M3482.3,1711.7v-811H1949.4H416.5v811v810.9h1532.9h1532.9V1711.7z M5994.3,2492.9c0-75.2-102.9-498.4-166.1-694.3c-67.2-197.8-290.8-682.4-385.7-832.7l-41.6-65.3h-801.1h-801.1v811v810.9h1097.8C5857.8,2522.6,5994.3,2518.7,5994.3,2492.9z M2034.4-220.8l-5.9-807l-805-5.9l-807-4v811v811h811h811L2034.4-220.8z M5203.1,572.4c0-5.9-85-154.3-191.9-330.3c-296.7-500.4-458.9-852.5-571.6-1256c-5.9-19.8-225.5-23.7-1050.3-19.8l-1044.3,5.9l-5.9,807l-4,805h1434C4558.3,584.2,5203.1,578.3,5203.1,572.4z M3482.3-2145.3v-811H1949.4H416.5v811v811h1532.9h1532.9V-2145.3z M4378.3-1664.7c7.9-271,19.8-367.9,61.3-526.1c47.5-185.9,185.9-500.4,298.7-680.4l51.4-85h-494.5h-496.5v811v811h284.8h282.8L4378.3-1664.7z"/></g></g>       <text fill="black">
    <tspan font-family="Helvetica" font-size="30" font-weight="bold" x="650" y="650" textLength="100.256836">WAF11</tspan>    <tspan font-family="Helvetica" font-size="30" font-weight="bold" x="680" y="720" textLength="100.256836">263</tspan>
      </text>
</svg>

and :

<svg version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px" viewBox="0 0 1000 1000" enable-background="new 0 0 1000 1000" xml:space="preserve">
<metadata> Svg Vector Icons : http://www.onlinewebfonts.com/icon </metadata>
<g><g transform="translate(0.000000,511.000000) scale(0.100000,-0.100000)"><path d="M6176.2,4322.5c-23.7-9.9-51.4-39.6-61.3-63.3c-9.9-25.7-21.7-298.7-29.7-609.2c-5.9-310.5-17.8-619.1-23.7-686.3l-11.9-124.6l-2927.4-4L195,2829.2l-47.5-55.4l-47.5-55.4V-208.9c0-3121.2-4-3016.3,89-3052c17.8-5.9,1119.5-11.9,2444.7-11.9h2413.1l134.5-114.7c379.8-328.3,743.7-518.2,1222.4-638.9c694.2-176,1432-96.9,2068.9,221.5c269,134.5,464.8,273,688.3,486.6c379.8,367.9,611.2,785.2,712.1,1291.6c45.5,221.5,31.7,751.6-27.7,1087.9c-104.8,595.4-344.2,1263.9-652.7,1819.7c-112.7,203.7-162.2,243.3-265,205.7c-61.3-21.8-73.2-41.5-174.1-308.6c-73.2-193.8-257.1-498.4-356-589.4l-55.4-49.4l11.9,59.3c49.5,237.4,94.9,526.1,112.8,700.2c67.3,678.4-55.4,1309.4-348.1,1776.2c-417.4,666.6-1032.5,1252-1661.5,1580.4C6285,4344.3,6253.4,4352.2,6176.2,4322.5z M6621.3,3794.4c632.9-419.3,1256-1161,1428.1-1703c185.9-581.5,156.3-1323.3-87-2142.1c-73.2-249.2-73.2-310.5,7.9-352.1c63.3-35.6,118.7-25.7,241.3,39.6c259.1,138.5,508.3,403.5,702.2,749.6l100.9,178l75.2-164.2c419.3-915.8,591.4-1809.8,466.8-2417c-185.9-900-985-1600.2-2009.6-1760.4c-298.7-47.5-727.9-31.6-1018.6,37.6C5571-3514,4886.6-2853.4,4706.6-1977.2c-13.8,65.3-23.7,229.4-23.7,365.9c4,559.8,158.2,971.2,718,1898.8c575.6,955.3,749.6,1354.9,878.2,2027.4c73.2,383.7,130.5,987,130.5,1400.4c0,166.2,5.9,211.6,25.7,199.8C6447.2,3907.2,6532.3,3851.8,6621.3,3794.4z M3482.3,1711.7v-811H1949.4H416.5v811v810.9h1532.9h1532.9V1711.7z M5994.3,2492.9c0-75.2-102.9-498.4-166.1-694.3c-67.2-197.8-290.8-682.4-385.7-832.7l-41.6-65.3h-801.1h-801.1v811v810.9h1097.8C5857.8,2522.6,5994.3,2518.7,5994.3,2492.9z M2034.4-220.8l-5.9-807l-805-5.9l-807-4v811v811h811h811L2034.4-220.8z M5203.1,572.4c0-5.9-85-154.3-191.9-330.3c-296.7-500.4-458.9-852.5-571.6-1256c-5.9-19.8-225.5-23.7-1050.3-19.8l-1044.3,5.9l-5.9,807l-4,805h1434C4558.3,584.2,5203.1,578.3,5203.1,572.4z M3482.3-2145.3v-811H1949.4H416.5v811v811h1532.9h1532.9V-2145.3z M4378.3-1664.7c7.9-271,19.8-367.9,61.3-526.1c47.5-185.9,185.9-500.4,298.7-680.4l51.4-85h-494.5h-496.5v811v811h284.8h282.8L4378.3-1664.7z"/></g></g>       <text fill="black">
    <tspan font-family="Helvetica" font-size="30" font-weight="bold" x="650" y="650" textLength="100.256836">WAF12</tspan>    <tspan font-family="Helvetica" font-size="30" font-weight="bold" x="680" y="720" textLength="100.256836">2</tspan>
      </text>
</svg>

If you allow me to ask one more question : how to define dynamic coordinates for these two objects ?
They are rendered in a treillis container but they are printed beside each other. Finally I want to render them one above the other.
For this, I guess I have to dynamically alter the coordinates but I have trouble to see the path ...

Thanks again for your help
Vince

[msivill_splunk]

Hi Vince,

The reason for suggesting the Trellis layout is that it can handle 1,2,3,4,5.....n images. You've asked for 2 dynamic images but I wasn't sure in your use case whether that could become 1,3,4 or any other number of firewalls images.

If you are only going to get zero, one or two firewall images I would perhaps build a static "image" with both firewalls then selectively hide the firewall images you don't need (with all coordinates mapped out). A bit like the battery bars example dashboard in the SVG app. So basically "hard coding" the number of firewalls in the image and not "truly dynamic" like the Trellis layout.

Currently the SVG app will only paint one image from the first event unless you go for Trellis layout (but then you are tied to the way Trellis formats the images).

Hope this helps.

[msivill_splunk]

Hi,

Could you share the full SPL example (with all SVG) you are currently using so it can be played with?

The SVG app will only display the first SVG line unless you've crafted a correct query and enabled Trellis layout. As of version 3 of Scalable Vector Graphics Trellis layout is supported.

Thanks