Bar Graphs that trend over time - OpenEPaperLink/Home_Assistant_Integration GitHub Wiki

This was designed to leverage the global variables of "Helpers" as a makeshift array with an automation to basically shift each value as it's updated with new information.

Other variables like the "ystart", "xstart", "width", "separation" and so forth and intended to make it easier to build these models out by updating the variable, rather than re-write the YAML each time.

Time trace automation updates

alias: Time linked update
description: |
  Every 3 hours, Update tracker, Write image
trigger: []
condition: []
action:
  - service: input_number.set_value
    data:
      value: "{{ states('input_number.graphvalue9') | int }}"
    target:
      entity_id: input_number.graphvalue10
  - service: input_number.set_value
    data:
      value: "{{ states('input_number.graphvalue8') | int }}"
    target:
      entity_id: input_number.graphvalue9
  - service: input_number.set_value
    data:
      value: "{{ states('input_number.graphvalue7') | int }}"
    target:
      entity_id: input_number.graphvalue8
  - service: input_number.set_value
    data:
      value: "{{ states('input_number.graphvalue6') | int }}"
    target:
      entity_id: input_number.graphvalue7
  - service: input_number.set_value
    data:
      value: "{{ states('input_number.graphvalue5') | int }}"
    target:
      entity_id: input_number.graphvalue6
  - service: input_number.set_value
    data:
      value: "{{ states('input_number.graphvalue4') | int }}"
    target:
      entity_id: input_number.graphvalue5
  - service: input_number.set_value
    data:
      value: "{{ states('input_number.graphvalue3') | int }}"
    target:
      entity_id: input_number.graphvalue4
  - service: input_number.set_value
    data:
      value: "{{ states('input_number.graphvalue2') | int }}"
    target:
      entity_id: input_number.graphvalue3
  - service: input_number.set_value
    data:
      value: "{{ states('input_number.graphvalue1') | int }}"
    target:
      entity_id: input_number.graphvalue2
  - service: input_number.set_value
    data:
      value: "{{ states('sensor.graphvalue0') | int }}"
    target:
      entity_id: input_number.graphvalue1

Line Graph - Done by setting (input_number.graph002dotsize) to the size of the dot you wish to see.

#LineGraph 10Pips  
    - type: text
      value: "Line Graph"
      font: "ppb.ttf"
      x: 20
      y: 50
      size: 10
      color: black 
      anchor: lm             
    #First Bar
    - type: line
      x_start: "{{ (states('input_number.graph002xstart') | int ) + 9*(states('input_number.graph002separation') | int ) }}"
      x_end: "{{ (states('input_number.graph002xstart') | int ) + 9*(states('input_number.graph002separation') | int ) }}"
      y_start: "{{ ((states('input_number.graph002ystart')) | int ) - ((states('input_number.graphvalue1')) | int ) }}"
      y_end: "{{ ((states('input_number.graph002ystart')) | int ) - ((states('input_number.graphvalue1')) | int ) + ((states('input_number.graph002dotsize')) | int )  }}"
      width: "{{ states('input_number.graph002width') | int }}"
      fill: black 
    #Second Bar
    - type: line
      x_start: "{{ (states('input_number.graph002xstart') | int ) + 8*(states('input_number.graph002separation') | int ) }}"
      x_end: "{{ (states('input_number.graph002xstart') | int ) + 8*(states('input_number.graph002separation') | int ) }}"
      y_start: "{{ ((states('input_number.graph002ystart')) | int ) - ((states('input_number.graphvalue2')) | int ) }}"
      y_end: "{{ ((states('input_number.graph002ystart')) | int ) - ((states('input_number.graphvalue2')) | int ) + ((states('input_number.graph002dotsize')) | int )  }}"
      width: "{{ states('input_number.graph002width') | int }}"
      fill: black 
    #Third Bar
    - type: line
      x_start: "{{ (states('input_number.graph002xstart') | int ) + 7*(states('input_number.graph002separation') | int ) }}"
      x_end: "{{ (states('input_number.graph002xstart') | int ) + 7*(states('input_number.graph002separation') | int ) }}"
      y_start: "{{ ((states('input_number.graph002ystart')) | int ) - ((states('input_number.graphvalue3')) | int ) }}"
      y_end: "{{ ((states('input_number.graph002ystart')) | int ) - ((states('input_number.graphvalue3')) | int ) + ((states('input_number.graph002dotsize')) | int )  }}"
      width: "{{ states('input_number.graph002width') | int }}"
      fill: black 
    #Fourth Bar
    - type: line
      x_start: "{{ (states('input_number.graph002xstart') | int ) + 6*(states('input_number.graph002separation') | int ) }}"
      x_end: "{{ (states('input_number.graph002xstart') | int ) + 6*(states('input_number.graph002separation') | int ) }}"
      y_start: "{{ ((states('input_number.graph002ystart')) | int ) - ((states('input_number.graphvalue4')) | int ) }}"
      y_end: "{{ ((states('input_number.graph002ystart')) | int ) - ((states('input_number.graphvalue4')) | int ) + ((states('input_number.graph002dotsize')) | int )  }}"
      width: "{{ states('input_number.graph002width') | int }}"
      fill: black 
    #Fifth Bar
    - type: line
      x_start: "{{ (states('input_number.graph002xstart') | int ) + 5*(states('input_number.graph002separation') | int ) }}"
      x_end: "{{ (states('input_number.graph002xstart') | int ) + 5*(states('input_number.graph002separation') | int ) }}"
      y_start: "{{ ((states('input_number.graph002ystart')) | int ) - ((states('input_number.graphvalue5')) | int ) }}"
      y_end: "{{ ((states('input_number.graph002ystart')) | int ) - ((states('input_number.graphvalue5')) | int ) + ((states('input_number.graph002dotsize')) | int )  }}"
      width: "{{ states('input_number.graph002width') | int }}"
      fill: black 
    #Sixth Bar
    - type: line
      x_start: "{{ (states('input_number.graph002xstart') | int ) + 4*(states('input_number.graph002separation') | int ) }}"
      x_end: "{{ (states('input_number.graph002xstart') | int ) + 4*(states('input_number.graph002separation') | int ) }}"
      y_start: "{{ ((states('input_number.graph002ystart')) | int ) - ((states('input_number.graphvalue6')) | int ) }}"
      y_end: "{{ ((states('input_number.graph002ystart')) | int ) - ((states('input_number.graphvalue6')) | int ) + ((states('input_number.graph002dotsize')) | int )  }}"
      width: "{{ states('input_number.graph002width') | int }}"
      fill: black 
    #Seventh Bar
    - type: line
      x_start: "{{ (states('input_number.graph002xstart') | int ) + 3*(states('input_number.graph002separation') | int ) }}"
      x_end: "{{ (states('input_number.graph002xstart') | int ) + 3*(states('input_number.graph002separation') | int ) }}"
      y_start: "{{ ((states('input_number.graph002ystart')) | int ) - ((states('input_number.graphvalue7')) | int ) }}"
      y_end: "{{ ((states('input_number.graph002ystart')) | int ) - ((states('input_number.graphvalue7')) | int ) + ((states('input_number.graph002dotsize')) | int )  }}"
      width: "{{ states('input_number.graph002width') | int }}"
      fill: black 
    #Eighth Bar
    - type: line
      x_start: "{{ (states('input_number.graph002xstart') | int ) + 2*(states('input_number.graph002separation') | int ) }}"
      x_end: "{{ (states('input_number.graph002xstart') | int ) + 2*(states('input_number.graph002separation') | int ) }}"
      y_start: "{{ ((states('input_number.graph002ystart')) | int ) - ((states('input_number.graphvalue8')) | int ) }}"
      y_end: "{{ ((states('input_number.graph002ystart')) | int ) - ((states('input_number.graphvalue8')) | int ) + ((states('input_number.graph002dotsize')) | int )  }}"
      width: "{{ states('input_number.graph002width') | int }}"
      fill: black 
    #Ninth Bar
    - type: line
      x_start: "{{ (states('input_number.graph002xstart') | int ) + (states('input_number.graph002separation') | int ) }}"
      x_end: "{{ (states('input_number.graph002xstart') | int ) + (states('input_number.graph002separation') | int ) }}"
      y_start: "{{ ((states('input_number.graph002ystart')) | int ) - ((states('input_number.graphvalue9')) | int ) }}"
      y_end: "{{ ((states('input_number.graph002ystart')) | int ) - ((states('input_number.graphvalue9')) | int ) + ((states('input_number.graph002dotsize')) | int )  }}"
      width: "{{ states('input_number.graph002width') | int }}"
      fill: black 
    #Tenth Bar
    - type: line
      x_start: "{{ states('input_number.graph002xstart') | int }}"
      x_end: "{{ states('input_number.graph002xstart') | int }}"
      y_start: "{{ ((states('input_number.graph002ystart')) | int ) - ((states('input_number.graphvalue10')) | int ) }}"
      y_end: "{{ ((states('input_number.graph002ystart')) | int ) - ((states('input_number.graphvalue10')) | int ) + ((states('input_number.graph002dotsize')) | int )  }}"
      width: "{{ states('input_number.graph002width') | int }}"
      fill: black       
      
#Line Graph Marker Lines
    - type: line
      x_start: 95
      x_end: 140
      y_start: 54
      y_end: 54
      width: 1
      fill: black  
    - type: line
      x_start: 95
      x_end: 95
      y_start: 54
      y_end: 59
      width: 1
      fill: black 
    - type: line
      x_start: 120
      x_end: 120
      y_start: 54
      y_end: 59
      width: 1
      fill: black
    - type: line
      x_start: 140
      x_end: 140
      y_start: 54
      y_end: 59
      width: 1
      fill: black  	  
      
#lineGraph Marker Line Labels
    - type: text
      value: "-10"
      font: "ppb.ttf"
      x: 95
      y: 67
      size: 8
      color: black 
      anchor: mm  
    - type: text
      value: "-5"
      font: "ppb.ttf"
      x: 120
      y: 67
      size: 8
      color: black 
      anchor: mm  
    - type: text
      value: "0"
      font: "ppb.ttf"
      x: 140
      y: 67
      size: 8
      color: black 
      anchor: mm

Bar Graph

#BarGraph 10Bars  
    - type: text
      value: "Bar Graph"
      font: "ppb.ttf"
      x: 20
      y: 80
      size: 10
      color: black 
      anchor: lm             
    #First Bar
    - type: line
      x_start: 140
      x_end: 140
      y_start: "{{ ((states('input_number.graph001ystart')) | int ) - ((states('input_number.graphvalue1')) | int ) }}"
      y_end: "{{ states('input_number.graph001ystart') | int }}"
      width: "{{ states('input_number.graph001width') | int }}"
      fill: black 
    #Second Bar
    - type: line
      x_start: 135
      x_end: 135
      y_start: "{{ ((states('input_number.graph001ystart')) | int ) - ((states('input_number.graphvalue2')) | int ) }}"
      y_end: "{{ states('input_number.graph001ystart') | int }}"
      width: "{{ states('input_number.graph001width') | int }}"
      fill: black 
    #Third Bar
    - type: line
      x_start: 130
      x_end: 130
      y_start: "{{ ((states('input_number.graph001ystart')) | int ) - ((states('input_number.graphvalue3')) | int ) }}"
      y_end: "{{ states('input_number.graph001ystart') | int }}"
      width: "{{ states('input_number.graph001width') | int }}"
      fill: black 
    #Fourth Bar
    - type: line
      x_start: 125
      x_end: 125
      y_start: "{{ ((states('input_number.graph001ystart')) | int ) - ((states('input_number.graphvalue4')) | int ) }}"
      y_end: "{{ states('input_number.graph001ystart') | int }}"
      width: "{{ states('input_number.graph001width') | int }}"
      fill: black 
    #Fifth Bar
    - type: line
      x_start: 120
      x_end: 120
      y_start: "{{ ((states('input_number.graph001ystart')) | int ) - ((states('input_number.graphvalue5')) | int ) }}"
      y_end: "{{ states('input_number.graph001ystart') | int }}"
      width: "{{ states('input_number.graph001width') | int }}"
      fill: black 
    #Sixth Bar
    - type: line
      x_start: 115
      x_end: 115
      y_start: "{{ ((states('input_number.graph001ystart')) | int ) - ((states('input_number.graphvalue6')) | int ) }}"
      y_end: "{{ states('input_number.graph001ystart') | int }}"
      width: "{{ states('input_number.graph001width') | int }}"
      fill: black 
    #Seventh Bar
    - type: line
      x_start: 110
      x_end: 110
      y_start: "{{ ((states('input_number.graph001ystart')) | int ) - ((states('input_number.graphvalue7')) | int ) }}"
      y_end: "{{ states('input_number.graph001ystart') | int }}"
      width: "{{ states('input_number.graph001width') | int }}"
      fill: black 
    #Eighth Bar
    - type: line
      x_start: 105
      x_end: 105
      y_start: "{{ ((states('input_number.graph001ystart')) | int ) - ((states('input_number.graphvalue8')) | int ) }}"
      y_end: "{{ states('input_number.graph001ystart') | int }}"
      width: "{{ states('input_number.graph001width') | int }}"
      fill: black 
    #Ninth Bar
    - type: line
      x_start: 100
      x_end: 100
      y_start: "{{ ((states('input_number.graph001ystart')) | int ) - ((states('input_number.graphvalue9')) | int ) }}"
      y_end: "{{ states('input_number.graph001ystart') | int }}"
      width: "{{ states('input_number.graph001width') | int }}"
      fill: black 
    #Tenth Bar
    - type: line
      x_start: 95
      x_end: 95
      y_start: "{{ ((states('input_number.graph001ystart')) | int ) - ((states('input_number.graphvalue10')) | int ) }}"
      y_end: "{{ states('input_number.graph001ystart') | int }}"
      width: "{{ states('input_number.graph001width') | int }}"
      fill: black       
      
    #BarGraph Marker Lines
    - type: line
      x_start: 95
      x_end: 140
      y_start: 84
      y_end: 84
      width: 1
      fill: black  
    - type: line
      x_start: 95
      x_end: 95
      y_start: 84
      y_end: 89
      width: 1
      fill: black 
    - type: line
      x_start: 120
      x_end: 120
      y_start: 84
      y_end: 89
      width: 1
      fill: black
    - type: line
      x_start: 140
      x_end: 140
      y_start: 84
      y_end: 89
      width: 1
      fill: black  	  
    #BarGraph Marker Line Labels
    - type: text
      value: "-10"
      font: "ppb.ttf"
      x: 95
      y: 97
      size: 8
      color: black 
      anchor: mm  
    - type: text
      value: "-5"
      font: "ppb.ttf"
      x: 120
      y: 97
      size: 8
      color: black 
      anchor: mm  
    - type: text
      value: "0"
      font: "ppb.ttf"
      x: 140
      y: 97
      size: 8
      color: black 
      anchor: mm  	 

Widebar Graph - Done by setting the width of the bar (input_number.graph003width) equivalent to the (input_number.graph003separation)


#WideBarGraph 10Bars  
    - type: text
      value: "WideBarGraph"
      font: "ppb.ttf"
      x: 1
      y: 110
      size: 10
      color: black 
      anchor: lm             
    #First Bar
    - type: line
      x_start: 140
      x_end: 140
      y_start: "{{ ((states('input_number.graph003ystart')) | int ) - ((states('input_number.graphvalue1')) | int ) }}"
      y_end: "{{ states('input_number.graph003ystart') | int }}"
      width: "{{ states('input_number.graph003width') | int }}"
      fill: black 
    #Second Bar
    - type: line
      x_start: 135
      x_end: 135
      y_start: "{{ ((states('input_number.graph003ystart')) | int ) - ((states('input_number.graphvalue2')) | int ) }}"
      y_end: "{{ states('input_number.graph003ystart') | int }}"
      width: "{{ states('input_number.graph003width') | int }}"
      fill: black 
    #Third Bar
    - type: line
      x_start: 130
      x_end: 130
      y_start: "{{ ((states('input_number.graph003ystart')) | int ) - ((states('input_number.graphvalue3')) | int ) }}"
      y_end: "{{ states('input_number.graph003ystart') | int }}"
      width: "{{ states('input_number.graph003width') | int }}"
      fill: black 
    #Fourth Bar
    - type: line
      x_start: 125
      x_end: 125
      y_start: "{{ ((states('input_number.graph003ystart')) | int ) - ((states('input_number.graphvalue4')) | int ) }}"
      y_end: "{{ states('input_number.graph003ystart') | int }}"
      width: "{{ states('input_number.graph003width') | int }}"
      fill: black 
    #Fifth Bar
    - type: line
      x_start: 120
      x_end: 120
      y_start: "{{ ((states('input_number.graph003ystart')) | int ) - ((states('input_number.graphvalue5')) | int ) }}"
      y_end: "{{ states('input_number.graph003ystart') | int }}"
      width: "{{ states('input_number.graph003width') | int }}"
      fill: black 
    #Sixth Bar
    - type: line
      x_start: 115
      x_end: 115
      y_start: "{{ ((states('input_number.graph003ystart')) | int ) - ((states('input_number.graphvalue6')) | int ) }}"
      y_end: "{{ states('input_number.graph003ystart') | int }}"
      width: "{{ states('input_number.graph003width') | int }}"
      fill: black 
    #Seventh Bar
    - type: line
      x_start: 110
      x_end: 110
      y_start: "{{ ((states('input_number.graph003ystart')) | int ) - ((states('input_number.graphvalue7')) | int ) }}"
      y_end: "{{ states('input_number.graph003ystart') | int }}"
      width: "{{ states('input_number.graph003width') | int }}"
      fill: black 
    #Eighth Bar
    - type: line
      x_start: 105
      x_end: 105
      y_start: "{{ ((states('input_number.graph003ystart')) | int ) - ((states('input_number.graphvalue8')) | int ) }}"
      y_end: "{{ states('input_number.graph003ystart') | int }}"
      width: "{{ states('input_number.graph003width') | int }}"
      fill: black 
    #Ninth Bar
    - type: line
      x_start: 100
      x_end: 100
      y_start: "{{ ((states('input_number.graph003ystart')) | int ) - ((states('input_number.graphvalue9')) | int ) }}"
      y_end: "{{ states('input_number.graph003ystart') | int }}"
      width: "{{ states('input_number.graph003width') | int }}"
      fill: black 
    #Tenth Bar
    - type: line
      x_start: 95
      x_end: 95
      y_start: "{{ ((states('input_number.graph003ystart')) | int ) - ((states('input_number.graphvalue10')) | int ) }}"
      y_end: "{{ states('input_number.graph003ystart') | int }}"
      width: "{{ states('input_number.graph003width') | int }}"
      fill: black       
      
    #WideBarGraph Marker Lines
    - type: line
      x_start: 95
      x_end: 140
      y_start: 114
      y_end: 114
      width: 1
      fill: black  
    - type: line
      x_start: 95
      x_end: 95
      y_start: 114
      y_end: 119
      width: 1
      fill: black 
    - type: line
      x_start: 120
      x_end: 120
      y_start: 114
      y_end: 119
      width: 1
      fill: black
    - type: line
      x_start: 140
      x_end: 140
      y_start: 114
      y_end: 119
      width: 1
      fill: black  	  
    #WideBarGraph Marker Line Labels
    - type: text
      value: "-10"
      font: "ppb.ttf"
      x: 95
      y: 127
      size: 8
      color: black 
      anchor: mm  
    - type: text
      value: "-5"
      font: "ppb.ttf"
      x: 120
      y: 127
      size: 8
      color: black 
      anchor: mm  
    - type: text
      value: "0"
      font: "ppb.ttf"
      x: 140
      y: 127
      size: 8
      color: black 
      anchor: mm  	 

Full TestBed

#CurrentGraphBuild
service: open_epaper_link.drawcustom
target:
  entity_id:
    - open_epaper_link.0000021d314b3415
data:
  background: white
  rotate: 0
  payload:
    - type: icon
      value: chart-bar
      x: 0
      "y": 0
      size: 30
      color: black
    - type: text
      value: Graph Testbed
      font: ppb.ttf
      x: 89
      "y": 8
      size: 15
      color: black
      anchor: mm
    - type: line
      x_start: 30
      x_end: 152
      y_start: 15
      y_end: 15
      width: 1
      fill: black
    - type: text
      value: " Last Update {{ states('sensor.time') | string }}"
      font: ppb.ttf
      x: 89
      "y": 23
      size: 10
      color: red
      anchor: mm
    - type: line
      x_start: 0
      x_end: 152
      y_start: 31
      y_end: 31
      width: 1
      fill: black

#LineGraph 10Pips  
    - type: text
      value: "Line Graph"
      font: "ppb.ttf"
      x: 20
      y: 50
      size: 10
      color: black 
      anchor: lm             
    #First Bar
    - type: line
      x_start: "{{ (states('input_number.graph002xstart') | int ) + 9*(states('input_number.graph002separation') | int ) }}"
      x_end: "{{ (states('input_number.graph002xstart') | int ) + 9*(states('input_number.graph002separation') | int ) }}"
      y_start: "{{ ((states('input_number.graph002ystart')) | int ) - ((states('input_number.graphvalue1')) | int ) }}"
      y_end: "{{ ((states('input_number.graph002ystart')) | int ) - ((states('input_number.graphvalue1')) | int ) + ((states('input_number.graph002dotsize')) | int )  }}"
      width: "{{ states('input_number.graph002width') | int }}"
      fill: black 
    #Second Bar
    - type: line
      x_start: "{{ (states('input_number.graph002xstart') | int ) + 8*(states('input_number.graph002separation') | int ) }}"
      x_end: "{{ (states('input_number.graph002xstart') | int ) + 8*(states('input_number.graph002separation') | int ) }}"
      y_start: "{{ ((states('input_number.graph002ystart')) | int ) - ((states('input_number.graphvalue2')) | int ) }}"
      y_end: "{{ ((states('input_number.graph002ystart')) | int ) - ((states('input_number.graphvalue2')) | int ) + ((states('input_number.graph002dotsize')) | int )  }}"
      width: "{{ states('input_number.graph002width') | int }}"
      fill: black 
    #Third Bar
    - type: line
      x_start: "{{ (states('input_number.graph002xstart') | int ) + 7*(states('input_number.graph002separation') | int ) }}"
      x_end: "{{ (states('input_number.graph002xstart') | int ) + 7*(states('input_number.graph002separation') | int ) }}"
      y_start: "{{ ((states('input_number.graph002ystart')) | int ) - ((states('input_number.graphvalue3')) | int ) }}"
      y_end: "{{ ((states('input_number.graph002ystart')) | int ) - ((states('input_number.graphvalue3')) | int ) + ((states('input_number.graph002dotsize')) | int )  }}"
      width: "{{ states('input_number.graph002width') | int }}"
      fill: black 
    #Fourth Bar
    - type: line
      x_start: "{{ (states('input_number.graph002xstart') | int ) + 6*(states('input_number.graph002separation') | int ) }}"
      x_end: "{{ (states('input_number.graph002xstart') | int ) + 6*(states('input_number.graph002separation') | int ) }}"
      y_start: "{{ ((states('input_number.graph002ystart')) | int ) - ((states('input_number.graphvalue4')) | int ) }}"
      y_end: "{{ ((states('input_number.graph002ystart')) | int ) - ((states('input_number.graphvalue4')) | int ) + ((states('input_number.graph002dotsize')) | int )  }}"
      width: "{{ states('input_number.graph002width') | int }}"
      fill: black 
    #Fifth Bar
    - type: line
      x_start: "{{ (states('input_number.graph002xstart') | int ) + 5*(states('input_number.graph002separation') | int ) }}"
      x_end: "{{ (states('input_number.graph002xstart') | int ) + 5*(states('input_number.graph002separation') | int ) }}"
      y_start: "{{ ((states('input_number.graph002ystart')) | int ) - ((states('input_number.graphvalue5')) | int ) }}"
      y_end: "{{ ((states('input_number.graph002ystart')) | int ) - ((states('input_number.graphvalue5')) | int ) + ((states('input_number.graph002dotsize')) | int )  }}"
      width: "{{ states('input_number.graph002width') | int }}"
      fill: black 
    #Sixth Bar
    - type: line
      x_start: "{{ (states('input_number.graph002xstart') | int ) + 4*(states('input_number.graph002separation') | int ) }}"
      x_end: "{{ (states('input_number.graph002xstart') | int ) + 4*(states('input_number.graph002separation') | int ) }}"
      y_start: "{{ ((states('input_number.graph002ystart')) | int ) - ((states('input_number.graphvalue6')) | int ) }}"
      y_end: "{{ ((states('input_number.graph002ystart')) | int ) - ((states('input_number.graphvalue6')) | int ) + ((states('input_number.graph002dotsize')) | int )  }}"
      width: "{{ states('input_number.graph002width') | int }}"
      fill: black 
    #Seventh Bar
    - type: line
      x_start: "{{ (states('input_number.graph002xstart') | int ) + 3*(states('input_number.graph002separation') | int ) }}"
      x_end: "{{ (states('input_number.graph002xstart') | int ) + 3*(states('input_number.graph002separation') | int ) }}"
      y_start: "{{ ((states('input_number.graph002ystart')) | int ) - ((states('input_number.graphvalue7')) | int ) }}"
      y_end: "{{ ((states('input_number.graph002ystart')) | int ) - ((states('input_number.graphvalue7')) | int ) + ((states('input_number.graph002dotsize')) | int )  }}"
      width: "{{ states('input_number.graph002width') | int }}"
      fill: black 
    #Eighth Bar
    - type: line
      x_start: "{{ (states('input_number.graph002xstart') | int ) + 2*(states('input_number.graph002separation') | int ) }}"
      x_end: "{{ (states('input_number.graph002xstart') | int ) + 2*(states('input_number.graph002separation') | int ) }}"
      y_start: "{{ ((states('input_number.graph002ystart')) | int ) - ((states('input_number.graphvalue8')) | int ) }}"
      y_end: "{{ ((states('input_number.graph002ystart')) | int ) - ((states('input_number.graphvalue8')) | int ) + ((states('input_number.graph002dotsize')) | int )  }}"
      width: "{{ states('input_number.graph002width') | int }}"
      fill: black 
    #Ninth Bar
    - type: line
      x_start: "{{ (states('input_number.graph002xstart') | int ) + (states('input_number.graph002separation') | int ) }}"
      x_end: "{{ (states('input_number.graph002xstart') | int ) + (states('input_number.graph002separation') | int ) }}"
      y_start: "{{ ((states('input_number.graph002ystart')) | int ) - ((states('input_number.graphvalue9')) | int ) }}"
      y_end: "{{ ((states('input_number.graph002ystart')) | int ) - ((states('input_number.graphvalue9')) | int ) + ((states('input_number.graph002dotsize')) | int )  }}"
      width: "{{ states('input_number.graph002width') | int }}"
      fill: black 
    #Tenth Bar
    - type: line
      x_start: "{{ states('input_number.graph002xstart') | int }}"
      x_end: "{{ states('input_number.graph002xstart') | int }}"
      y_start: "{{ ((states('input_number.graph002ystart')) | int ) - ((states('input_number.graphvalue10')) | int ) }}"
      y_end: "{{ ((states('input_number.graph002ystart')) | int ) - ((states('input_number.graphvalue10')) | int ) + ((states('input_number.graph002dotsize')) | int )  }}"
      width: "{{ states('input_number.graph002width') | int }}"
      fill: black       
      
#Line Graph Marker Lines
    - type: line
      x_start: 95
      x_end: 140
      y_start: 54
      y_end: 54
      width: 1
      fill: black  
    - type: line
      x_start: 95
      x_end: 95
      y_start: 54
      y_end: 59
      width: 1
      fill: black 
    - type: line
      x_start: 120
      x_end: 120
      y_start: 54
      y_end: 59
      width: 1
      fill: black
    - type: line
      x_start: 140
      x_end: 140
      y_start: 54
      y_end: 59
      width: 1
      fill: black  	  
      
#lineGraph Marker Line Labels
    - type: text
      value: "-10"
      font: "ppb.ttf"
      x: 95
      y: 67
      size: 8
      color: black 
      anchor: mm  
    - type: text
      value: "-5"
      font: "ppb.ttf"
      x: 120
      y: 67
      size: 8
      color: black 
      anchor: mm  
    - type: text
      value: "0"
      font: "ppb.ttf"
      x: 140
      y: 67
      size: 8
      color: black 
      anchor: mm  	 
      
#BarGraph 10Bars  
    - type: text
      value: "Bar Graph"
      font: "ppb.ttf"
      x: 20
      y: 80
      size: 10
      color: black 
      anchor: lm             
    #First Bar
    - type: line
      x_start: 140
      x_end: 140
      y_start: "{{ ((states('input_number.graph001ystart')) | int ) - ((states('input_number.graphvalue1')) | int ) }}"
      y_end: "{{ states('input_number.graph001ystart') | int }}"
      width: "{{ states('input_number.graph001width') | int }}"
      fill: black 
    #Second Bar
    - type: line
      x_start: 135
      x_end: 135
      y_start: "{{ ((states('input_number.graph001ystart')) | int ) - ((states('input_number.graphvalue2')) | int ) }}"
      y_end: "{{ states('input_number.graph001ystart') | int }}"
      width: "{{ states('input_number.graph001width') | int }}"
      fill: black 
    #Third Bar
    - type: line
      x_start: 130
      x_end: 130
      y_start: "{{ ((states('input_number.graph001ystart')) | int ) - ((states('input_number.graphvalue3')) | int ) }}"
      y_end: "{{ states('input_number.graph001ystart') | int }}"
      width: "{{ states('input_number.graph001width') | int }}"
      fill: black 
    #Fourth Bar
    - type: line
      x_start: 125
      x_end: 125
      y_start: "{{ ((states('input_number.graph001ystart')) | int ) - ((states('input_number.graphvalue4')) | int ) }}"
      y_end: "{{ states('input_number.graph001ystart') | int }}"
      width: "{{ states('input_number.graph001width') | int }}"
      fill: black 
    #Fifth Bar
    - type: line
      x_start: 120
      x_end: 120
      y_start: "{{ ((states('input_number.graph001ystart')) | int ) - ((states('input_number.graphvalue5')) | int ) }}"
      y_end: "{{ states('input_number.graph001ystart') | int }}"
      width: "{{ states('input_number.graph001width') | int }}"
      fill: black 
    #Sixth Bar
    - type: line
      x_start: 115
      x_end: 115
      y_start: "{{ ((states('input_number.graph001ystart')) | int ) - ((states('input_number.graphvalue6')) | int ) }}"
      y_end: "{{ states('input_number.graph001ystart') | int }}"
      width: "{{ states('input_number.graph001width') | int }}"
      fill: black 
    #Seventh Bar
    - type: line
      x_start: 110
      x_end: 110
      y_start: "{{ ((states('input_number.graph001ystart')) | int ) - ((states('input_number.graphvalue7')) | int ) }}"
      y_end: "{{ states('input_number.graph001ystart') | int }}"
      width: "{{ states('input_number.graph001width') | int }}"
      fill: black 
    #Eighth Bar
    - type: line
      x_start: 105
      x_end: 105
      y_start: "{{ ((states('input_number.graph001ystart')) | int ) - ((states('input_number.graphvalue8')) | int ) }}"
      y_end: "{{ states('input_number.graph001ystart') | int }}"
      width: "{{ states('input_number.graph001width') | int }}"
      fill: black 
    #Ninth Bar
    - type: line
      x_start: 100
      x_end: 100
      y_start: "{{ ((states('input_number.graph001ystart')) | int ) - ((states('input_number.graphvalue9')) | int ) }}"
      y_end: "{{ states('input_number.graph001ystart') | int }}"
      width: "{{ states('input_number.graph001width') | int }}"
      fill: black 
    #Tenth Bar
    - type: line
      x_start: 95
      x_end: 95
      y_start: "{{ ((states('input_number.graph001ystart')) | int ) - ((states('input_number.graphvalue10')) | int ) }}"
      y_end: "{{ states('input_number.graph001ystart') | int }}"
      width: "{{ states('input_number.graph001width') | int }}"
      fill: black       
      
    #BarGraph Marker Lines
    - type: line
      x_start: 95
      x_end: 140
      y_start: 84
      y_end: 84
      width: 1
      fill: black  
    - type: line
      x_start: 95
      x_end: 95
      y_start: 84
      y_end: 89
      width: 1
      fill: black 
    - type: line
      x_start: 120
      x_end: 120
      y_start: 84
      y_end: 89
      width: 1
      fill: black
    - type: line
      x_start: 140
      x_end: 140
      y_start: 84
      y_end: 89
      width: 1
      fill: black  	  
    #BarGraph Marker Line Labels
    - type: text
      value: "-10"
      font: "ppb.ttf"
      x: 95
      y: 97
      size: 8
      color: black 
      anchor: mm  
    - type: text
      value: "-5"
      font: "ppb.ttf"
      x: 120
      y: 97
      size: 8
      color: black 
      anchor: mm  
    - type: text
      value: "0"
      font: "ppb.ttf"
      x: 140
      y: 97
      size: 8
      color: black 
      anchor: mm  	 
      
#WideBarGraph 10Bars  
    - type: text
      value: "WideBarGraph"
      font: "ppb.ttf"
      x: 1
      y: 110
      size: 10
      color: black 
      anchor: lm             
    #First Bar
    - type: line
      x_start: 140
      x_end: 140
      y_start: "{{ ((states('input_number.graph003ystart')) | int ) - ((states('input_number.graphvalue1')) | int ) }}"
      y_end: "{{ states('input_number.graph003ystart') | int }}"
      width: "{{ states('input_number.graph003width') | int }}"
      fill: black 
    #Second Bar
    - type: line
      x_start: 135
      x_end: 135
      y_start: "{{ ((states('input_number.graph003ystart')) | int ) - ((states('input_number.graphvalue2')) | int ) }}"
      y_end: "{{ states('input_number.graph003ystart') | int }}"
      width: "{{ states('input_number.graph003width') | int }}"
      fill: black 
    #Third Bar
    - type: line
      x_start: 130
      x_end: 130
      y_start: "{{ ((states('input_number.graph003ystart')) | int ) - ((states('input_number.graphvalue3')) | int ) }}"
      y_end: "{{ states('input_number.graph003ystart') | int }}"
      width: "{{ states('input_number.graph003width') | int }}"
      fill: black 
    #Fourth Bar
    - type: line
      x_start: 125
      x_end: 125
      y_start: "{{ ((states('input_number.graph003ystart')) | int ) - ((states('input_number.graphvalue4')) | int ) }}"
      y_end: "{{ states('input_number.graph003ystart') | int }}"
      width: "{{ states('input_number.graph003width') | int }}"
      fill: black 
    #Fifth Bar
    - type: line
      x_start: 120
      x_end: 120
      y_start: "{{ ((states('input_number.graph003ystart')) | int ) - ((states('input_number.graphvalue5')) | int ) }}"
      y_end: "{{ states('input_number.graph003ystart') | int }}"
      width: "{{ states('input_number.graph003width') | int }}"
      fill: black 
    #Sixth Bar
    - type: line
      x_start: 115
      x_end: 115
      y_start: "{{ ((states('input_number.graph003ystart')) | int ) - ((states('input_number.graphvalue6')) | int ) }}"
      y_end: "{{ states('input_number.graph003ystart') | int }}"
      width: "{{ states('input_number.graph003width') | int }}"
      fill: black 
    #Seventh Bar
    - type: line
      x_start: 110
      x_end: 110
      y_start: "{{ ((states('input_number.graph003ystart')) | int ) - ((states('input_number.graphvalue7')) | int ) }}"
      y_end: "{{ states('input_number.graph003ystart') | int }}"
      width: "{{ states('input_number.graph003width') | int }}"
      fill: black 
    #Eighth Bar
    - type: line
      x_start: 105
      x_end: 105
      y_start: "{{ ((states('input_number.graph003ystart')) | int ) - ((states('input_number.graphvalue8')) | int ) }}"
      y_end: "{{ states('input_number.graph003ystart') | int }}"
      width: "{{ states('input_number.graph003width') | int }}"
      fill: black 
    #Ninth Bar
    - type: line
      x_start: 100
      x_end: 100
      y_start: "{{ ((states('input_number.graph003ystart')) | int ) - ((states('input_number.graphvalue9')) | int ) }}"
      y_end: "{{ states('input_number.graph003ystart') | int }}"
      width: "{{ states('input_number.graph003width') | int }}"
      fill: black 
    #Tenth Bar
    - type: line
      x_start: 95
      x_end: 95
      y_start: "{{ ((states('input_number.graph003ystart')) | int ) - ((states('input_number.graphvalue10')) | int ) }}"
      y_end: "{{ states('input_number.graph003ystart') | int }}"
      width: "{{ states('input_number.graph003width') | int }}"
      fill: black       
      
    #WideBarGraph Marker Lines
    - type: line
      x_start: 95
      x_end: 140
      y_start: 114
      y_end: 114
      width: 1
      fill: black  
    - type: line
      x_start: 95
      x_end: 95
      y_start: 114
      y_end: 119
      width: 1
      fill: black 
    - type: line
      x_start: 120
      x_end: 120
      y_start: 114
      y_end: 119
      width: 1
      fill: black
    - type: line
      x_start: 140
      x_end: 140
      y_start: 114
      y_end: 119
      width: 1
      fill: black  	  
    #WideBarGraph Marker Line Labels
    - type: text
      value: "-10"
      font: "ppb.ttf"
      x: 95
      y: 127
      size: 8
      color: black 
      anchor: mm  
    - type: text
      value: "-5"
      font: "ppb.ttf"
      x: 120
      y: 127
      size: 8
      color: black 
      anchor: mm  
    - type: text
      value: "0"
      font: "ppb.ttf"
      x: 140
      y: 127
      size: 8
      color: black 
      anchor: mm