Grabbing any data from Hubitat Maker API and storing data into JS Array in browser its possible to make a real time plot with the line incrementing on a set interval. It will start again from zero time if the browser is refreshed.
HTML Code:
2 Likes
How to Set-up Plot Custom tiles after copying “PlotGeneric” html from github to SharpTools, followed by creating PlotGeneric custom tile on dashboard.
Tile Editor Settings:
Except for the 3 main settings, API url, device ID, and attribute name, all other setting have defaults. Although you would want to fill them out.
Data Request Interval: How often do you want the plot to poll data in minutes. If your poll is faster then the devices native update then number might not change as frequently as your setting.
Chart Title: This is embedded into the top of the plot as shown in the image. Its separate from the Tile label which is also an option.
Display current value: This appends the latest value after the title along with the Units if entered. Its on by default, unchecked.
Y-Axis min/max: Set the plot lower and upper limits. Default is for temperature but you should change it.
Auto Scale Y-Axis: On by default (unchecked), this will increase or lower the Y-Axis upper and lower limits automatically if data crosses those limits
X-Axis Data interval span: This is how many data point to show in the horizontal axis. If you select 20 and your data request interval is 5min then the plot is 20 points wide and @100min. If the plot exceeds your set span, the plot will start to scroll keeping only the latest 20 points. The points that fall of the left side of the chart will be deleted from the array to save browser memory. You could set to 50 if you wanted to track that long assuming your browser stays up.
Notes:
-Depending on your Y-axis limits sometimes not all the horizontal gridlines show up.
-You can use the tile editor styles to change the back ground color and tile borders.
-Plot colors, fonts, line styles can be change inside the HTML if you know where to look.
-If you have a rectangular tile you will need to go into the HTML and change the width/height.
2 Likes
Plot Custom Tile HTML Import Link. Opens in Custom Tile editor, then hit save.