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!

What's new in Splunk Cloud Platform 9.1.2312?

Hi Splunky people! We are excited to share the newest updates in Splunk Cloud Platform 9.1.2312! Analysts can ...

What’s New in Splunk Security Essentials 3.8.0?

Splunk Security Essentials (SSE) is an app that can amplify the power of your existing Splunk Cloud Platform, ...

Let’s Get You Certified – Vegas-Style at .conf24

Are you ready to level up your Splunk game? Then, let’s get you certified live at .conf24 – our annual user ...