5.1.0.M3: Charts load slowly

[michaeljoos]

@michaeljoos

It looks like there is a performance issue for charts with many items. E.g. I have a page with Grid 1 (50%) and Grid 2 (50%) with total 7 items and it takes 10s to show the graph.

Update to the above feedback. This is a page that needs about 8s to load:

config:
icon: f7:thermometer
label: Wärmepumpe
options:
color:
- red
- salmon
- red
- khaki
- white
- blue
- grey
order: “”
period: 4h
sidebar: false
slots:
dataZoom:
- component: oh-chart-datazoom
config:
show: true
type: inside
grid:
- component: oh-chart-grid
config:
bottom: 50%
containLabel: false
show: false
top: “120”
- component: oh-chart-grid
config:
bottom: 10%
top: 62%
legend:
- component: oh-chart-legend
config:
bottom: “10”
left: center
orient: horizontal
show: true
series:
- component: oh-time-series
config:
gridIndex: 0
item: Shelly_Plus_1_Vorlauf
markPoint:
data:
- name: min
type: min
- name: max
type: max
name: Vorlauf
type: line
xAxisIndex: 0
yAxisIndex: 0
- component: oh-time-series
config:
gridIndex: 0
item: Shelly_Plus_1_Ruecklauf
markPoint:
data:
- name: min
type: min
- name: max
type: max
name: Rücklauf
type: line
xAxisIndex: 0
yAxisIndex: 0
- component: oh-time-series
config:
areaStyle:
opacity: 0.2
gridIndex: 0
item: Vorlauf_Average24h
lineStyle:
opacity: 0.5
type: dotted
name: Ø Vorlauf 24h
type: line
xAxisIndex: 0
yAxisIndex: 0
- component: oh-time-series
config:
areaStyle:
opacity: 0.2
gridIndex: 0
item: Ruecklauf_Average24h
lineStyle:
opacity: 0.5
type: dotted
name: Ø Rücklauf 24h
type: line
xAxisIndex: 0
yAxisIndex: 0
- component: oh-time-series
config:
gridIndex: 1
item: Shelly_Plus_1_Temp_Diff
markPoint:
data:
- name: min
type: min
- name: max
type: max
name: Spreizung
type: line
xAxisIndex: 1
yAxisIndex: 1
- component: oh-time-series
config:
gridIndex: 1
item: Netatmo_Aussen_Temperatur
markPoint:
data:
- name: min
type: min
- name: max
type: max
name: Aussentemperatur
type: line
xAxisIndex: 1
yAxisIndex: 2
- component: oh-time-series
config:
gridIndex: 0
item: Shelly_EM3_Kumulierter_Leistung
markLine:
data:
- type: average
name: Leistung
type: bar
xAxisIndex: 0
yAxisIndex: 3
title:
- component: oh-chart-title
config:
left: center
show: false
text: Temperaturkurven
top: “55”
toolbox:
- component: oh-chart-toolbox
config:
presetFeatures:
- saveAsImage
- restore
- dataZoom
show: true
top: “52”
tooltip:
- component: oh-chart-tooltip
config:
orient: horizontal
show: true
visualMap: [ ]
xAxis:
- component: oh-time-axis
config:
gridIndex: 0
- component: oh-time-axis
config:
gridIndex: 1
yAxis:
- component: oh-value-axis
config:
gridIndex: 0
name: Temp (°C)
scale: true
- component: oh-value-axis
config:
gridIndex: 1
name: Spreizung (K)
- component: oh-value-axis
config:
gridIndex: 1
name: Temp (°C)
- component: oh-value-axis
config:
gridIndex: 0
name: W

No problems in 5.0.x
Persistence service is rrd4j

[Tuny (Sebastian)]

Same here. Loading times are way higher than with M2. I am using influxdb v1.

[florian-h05 (Florian H.)]

Hi all,
I have split the charts to a new topic.

Can you please check what’s going on in the network tab of the browser developer tools when opening the charts that load slowly?
Look out for calls to /persistence/items/{itemname} and check how quickly they are completed.

We need to check whether the issue is rendering charts or reading persistence.

[michaeljoos]

This is what I get when I load the page and filter to “persistence”:

This to compare with a chart with only 1 item:

[florian-h05 (Florian H.)]

The slow loading seems to be something different than a UI issue.
Especially Shelly EM3 Kumulierte Leistung seems slow to load, how does this behave as a single series in a dedicated chart?

[michaeljoos]

@florian-h05

how does this behave as a single series in a dedicated chart?

No performance issues with only this single item. But why does it load twice? Why in above screenshot we have 260 requests for 7 items?

Filtered to this specific item. Why do we have 45 requests for same item?

Same for another item in same page:

In OH 5.0.3:

Every item only loaded once

[Tuny (Sebastian)]

s

Same here. The ‘simple’ chart took 14 sec to load.

config:
  chartType: day
  icon: f7:thermometer
  label: Wärmepumpe
  order: "1"
  period: D
  sidebar: false
  visibleTo:
    - role:administrator
slots:
  dataZoom:
    - component: oh-chart-datazoom
      config:
        type: inside
  grid:
    - component: oh-chart-grid
      config:
        containLabel: false
        includeLabels: true
        show: false
    - component: oh-chart-grid
      config: {}
  legend:
    - component: oh-chart-legend
      config:
        bottom: 3
        type: scroll
  series:
    - component: oh-time-series
      config:
        gridIndex: 0
        item: Vie_AussenTemp
        name: T° Draussen
        type: line
        xAxisIndex: 0
        yAxisIndex: 0
    - component: oh-time-series
      config:
        gridIndex: 0
        item: Vie_RuecklaufTemp
        name: T° Rücklauf
        type: line
        xAxisIndex: 0
        yAxisIndex: 0
    - component: oh-time-series
      config:
        gridIndex: 0
        item: Vie_VorlaufTemp
        name: T° Vorlauf
        type: line
        xAxisIndex: 0
        yAxisIndex: 0
    - component: oh-time-series
      config:
        areaStyle:
          opacity: 0.2
        gridIndex: 0
        item: Vie_Verdichter_NUM
        name: Verdichter
        type: line
        xAxisIndex: 0
        yAxisIndex: 1
    - component: oh-time-series
      config:
        gridIndex: 0
        item: Vie_WarmwasserTemp
        name: T° Warmwasser
        type: line
        xAxisIndex: 0
        yAxisIndex: 0
    - component: oh-time-series
      config:
        areaStyle:
          opacity: 0.2
        gridIndex: 0
        item: Vie_Frostschutz_NUM
        name: Frostschutz
        type: line
        xAxisIndex: 0
        yAxisIndex: 1
    - component: oh-time-series
      config:
        gridIndex: 0
        item: Vie_ZirkPS_NUM
        name: Heizkreis
        type: line
        xAxisIndex: 0
        yAxisIndex: 1
    - component: oh-time-series
      config:
        gridIndex: 1
        item: Shelly_EM3_Kumulierter_Verbrauch
        name: Leistung
        type: line
        xAxisIndex: 0
        yAxisIndex: 2
  toolbox:
    - component: oh-chart-toolbox
      config:
        presetFeatures:
          - saveAsImage
          - restore
          - dataView
          - dataZoom
          - magicType
        show: false
  tooltip:
    - component: oh-chart-tooltip
      config:
        confine: true
        show: true
        smartFormatter: true
  xAxis:
    - component: oh-time-axis
      config:
        gridIndex: 0
  yAxis:
    - component: oh-value-axis
      config:
        axisLabel:
          formatter: "{value} °C"
        gridIndex: 0
        nameLocation: start
        scale: false
    - component: oh-value-axis
      config:
        axisLabel:
          show: false
        gridIndex: 0
        scale: false
    - component: oh-value-axis
      config:
        axisLabel:
          formatter: "{value} W"
        gridIndex: 0
        max: "6000"
        min: "0"
        nameLocation: start

[Nadahar (Nadar)]

@michaeljoos

Why in above screenshot we have 260 requests for 7 items?

Ehrm… reactive?

[florian-h05 (Florian H.)]

I’ve created a PR that fixes these issue for me:

Charts: Fix duplicate REST requests

[michaeljoos]

@florian-h05

I’ve created a PR that fixes these issue for me:

Thanks! Short feedback:

I tested this with latest snapshot. The charts are now loading at normal speed again However, the charts freeze on mouse over or when scrolling/zooming in. I don’t know if that has anything to do with this change? This also happens when analyzing single items. (I already cleaned the cache, but did not solve this issue)

[florian-h05 (Florian H.)]

@michaeljoos

However, the charts freeze on mouse over or when scrolling/zooming in. I don’t know if that has anything to do with this change?

I can’t reproduce this with the latest Main UI build from the main branch, i.e. including my fix.
Can you provide additional information? Browser console? Browser, OS, device?

[djal (Dusan Jaluvka)]

I’m currently on SNAPSHOT build #4974 and I am also seeing this problem with freezing chart pointer and zooming. But not for all charts, some are working as expected.
Was able to observe it in Chrome on Windows, in Chrome in Android and also in OpenHAB android app.
When the chart freezes, it is not possible to use any control elements (move forward/backward in time period, zooming doesn’t work and sometimes even the back button doesn’t work.

I’m going to prepare some test chart page so you can try to reproduce it.

[djal (Dusan Jaluvka)]

Finally I’ve found out the difference for working and nonworking charts.
Those with oh-chart-tooltip with smartFormatter: true are freezing.

config:
  label: Test chart freezing
  sidebar: true
slots:
  grid:
    - component: oh-chart-grid
      config: {}
  xAxis:
    - component: oh-time-axis
      config:
        gridIndex: 0
  yAxis:
    - component: oh-value-axis
      config:
        gridIndex: 0
  series:
    - component: oh-time-series
      config:
        name: Series 1
        gridIndex: 0
        xAxisIndex: 0
        yAxisIndex: 0
        type: line
        item: VenkuTeplota
    - component: oh-time-series
      config:
        name: Series 2
        gridIndex: 0
        xAxisIndex: 0
        yAxisIndex: 0
        type: line
        item: ObyvakTeplota
  tooltip:
    - component: oh-chart-tooltip
      config:
        show: true
        smartFormatter: true
  dataZoom:
    - component: oh-chart-datazoom
      config:
        show: true
        type: inside

It freezes when you just mouse over the chart to display the tooltip. Additionally in the browser console it displays following error:

oh-chart-component-BnDEtVOF.js:670 Uncaught TypeError: Cannot read properties of undefined (reading 'VenkuTeplota')
    at oh-chart-component-BnDEtVOF.js:670:32
    at Array.forEach (<anonymous>)
    at a2.smartFormatter.a2.formatter (oh-chart-component-BnDEtVOF.js:666:170)
    at t2._showTooltipContent (dist-Bw8Dl26-.js:15886:33)
    at t2.<anonymous> (dist-Bw8Dl26-.js:15846:129)
    at t2._showOrMove (dist-Bw8Dl26-.js:15819:104)
    at t2._showAxisTooltip (dist-Bw8Dl26-.js:15845:10)
    at t2._tryShow (dist-Bw8Dl26-.js:15806:33)
    at t2.manuallyShowTip (dist-Bw8Dl26-.js:15785:27)
    at u2 (dist-Bw8Dl26-.js:9881:47)

Should I create an issue in github for this or is it enough for you to just let the bug description here?

[Nadahar (Nadar)]

@djal

Should I create an issue in github for this or is it enough for you to just let the bug description here?

I’m pretty sure @florian-h05 would prefer a GitHub issue. There are a lot of balls to juggle with the UI at the moment, and it’s just easier to handle them through the GitHub issue/PR process than having to remember to find a forum post when the time comes that you want to try to fix it.

[jsjames (Jeff James)]

@djal

config:
  label: Test chart freezing
  sidebar: true
slots:
  grid:
    - component: oh-chart-grid
      config: {}
  xAxis:
    - component: oh-time-axis
      config:
        gridIndex: 0
  yAxis:
    - component: oh-value-axis
      config:
        gridIndex: 0
  series:
    - component: oh-time-series
      config:
        name: Series 1
        gridIndex: 0
        xAxisIndex: 0
        yAxisIndex: 0
        type: line
        item: VenkuTeplota
    - component: oh-time-series
      config:
        name: Series 2
        gridIndex: 0
        xAxisIndex: 0
        yAxisIndex: 0
        type: line
        item: ObyvakTeplota
  tooltip:
    - component: oh-chart-tooltip
      config:
        show: true
        smartFormatter: true
  dataZoom:
    - component: oh-chart-datazoom
      config:
        show: true
        type: inside

I fixed this in #3556 - thanks for tracking down to a specific case - that made it easy.

[djal (Dusan Jaluvka)]

Thank you, that was fast. I was just going to create an issue in github

update:
I’ve just tested it with latest SNAPSHOT build and charts are now working as before.