@splnsuman ideally what you are looking for is free canvas kind of design (Similar to the one used in ITSI). If you are on Splunk 7.3 or higher, you can try out the Beta Dashboard App. This gives your Canvas based dashboard where you can drag and drop widgets and resize them as per your needs. This currently provided bare-minimal visualizations, drilldowns and tokens and also require you to adjust to the new JSON based framework instead of SimpleXML. Refer to documentation: https://docs.splunk.com/Documentation/DashApp/latest/DashApp/IntroApp
However, if you are not on 7.3.x or higher, you would have to play around a lot with CSS and JS. Also maybe try html dashboards for full control of panels, viz etc.
I am providing you with an alternate to use table as Single Value using Table Formatting and some CSS overrides. PS: On top of what I have provided, you should also be able to change the width of table columns as per your need to accommodate longer table row labels for SV1 SV2 etc.
PS: I have tried to bring it closer to your requirement with least code. For further formatting exactly like you dashboard you would need to make further changes as per actual viz and requirements.
Following is the run anywhere dashboard code with required CSS override and Table Customization:
<form>
<label>Custom Dashboard Layout</label>
<fieldset submitButton="false"></fieldset>
<row>
<panel>
<html depends="$alwaysHideCSSPanel$">
<style>
div[id^="table_single_value_format"] table thead{
visibility: hidden !important;
}
div[id^="table_single_value_format"] table tbody tr td{
text-align: center !important;
}
div#table_single_value_format1 table tbody tr td,
div#table_single_value_format2 table tbody tr td{
height: 52px !important;
}
</style>
</html>
<table id="table_single_value_format1">
<search>
<query>| makeresults
| fields - _time
| eval label="SV1,SV2,SV3"
| makemv label delim=","
| mvexpand label
| eval data=random()
| eval data=substr(data,1,2)
| table label data</query>
<earliest>$earliest$</earliest>
<latest>$latest$</latest>
</search>
<format type="color" field="data">
<colorPalette type="list">[#DC4E41,#F8BE34,#53A051]</colorPalette>
<scale type="threshold">70,90</scale>
</format>
<format type="number" field="data">
<option name="precision">0</option>
<option name="unit">%</option>
<option name="useThousandSeparators">false</option>
</format>
</table>
</panel>
<panel>
<chart>
<search>
<query>| makeresults
| fields - _time
| eval perc=random()
| eval perc=substr(perc,1,2)</query>
<earliest>-24h@h</earliest>
<latest>now</latest>
<sampleRatio>1</sampleRatio>
</search>
<option name="charting.axisLabelsX.majorLabelStyle.overflowMode">ellipsisNone</option>
<option name="charting.axisLabelsX.majorLabelStyle.rotation">0</option>
<option name="charting.axisTitleX.visibility">visible</option>
<option name="charting.axisTitleY.visibility">visible</option>
<option name="charting.axisTitleY2.visibility">visible</option>
<option name="charting.axisX.abbreviation">none</option>
<option name="charting.axisX.scale">linear</option>
<option name="charting.axisY.abbreviation">none</option>
<option name="charting.axisY.scale">linear</option>
<option name="charting.axisY2.abbreviation">none</option>
<option name="charting.axisY2.enabled">0</option>
<option name="charting.axisY2.scale">inherit</option>
<option name="charting.chart">radialGauge</option>
<option name="charting.chart.bubbleMaximumSize">50</option>
<option name="charting.chart.bubbleMinimumSize">10</option>
<option name="charting.chart.bubbleSizeBy">area</option>
<option name="charting.chart.nullValueMode">gaps</option>
<option name="charting.chart.rangeValues">[0,70,90,100]</option>
<option name="charting.chart.showDataLabels">none</option>
<option name="charting.chart.sliceCollapsingThreshold">0.01</option>
<option name="charting.chart.stackMode">default</option>
<option name="charting.chart.style">shiny</option>
<option name="charting.gaugeColors">["0xdc4e41","0xf8be34","0x53a051"]</option>
<option name="charting.layout.splitSeries">0</option>
<option name="charting.layout.splitSeries.allowIndependentYRanges">0</option>
<option name="charting.legend.labelStyle.overflowMode">ellipsisMiddle</option>
<option name="charting.legend.mode">standard</option>
<option name="charting.legend.placement">right</option>
<option name="charting.lineWidth">2</option>
<option name="trellis.enabled">0</option>
<option name="trellis.scales.shared">1</option>
<option name="trellis.size">medium</option>
</chart>
</panel>
<panel>
<table id="table_single_value_format2">
<search>
<query>| makeresults
| fields - _time
| eval label="SV4,SV5,SV6"
| makemv label delim=","
| mvexpand label
| eval data=random()
| eval data=substr(data,1,2)
| table label data</query>
<earliest>$earliest$</earliest>
<latest>$latest$</latest>
</search>
<format type="color" field="data">
<colorPalette type="list">[#DC4E41,#F8BE34,#53A051]</colorPalette>
<scale type="threshold">70,90</scale>
</format>
<format type="number" field="data">
<option name="precision">0</option>
<option name="unit">%</option>
<option name="useThousandSeparators">false</option>
</format>
</table>
</panel>
<panel>
<table id="table_single_value_format3">
<search>
<query>| makeresults
| fields - _time
| eval label="SV7,SV8,SV9,SV10,SV11,SV12"
| makemv label delim=","
| mvexpand label
| eval data=random()
| eval data=substr(data,1,2)
| table label data</query>
<earliest>$earliest$</earliest>
<latest>$latest$</latest>
</search>
<format type="color" field="data">
<colorPalette type="list">[#DC4E41,#F8BE34,#53A051]</colorPalette>
<scale type="threshold">70,90</scale>
</format>
<format type="number" field="data">
<option name="precision">0</option>
<option name="unit">%</option>
<option name="useThousandSeparators">false</option>
</format>
</table>
</panel>
<panel>
<input type="dropdown" token="field1">
<label>field1</label>
</input>
<input type="dropdown" token="field2">
<label>field2</label>
</input>
<input type="text" token="field3">
<label>field3</label>
</input>
</panel>
</row>
</form>
