Area Plot (Trend/Chart), Custom tile, Hubitat only

Have a tile that plots and displays current value within tile.
This only works for Hubitat users that have set up the Hubitat built in Maker API app to grab the attributes from devices. Click the link to grab the Custom Tile HTML and save it (save button way down at page bottom). Go to dashboard and add the new custom tile. Go to new tile and click tile editor. Configure the Dimension, Label, and Style.

Link: Area Plot Download


At minimum you must fill out these top 3 Tile editor parameters:

Other tile editor parameters are:
Add Units to the displayed value.
Positioning the current value vertically, font size, and changing its color.
Changing the update interval, how often it grabs a new data point.
Changing the line color and area under line.

The x-axis span, how many points on x-axis. So a span of 20 and update interval of 5min would be a 100min total rolling x-axis span. After span is reach the plot will auto scroll.

Other things:
To add a shadow to the current value to its not lost in the plot edit this line in the HTML:

To change the area under the line opacity (0 to 1) edit this line:

The plot runs in the browser so if you exit or refresh the browser the data collection will start over.
The plot will auto scale the y-axis

1 Like