Graph tile

Readings over time, as lines or bars.

In a dashboard file: "type": "graph", with the options below. Every tile also has the fields under Every tile.

Example

A tile, as it goes in a screen’s tiles:

{
    "type": "graph",
    "label": "Solar and use today",
    "layout": { "x": 1, "y": 1, "width": 4, "height": 2 },
    "dataSources": {
        "solar": {
            "connection": "demo",
            "params": { "device": "energy", "value": "pv", "history": "today" }
        },
        "use": {
            "connection": "demo",
            "params": { "device": "energy", "value": "house", "history": "today" }
        }
    },
    "options": {
        "graph": {
            "series": [
                {
                    "source": "solar",
                    "label": "Solar",
                    "color": "#ffcc00",
                    "fill": "fade"
                },
                { "source": "use", "label": "Use", "color": "#4fb3ff" }
            ],
            "unit": "W",
            "numberFormat": "0"
        }
    }
}

It reads the demo home: in a dashboard with the connection "demo": { "driver": "demo", "config": {} }, it works as it is. To read a device of your own, its data source names one of your connections, with the params of that connection’s driver (Connections and data sources).

Options

Field	Type	Default	What
`graph`	object	required	Graph.
`graph.type`	one of `line` (Lines), `bar` (Bars)	`line`	Kind. Lines or bars.
`graph.lineWidth`	number, above 0	`1`	Line width. In pixels. A look option: a tile style can set it.
`graph.series`	list	required	Series. The readings shown, each its own line or bars.
`graph.series[].source`	data source name	required	Readings. One of the tile’s data sources, by name, that gives readings over time or a number.
`graph.series[].color`	colour	`#ffffff`	Colour.
`graph.series[].cumulative`	`true` or `false`	`false`	Adds up. Each value added to the ones before.
`graph.series[].label`	text		Label. In the legend and the values at a tap.
`graph.series[].fill`	one of `none`, `solid` (Plain), `fade` (Fading out to the bottom)	`none`	Fill. The area under a line, in its colour.
`graph.series[].thresholds`	list	`[]`	Bar colours. Bars only: a colour from a value on, such as orange from 0.30 and red from 0.40; the series’ colour below the first.
`graph.series[].thresholds[].from`	number	required	From. The value this colour starts at.
`graph.series[].thresholds[].color`	colour	required	Colour.
`graph.unit`	text	`""`	Unit. Shown after the values, such as W.
`graph.numberFormat`	number format	`0.#`	Number format. 0, 0.0, 0.## or #,##0.
`graph.min`	number		Lowest value. At the bottom; from the readings when left out.
`graph.max`	number		Highest value. At the top; from the readings when left out.
`graph.timeAxis`	`true` or `false`	`true`	Time axis. The times along the bottom. A look option: a tile style can set it.
`graph.valueAxis`	`true` or `false`	`true`	Value axis. The values at the left. A look option: a tile style can set it.
`graph.grid`	`true` or `false`	`true`	Grid lines. Faint lines at the axes’ values. A look option: a tile style can set it.
`graph.legend`	`true` or `false`	`true`	Legend. The series’ labels, with more than one series. A look option: a tile style can set it.
`graph.barValues`	`true` or `false`	`false`	Bar values. Each bar’s value above it, where there is room. A look option: a tile style can set it.

Built-in styles

The styles the app offers for it, after “The dashboard’s style”. Style files says what they set.

Centred
Left aligned
Compact
Icon at the left