Graph Component¶
You can display a graph of a sensor value(s) using this component. The states used for the graph are stored in memory at the time the sensor updates and will be lost when the device reboots.
Examples:
![../_images/display_rendering_graph.png](../_images/display_rendering_graph.png)
Graph component with options for grids, border and line-types.
graph:
# Show bare-minimum auto-ranged graph
- id: single_temperature_graph
sensor: my_temperature
duration: 1h
width: 151
height: 51
# Show multi-trace graph
- id: multi_temperature_graph
duration: 1h
x_grid: 10min
y_grid: 1.0 # degC/div
width: 151
height: 51
traces:
- sensor: my_inside_temperature
line_type: DASHED
line_thickness: 2
color: my_red
- sensor: my_outside_temperature
line_type: SOLID
continuous: true
line_thickness: 3
color: my_blue
- sensor: my_beer_temperature
line_type: DOTTED
line_thickness: 2
color: my_green
Configuration variables:¶
id (Required, ID): The ID with which you will be able to reference the graph later in your display code.
width (Required, int): The graph width in pixels
height (Required, int): The graph height in pixels
duration (Required, Time): The total graph history duration.
border (Optional, boolean): Specifies if a border will be drawn around the graph. Default is True.
x_grid (Optional): Specifies the time per division. If not specified, no vertical grid will be drawn.
y_grid (Optional, float): Specifies the number of units per division. If not specified, no horizontal grid will be drawn.
max_range (Optional): Specifies the maximum Y-axis range.
min_range (Optional): Specifies the minimum Y-axis range.
max_value (Optional): Specifies the maximum Y-axis value.
min_value (Optional): Specifies the minimum Y-axis value.
traces (Optional): Use this to specify more than a single trace.
Trace specific fields:
sensor (Optional, ID): The sensor value to plot
line_thickness (Optional): Defaults to 3
line_type (Optional): Specifies the plot line-type. Can be one of the following:
SOLID
,DOTTED
,DASHED
. Defaults toSOLID
.continuous (Optional): connects the individual points to make a continuous line. Defaults to
false
.color (Optional): Sets the color of the sensor trace.
And then later in code:
display:
- platform: ...
# ...
pages:
- id: page1
lambda: |-
pages:
- id: page1
lambda: |-
// Draw the graph at position [x=10,y=20]
it.graph(10, 20, id(single_temperature_graph));
- id: page2
lambda: |-
// Draw the graph at position [x=10,y=20]
it.graph(10, 20, id(multi_temperature_graph), my_yellow);
color:
- id: my_red
red: 100%
green: 0%
blue: 0%
- id: my_green
red: 0%
green: 100%
blue: 0%
- id: my_blue
red: 0%
green: 0%
blue: 100%
- id: my_yellow
red: 100%
green: 100%
blue: 0%
Note
Here are some things to note:
- Setting y_grid
will expand any specified range to the nearest multiple of grid spacings.
- Axis labels are currently not possible without manually placing them.
- The grid and border color is set with it.graph(), while the traces are defined separately.