Dashboards & Visualizations

Radial gauge in Advanced XML

mehdiazmi
Explorer

Hi, everyone!!!
I'm trying to display a radial gauge in an Advanced XML dashboard.

The search is perfectly working in the search bar but doesn't display anything in the dashboard.

Here is my code

<code> <?xml version='1.0' encoding='utf-8'?>
<view template="dashboard.html">
<label>machin-Dash-Parc-Divers</label>

<module name="Search" layoutPanel="panel_row1_col1" group="Conformité globale" autoRun="True">
  <param name="search">
 | inputlookup table_compliance_PARC.csv | search PARC="Divers" | chart mean(Compliance) AS 
   "CONFORMITE GLOBALE" by Compliance 

    <module name="HiddenChartFormatter">
    <param name="search">inherit</param>
    <param name="charting.chart">radialGauge</param>
    <param name="charting.chart.rangeValues">[0,1,2,3,4,5]</param>
    <param name="clearOnJobDispatch">False</param>
    <param name="maxSize">100</param>
    <param name="charting.axisLabelsX.majorLabelStyle.overflowMode">ellipsisNone</param>
    <param name="charting.axisLabelsX.majorLabelStyle.rotation">0</param>
    <param name="charting.axisTitleX.visibility">visible</param>
    <param name="charting.axisTitleY.visibility">visible</param>
    <param name="charting.axisTitleY2.visibility">visible</param>
    <param name="charting.axisX.scale">linear</param>
    <param name="charting.axisY.scale">linear</param>
    <param name="charting.axisY2.enabled">false</param>
    <param name="charting.axisY2.scale">inherit</param>
    <param name="charting.chart">radialGauge</param>
    <param name="charting.chart.bubbleMaximumSize">50</param>
    <param name="charting.chart.bubbleMinimumSize">10</param>
    <param name="charting.chart.bubbleSizeBy">area</param>
    <param name="charting.chart.nullValueMode">gaps</param>
    <param name="charting.chart.sliceCollapsingThreshold">0.01</param>
    <param name="charting.chart.stackMode">default</param>
    <param name="charting.chart.style">shiny</param>
    <param name="charting.drilldown">all</param>
    <param name="charting.gaugeColors">[0xd13b3b,0xed7f10,0xffff00,0x00FF00,0x009900]</param>
    <param name="charting.layout.splitSeries">0</param>
    <param name="charting.legend.labelStyle.overflowMode">ellipsisMiddle</param>
    <param name="charting.legend.placement">right</param> 
    <module name="flashChart" />
    </module>
    </param>

</module>

</view>

</code>

Do you have any suggestion or example so it could work.

Thank you in advance.

Cordially.

Tags (2)
0 Karma
1 Solution

richgalloway
SplunkTrust
SplunkTrust

Here is a stripped-down copy of the XML that produces our radial gauge. I put it in an answer because it wouldn't fit in a comment.

<?xml version='1.0' encoding='utf-8'?>
<view template="dashboard.html">
  <label>Radial Gauge Example</label>
  <module name="AccountBar" layoutPanel="appHeader"/>
  <module name="AppBar" layoutPanel="navigationHeader"/>
  <module name="SideviewUtils" layoutPanel="appHeader" />

  <module name="TitleBar" layoutPanel="navigationHeader">
    <param name="showActionsMenu">false</param>
  </module>

  <module name="URLLoader" layoutPanel="panel_row1_col1" autoRun="True">
    <module name="HiddenSavedSearch" layoutPanel="panel_row1_col1" autoRun="True">
      <param name="savedSearch">example_search</param>

      <module name="PostProcess" layoutPanel="panel_row1_col1_grp1">
        <param name="search"><![CDATA[stats avg(TotalS) AS AvgS, max(TotalS) AS MaxS | 
      eval AvgS=round(AvgS, 2) | eval MaxS=round(MaxS, 2) |
      gauge AvgS 600 900 1200 1500 MaxS]]></param>
        <module name="HiddenChartFormatter">
          <param name="charting.chart">radialGauge</param>
          <param name="charting.chart.showLabels">false</param>
          <param name="charting.chart.rangeStartAngle">60</param>
          <param name="charting.chart.rangeArcAngle">240</param>
          <module name="FlashChart">
            <param name="width">100%</param>
            <param name="height">130px</param>
          </module>
        </module>
      </module>
    </module>
  </module>
</view>
---
If this reply helps you, Karma would be appreciated.

View solution in original post

richgalloway
SplunkTrust
SplunkTrust

Here is a stripped-down copy of the XML that produces our radial gauge. I put it in an answer because it wouldn't fit in a comment.

<?xml version='1.0' encoding='utf-8'?>
<view template="dashboard.html">
  <label>Radial Gauge Example</label>
  <module name="AccountBar" layoutPanel="appHeader"/>
  <module name="AppBar" layoutPanel="navigationHeader"/>
  <module name="SideviewUtils" layoutPanel="appHeader" />

  <module name="TitleBar" layoutPanel="navigationHeader">
    <param name="showActionsMenu">false</param>
  </module>

  <module name="URLLoader" layoutPanel="panel_row1_col1" autoRun="True">
    <module name="HiddenSavedSearch" layoutPanel="panel_row1_col1" autoRun="True">
      <param name="savedSearch">example_search</param>

      <module name="PostProcess" layoutPanel="panel_row1_col1_grp1">
        <param name="search"><![CDATA[stats avg(TotalS) AS AvgS, max(TotalS) AS MaxS | 
      eval AvgS=round(AvgS, 2) | eval MaxS=round(MaxS, 2) |
      gauge AvgS 600 900 1200 1500 MaxS]]></param>
        <module name="HiddenChartFormatter">
          <param name="charting.chart">radialGauge</param>
          <param name="charting.chart.showLabels">false</param>
          <param name="charting.chart.rangeStartAngle">60</param>
          <param name="charting.chart.rangeArcAngle">240</param>
          <module name="FlashChart">
            <param name="width">100%</param>
            <param name="height">130px</param>
          </module>
        </module>
      </module>
    </module>
  </module>
</view>
---
If this reply helps you, Karma would be appreciated.

mehdiazmi
Explorer

Thanks a lot for your answer.
It will be very helpful.

0 Karma

richgalloway
SplunkTrust
SplunkTrust

Start by simplifying your code as you have many params that don't apply to radial gauges. Delete all of the "axis" and "bubble" params. Also, you can remove stackModes, nullValueMode, and legend. My radial gauges use only the chart, chart.showlabels, chart.rangeStartAngle, and chart.rangeArcAngle params. Then, in the FlashChart module I set width=100% and height to a value that looks good on my dashboard.

---
If this reply helps you, Karma would be appreciated.
0 Karma

mehdiazmi
Explorer

Hi richgalloway.
Thank you for your answer which was helpful..
Do you have any exemple of an advanced XML script to show me so I can adapt it to my requirements?

Thanks again.

0 Karma
Get Updates on the Splunk Community!

.conf24 | Day 0

Hello Splunk Community! My name is Chris, and I'm based in Canberra, Australia's capital, and I travelled for ...

Enhance Security Visibility with Splunk Enterprise Security 7.1 through Threat ...

 (view in My Videos)Struggling with alert fatigue, lack of context, and prioritization around security ...

Troubleshooting the OpenTelemetry Collector

  In this tech talk, you’ll learn how to troubleshoot the OpenTelemetry collector - from checking the ...