Simple XML for horizon charts

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

Add a horizon chart to a dashboard panel

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

<viz type="horizon_chart_app.horizon_chart">
</viz>

Configure horizon chart properties

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

<option name=
    "horizon_chart_app.horizon_chart.[property_name]">[property_value]
</option>

Option name	Accepted values	Default	Example
relative	[ true | false]	true	<option name="horizon_chart_app.horizon_chart.relative">false</option>
showChangeInPercent	[ true | false]	true	<option name="horizon_chart_app.horizon_chart.showChangeInPercent">false</option>
smoothen	[ true | false]	true	<option name="horizon_chart_app.horizon_chart.smoothen">false</option>
positiveColor	Any valid CSS color string.	#6db7c6	<option name="horizon_chart_app.horizon_chart.positiveColor">#6db7c5</option>
negativeColor	Any valid CSS color string.	#d93f3c	<option name="horizon_chart_app.horizon_chart.negativeColor">#6db7c5</option>
numBands	Number Lower numbers will produce better results.	3	<option name="horizon_chart_app.horizon_chart.numBands">5</option>

Example Simple XML source

Here is an example horizon chart dashboard panel.

<dashboard>
  <label>Horizon Chart Dashboard</label>
<row>
    <panel>
      <title>My example panel </title>
      <viz type="horizon_chart_app.horizon_chart">
        <search>
          <query>| inputlookup stocks.csv | eval _time = strptime(date, "%Y-%m-%d")| timechart useother="f" span=1d limit=10 latest(open) by ticker_symbol | filldown</query>
          <earliest>0</earliest>
          <latest></latest>
        </search>
        <option name="horizon_chart_app.horizon_chart.numBands">4</option>
        <option name="horizon_chart_app.horizon_chart.relative">true</option>
        <option name="horizon_chart_app.horizon_chart.showChangeInPercent">true</option>
        <option name="horizon_chart_app.horizon_chart.negativeColor">#d93f3c</option>
        <option name="horizon_chart_app.horizon_chart.positiveColor">#6db7c6</option>
      </viz>
    </panel>
</row>
</dashboard>