Available Widgets

Creating a Kitto dashboard using the installer populates your new dashboard with a few essential widgets.

Below you can find a list of those core widgets, the data structure they expect to receive and options you can use to tweak their behavior.

All options below are defined using HTML data attributes.
For example in the widget below, we have defined the title, text and moreinfo options.

      <div class="widget-welcome"
           data-widget="Text"
           data-source="text"
           data-title="Hello"
           data-text="This is your shiny new dashboard."
           data-moreinfo="Protip: You can drag the widgets around!">
      </div>

All widgets accept a source options which specifies the topic on which to listen for data.
Defaults to the lowercase name of the widget (eg for the "Text" widget, it is "text").

Read providing-data-to-widgets for info on how to send data to a widget.

For additional (3rd party) widgets, read here.

To update the core widgets run:

sh -c "$(curl -fsSL https://gist.githubusercontent.com/Zorbash/98afb51cb7287ff7fe3b2b9a3331dc5f/raw/16ec3aa6e7ef88ee121ee4c30fc982e5f8775850/kitto_updater.sh)"

Number

Options

• title: The header of the widget
• moreinfo: The footer of the widget
• changerate: Set it to "off" if you don't want to display the change rate

Data Source

{ "value": 42 }

Live example: curl -XGET 'http://kitto.io/events?topics=random'

HTTP API Example

curl -XPOST http://localhost:4000/widgets/random -d '{ "value": 42 }'

Text

Options

Data Source

{ "text": "Hello, this is text" }

Live example: curl -XGET 'http://kitto.io/events?topics=text'

HTTP API Example

curl -XPOST http://localhost:4000/widgets/text -d '{ "text": "Hello, this is text" }'

List

Options

• title: The header of the list
• moreinfo: The footer of the list.
• unordered: When set to true, uses a `
  for the list

Data Source

{ "items": [{ "value": 42, "label": "the answer"} ,{ "value": 9001, "label": "Kitto's awesomeness lvl" }]}

Live example: curl -XGET 'http://kitto.io/events?topics=buzzwords'

HTTP API Example

curl -XPOST http://localhost:4000/widgets/buzzwords -d '{ "items": [{ "value": 42, "label": "the answer"} ,{ "value": 9001, "label": "Kitto's awesomeness lvl" }]}'

Graph

Options

• graph-type: area (default), bar, line

Data Source

Expects time series data like:

{ "points": [{ "y": 96.0, "x": 11730821} ,{ "y": 17.0, "x": 11730822 }]}

Live example: curl -XGET 'http://kitto.io/events?topics=convergence'

HTTP API Example

curl -XPOST http://localhost:4000/widgets/convergence -d '{ "points": [{"x": 1, "y": 42}] }'

Meter

Options

• min: The minimum value of the meter, defaults to 0.
• max: The maximum value of the meter, default to 100.

Data Source

{ "value": 42 }

Live example: curl -XGET 'http://kitto.io/events?topics=random'

HTTP API Example

curl -XPOST http://localhost:4000/widgets/random -d '{ "value": 42 }'

Clock

Options

N/A

Data Source

N/A

Image

Options

N/A

Data Source

{ "image": "https://imageurl.com" }