Horseshoe meter Simple XML

Custom visualizations use a namespaced syntax for Simple XML. Specific visualization properties are appended to the app and visualization context.

Add a horseshoe meter to a dashboard panel

You can add a horseshoe meter to a dashboard panel using Simple XML. Use this syntax to specify the app and visualization context.

<viz type="horseshoe_meter_app.horseshoe_meter">
</viz>

Configure horseshoe meter properties

To configure a location tracker property, add any of the following property names and a value to this syntax.

<option name=
    "horseshoe_meter_app.horseshoe_meter.[property_name]">[property_value]
</option>

Option name	Accepted values	Default	Example
backgroundColor	Any valid CSS hex string	#fff	<option name= "horseshoe_meter_app.horseshoe_meter.backgroundColor">#fff </option>
maxValue	Any number	100	<option name= "horseshoe_meter_app.horseshoe_meter.maxValue">300 </option>
minValue	Any number	0	<option name= "horseshoe_meter_app.horseshoe_meter.minValue">15 </option>
dialColor	Any valid CSS hex string	#555	<option name= "horseshoe_meter_app.horseshoe_meter.dialColor">#d0d5d9 </option>
valueColor	Any valid CSS hex string	#d0d5d9	<option name= "horseshoe_meter_app.horseshoe_meter.valueColor">#555 </option>
caption	Any string up to 20 characters.	N/A	<option name= "horseshoe_meter_app.horseshoe_meter.caption">units </option>
useRangemap	[ true | false ]	false	<option name= "horseshoe_meter_app.horseshoe_meter.useRangemap ">true </option>
midRangeThreshold	Any number. Use a value smaller than the maxRangeThreshold.	55	<option name= "horseshoe_meter_app.horseshoe_meter.midRangeThreshold">70 </option>
maxRangeThreshold	Any number. Use a value larger than the midRangeThreshold.	80	<option name= "horseshoe_meter_app.horseshoe_meter.maxRangeThreshold">70 </option>
thresholdStyle	[ percentage | value ]	percentage	<option name= "horseshoe_meter_app.horseshoe_meter.thresholdStyle">value </option>
minRangeColor	Any valid CSS hex string	#3fc77a	<option name= "horseshoe_meter_app.horseshoe_meter.minRangeColor">#fff </option>
midRangeColor	Any valid CSS hex string	#fbcd2f	<option name= "horseshoe_meter_app.horseshoe_meter.midRangeColor">#fff </option>
maxRangeColor	Any valid CSS hex string	#b44441	<option name= "horseshoe_meter_app.horseshoe_meter.maxRangeColor">#fbcd2f </option>

Example Simple XML source code

Here is an example dashboard panel.

[...]
    <panel>
      <title>Three color meter</title>
      <viz type="horseshoe_meter_app.horseshoe_meter">
        <search>
          <query>index=_internal | head 30 | stats count</query>
          <earliest></earliest>
          <latest></latest>
        </search>
        <option name="horseshoe_meter_app.horseshoe_meter.maxValue">100</option>
        <option name="horseshoe_meter_app.horseshoe_meter.minValue">0</option>
        <option name="horseshoe_meter_app.horseshoe_meter.useRangemap">false</option>
        <option name="horseshoe_meter_app.horseshoe_meter.dialColor">#f58f39</option>
        <option name="horseshoe_meter_app.horseshoe_meter.valueColor">#6db7c6</option>
        <option name="horseshoe_meter_app.horseshoe_meter.backgroundColor">#555</option>
        <option name="horseshoe_meter_app.horseshoe_meter.thresholdStyle">percentage</option>
        <option name="horseshoe_meter_app.horseshoe_meter.minRangeColor">#3fc77a</option>
        <option name="horseshoe_meter_app.horseshoe_meter.midRangeThreshold">55</option>
        <option name="horseshoe_meter_app.horseshoe_meter.midRangeColor">#fbcd2f</option>
        <option name="horseshoe_meter_app.horseshoe_meter.maxRangeThreshold">80</option>
        <option name="horseshoe_meter_app.horseshoe_meter.maxRangeColor">#b44441</option>
      </viz>
    </panel>
[...]

The source code generates this panel.