Dynamically select the number of hours or sensors to show on a history graph or mini graph card

Share your Projects!
42

thanks it’s good for me, now i have make it with date :

type: custom:config-template-card
entities:
  - input_datetime.energy_viewer
variables:
  DAY: |
    {
    var targetDate = states['input_datetime.energy_viewer'].state;
    var myDate = states['input_datetime.energy_viewer'].state.split("-");
    var newDate = new Date( myDate[2], myDate[1] - 1, myDate[0]);  
    var offSet = Math.ceil((Date.parse(targetDate) - Date.now()) / 86400000)
    var sign = offSet < 0 ? "" : "+";
     sign + offSet +  "d" ;
    };
  TITLE: >
    var targetDate = states['input_datetime.energy_viewer'].state

    const options = { weekday: 'long', year: 'numeric', month: 'long', day:
    'numeric' };

    new Date(targetDate).toLocaleDateString("fr", options);
card:
  style: |
    #header__title {
      text-align: center;
    }
  type: custom:apexcharts-card
44

i have also make make it with date and read data from influxdb if anyone needs it

type: vertical-stack
cards:
  - type: entities
    entities:
      - entity: input_datetime.chart_datetime
        name: Start Zeit
      - entity: input_select.chart_span
        name: Dauer
  - type: custom:config-template-card
    entities:
      - input_datetime.chart_datetime
      - input_select.chart_span
    variables:
      DAY: >
        {

        var targetDate = states['input_datetime.chart_datetime'].state;

        var targetDate_ms = new Date(targetDate); 

        var Difference_In_ms = Date.now() - targetDate_ms

        var seconds = Math.floor((Difference_In_ms / 1000) % 60)

        var minutes = Math.floor((Difference_In_ms / (1000 * 60)) % 60)

        var hours = Math.floor((Difference_In_ms / (1000 * 60 * 60)) % 24)

        var days = Math.floor((Difference_In_ms / (1000 * 60 * 60 * 24)))

        var result = days < 0 ? "-1d" :
        "-"+days+"d"+"-"+hours+"h"+"-"+minutes+"m";
         result ;
        };
      span: states['input_select.chart_span'].state
    card:
      type: custom:apexcharts-card
      graph_span: ${span}
      span:
        start: minute
        offset: ${DAY}
      yaxis:
        - id: first
          decimals: 0
        - id: second
          opposite: true
      series:
        - entity: input_text.dummy
          yaxis_id: first
          type: line
          extend_to: false
          group_by:
            func: avg
            duration: 30min
          data_generator: |
            var params = new URLSearchParams({
                db: "home_assistant",
                p: "influxdbpasswort",
                u: "influxdbuser",
                q: "SELECT \"value\" FROM \"W\" WHERE \"entity_id\" = 'momentanp' AND time >= '" + start.toISOString() + "'AND time <= '" + end.toISOString() + "'"
                });

            var myInit = { method: 'GET',
                            headers: {
                                'Accept': 'application/json',
                            },
                            mode: 'cors',
                            cache: 'default' 
            };

            const request = async () => {
                var result = [];
                const response = await fetch('http://192.168.178.57:8086/query?' + params, myInit)
                const json = await response.json();
                if (json["results"] && json["results"][0] && json["results"][0]["series"]  && json["results"][0]["series"][0] && json["results"][0]["series"][0]["values"]) {
                    for(var val of json["results"][0]["series"][0]["values"]) {
                        result.push([new Date(val[0]), val[1]]);
                    }
                } 
                return result;
            }
            return request();
      update_interval: 5m
1 Like
45

Hey and WOW, that really works superb! :slight_smile: Thank you for your efforts!! I have two Questions:

Could it be possible to show the config-template-card AFTER the Data?

Is it possible to use just one config-template-card for two other Data-Cards, but the second Data is “outside” the vertical stack?

Sorry to bother you - Im really new here…