graph doesn't show in picture element?

[leotantantan]

Hi, In normal mode, I try this code, everything shows good.

         cards:
          - entity: weather.stclair_hourly
            show_main: true
            show_attributes: false
            type: custom:weather-chart-card

But when I put this in a picture-element, the graph doesn't showed, I can only see the attributes.

     cards:
      - type: picture-elements
        image: /local/ui/weather.png
        elements:
          - entity: weather.stclair_hourly
            show_main: true
            show_attributes: true
            style: |
              :host {
                left: 58.5%;
                top:  76%;
                width: 70%;
                height: 100%;
              }
    
              ha-card {
                height: 100%;
                border-radius: 1vw;
                font-size: 1.2vw !important;
              }
            type: custom:weather-chart-card

anyone can help?

[sekonicpr]

Same here, did you find a solution?

[leotantantan]

No, I haven’t, still waiting someone can help

[Slalamander]

I may be able to help, though I'm not fully sure what part of my elements card made the graph appear.

type: picture-elements
image: https://i1.wp.com/dawnchaser.net/wp-content/uploads/2021/04/1r3fn3-e1579990017466.jpg
theme: chromecast_header
elements:
  - type: custom:layout-card
    style:
      transform: scale(1,1)
      top: '-5%'
      left: 0%
      width: 100%
    layout_type: custom:grid-layout
    layout:
      grid-template-columns: 20% 50% 30%
      grid-template-rows: 80% 20%
      grid-template-areas: |
        "icon agenda weer"
        "icon agenda weer"
    width: 100vw
    height: 100vh
      - type: custom:layout-card
        card_margin: '-50px 0px 0px 0px'
        view_layout:
          grid-area: weer
        layout_type: custom:grid-layout
        cards:
          - type: custom:config-template-card
            view_layout:
              grid-area: graph
              padding: '-50px 0px 0px 0px'
            variables:
              COND: states['weather.buienradar']
              TEMP: states['weather.buienradar'].attributes.temperature
            entities:
              - weather.enschede_hourly
            card:
              type: custom:weather-chart-card
              entity: weather.city_hourly
              show_attributes: false
              show_main: false
              forecast:
                temperature1_color: rgba(181, 52, 58, 1)

I've omitted other elements for clarity, because, as you may be able to see, there's a lot of nested things in there ^^'
But this is how it looks on my dashboard:

I'd personally put my money on it being due to the nest in the config-template-card (I'm not even fully sure why it is within that card anymore though, to be honest). Hope this helps the both of you out!

[leotantantan]

Hi Slalamander,
Thanks for replying, I've tried put a config-template-card before weather-chart-card, like this :

views:
  - theme: 
    title: weather
    path: weather
    icon: mdi:weather-cloudy
    type: panel
    badges: []
    cards:
      - type: picture-elements
        image: /local/ui/天气预报.png
        elements:
          - type: custom:config-template-card
            view_layout:
              grid-area: graph
              padding: '0px 0px 0px 0px'
            entities:
              - weather.stclair_hourly
            variables:
              COND: states['weather.stclair_hourly']
              TEMP: states['weather.stclair_hourly'].attributes.temperature
            card:
              type: 'custom:weather-chart-card'
              entity: weather.stclair_hourly
              show_main: true
              show_attributes: false
              forecast:
                temperature1_color: rgba(181, 52, 58, 1)

But I still can't see the graph in my dashboard.

I've tried copy all of your code, then just replace the weather entity, I got an errors say :
Unable to parse YAML: YAMLException: bad indentation of a mapping entry (28:21) 25 | "icon agenda weer" 26 | width: 100vw 27 | height: 100vh 28 | - type: custom:layout-card --------------------------^ 29 | card_margin: '-50px 0px 0px 0px' 30 | view_layout:

I'm not good at coding actually, not sure what's wrong in that.

[Slalamander]

Ah sorry, I should've specified the other custom card I was using, which is the layout-card from thomasloven. In this case, I used a grid to be able to place the cards in my picture entity with more flexibility. It's throwing the error because in my code above, the width and height arguments should be indented one more space (so, aligned with grid-template-).

Anyhow, I decided to play around and find what apparently made it work in my setup. The following code gave was the most minimal version I managed to get working. Technically you can remove the transform: scale(1,1), however in this way it automatically centers in the picture elements.

type: picture-elements
image: >-
  https://i1.wp.com/dawnchaser.net/wp-content/uploads/2021/04/1r3fn3-e1579990017466.jpg
theme: alpha_card
elements:
  - type: custom:layout-card
    style:
      transform: scale(1,1)
      top: 0%
      width: 100%
    layout_type: custom:grid-layout
    cards:
    - type: custom:weather-chart-card
      entity: weather.buienradar
      show_main: true
      show_attributes: false
      forecast:
        temperature1_color: rgba(181, 52, 58, 1)

If you haven't installed it already, can you install the layout card and try this code to see if it works? The forecast chart is a little wonky regardless, for me it sometimes didn't show up after editing until I refreshed the page.
(Also I'm not good at coding in any way either ^^' just saw this issue when I wanted to open my own, and realised I did have it working. Turns out that's by a stroke of luck -or just me overcomplicating things-).

I hope you can get it working this way!

[leotantantan]

Hi Slalamander,
sorry to the late reply.

Thanks so much, it works !
I'm so happy with the result, but still don't know why 😂

Anyway, it finally works.

[sekonicpr]

Thank!!! It just work.