Widget with JS not properly loaded / displayed

Setup, Configuration and Use Widgets
,
1

I want tot visualize a string of values (“1,2,3,4,5”) in a line chart with chart.js within in a widget.
Attached widget code is basically doing the job when I go to settings → pages → page with included widget. (http://oh4:8080/settings/pages/layout/p_PVForecast) and activate run mode.

Zwischenablage01
Zwischenablage011069×516 65.3 KB

BUT:
when I directly open the page without going via “Settings” (http://oh4:8080/page/p_PVForecast) the widget/JS-lib seems not be properly loaded and initialized. Nothing is displayed.

Can somebody help?

Widget:Code:

uid: demo_js
tags: []
props:
  parameters:
    - context: item
      description: Array String Hourly Power values
      label: Hourly PV Power
      name: P_hourly
      required: true
      type: TEXT
  parameterGroups: []
timestamp: Apr 9, 2024, 7:49:12 AM
component: f7-card
config:
  title: Today's PV Power
slots:
  default:
    - component: script
      config:
        src: /static/libs/Chart.js
    - component: canvas
      config:
        id: myChart
        style: width:100%;max-width:600px
    - component: script
      config:
        content: "='new Chart(\"myChart\",{type:\"line\",options:{animation: false},data:{datasets:[{data: [' + items[props.P_hourly].state + ']}],labels: [\"00:00\",\"01:00\",\"02:00\",\"03:00\",\"04:00\",\"05:00\",\"06:00\",\"07:00\",\"08:00\",\"09:00\",\"10:00\",\"11:00\",\"12:00\",\"13:00\",\"14:00\",\"15:00\",\"16:00\",\"17:00\",\"18:00\",\"19:00\",\"20:00\",\"21:00\",\"22:00\",\"23:00\"]}, options:{scales:{ } }}); ' "
2

Unfortunately, not really.

The ability to to do this is a side-effect of the widget system not an intentional feature. So, it is not officially supported and there’s every likelihood that errors like this will crop up.

All I can say is that you will have to make extensive use of your browsers console window to see if there are any error or warning there. Off the top of my head, I’d say that possible problems include mixing http calls and https libraries and the style settings on your canvas element (not only are you missing a ; after the max-width property, but it’s entirely possible that the container is slightly different between your two tests so that width: 100% is different for the canvas in the two instances).