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!

Index This | I am a number, but when you add ‘G’ to me, I go away. What number am I?

March 2024 Edition Hayyy Splunk Education Enthusiasts and the Eternally Curious!  We’re back with another ...

What’s New in Splunk App for PCI Compliance 5.3.1?

The Splunk App for PCI Compliance allows customers to extend the power of their existing Splunk solution with ...

Extending Observability Content to Splunk Cloud

Register to join us !   In this Extending Observability Content to Splunk Cloud Tech Talk, you'll see how to ...