OH3 Chart tooltip issue

arjan-io · October 12, 2022, 7:09am

I try to display 3 values in one chart. Since the type of value is different for all of them, I use multiple Y-axis. One for temperature, one for humidity and one for air quality. The last one is just a line and the scale is not shown on the Y-axis.

To get all values displayed in one tooltip I have used the aggregate function. However, aggregated values can not be used with a dynamic time period according to the docs.

When doing aggregations, you have to be careful to add the right type of axes based on the period that you chose (Aggregate Series don’t support Dynamic period as chart type).

And thus I am left with the following picture. It is based on 24hrs from the start of the current day to the end of the current day.

YAML:

config:
  label: Grafiek keukenwaarden
  chartType: Day
  options:
    color:
      - red
      - blue
      - "#59f42f"
slots:
  grid:
    - component: oh-chart-grid
      config:
        includeLabels: true
        height: 75%
        bottom: 50px
        show: false
  xAxis:
    - component: oh-category-axis
      config:
        gridIndex: 0
        categoryType: day
        weekdayFormat: default
        monthFormat: default
        show: false
  yAxis:
    - component: oh-value-axis
      config:
        name: °C
        scale: false
        gridIndex: 0
    - component: oh-value-axis
      config:
        name: "%"
        scale: false
        gridIndex: 0
    - component: oh-value-axis
      config:
        name: ""
        scale: false
        gridIndex: 0
        show: false
  series:
    - component: oh-aggregate-series
      config:
        name: Temperatuur
        gridIndex: 0
        xAxisIndex: 0
        yAxisIndex: 0
        type: line
        item: tempKeuken
        dimension1: hour
        areaStyle:
          opacity: 0.2
        smooth: true
        showSymbol: false
    - component: oh-aggregate-series
      config:
        name: Luchtvochtigheid
        gridIndex: 0
        xAxisIndex: 0
        yAxisIndex: 1
        type: line
        item: humKeuken
        dimension1: hour
        areaStyle:
          opacity: 0.2
        smooth: true
        showSymbol: false
    - component: oh-aggregate-series
      config:
        name: Luchtkwaliteit
        gridIndex: 0
        xAxisIndex: 0
        yAxisIndex: 2
        type: line
        item: iaqKeuken
        dimension1: hour
        areaStyle:
          opacity: 0.2
        smooth: true
        showSymbol: false
  tooltip:
    - component: oh-chart-tooltip
      config:
        show: true
        orient: vertical
        trigger: axis
  legend:
    - component: oh-chart-legend
      config:
        show: true
        bottom: "10"
        type: scroll

What I rather want is to show a 24hr window where the end of the chart is now and the beginning of the chart is now-24hrs. So I made a dynamic time period chart that looks like the picture below. However, now the tooltip only shows one value.

YAML:

config:
  label: test
  period: D
  options:
    color:
      - red
      - blue
      - "#59f42f"
    axisPointer:
      link:
        xAxisIndex: all
slots:
  grid:
    - component: oh-chart-grid
      config: {}
  xAxis:
    - component: oh-time-axis
      config:
        gridIndex: 0
  yAxis:
    - component: oh-value-axis
      config:
        gridIndex: 0
        name: °C
        min: "0"
    - component: oh-value-axis
      config:
        gridIndex: 0
        name: "%"
        min: "0"
    - component: oh-value-axis
      config:
        gridIndex: 0
        min: "0"
        show: false
  series:
    - component: oh-time-series
      config:
        name: Temperatuur
        gridIndex: 0
        xAxisIndex: 0
        yAxisIndex: 0
        type: line
        item: tempKeuken
        areaStyle:
          opacity: 0.2
        smooth: true
    - component: oh-time-series
      config:
        name: Luchtovchtigheid
        gridIndex: 0
        xAxisIndex: 0
        type: line
        item: humKeuken
        yAxisIndex: 1
        areaStyle:
          opacity: 0.2
        smooth: true
    - component: oh-time-series
      config:
        name: Luchtkwaliteit
        gridIndex: 0
        xAxisIndex: 0
        yAxisIndex: 2
        type: line
        item: iaqKeuken
        areaStyle:
          opacity: 0.2
        smooth: true
  tooltip:
    - component: oh-chart-tooltip
      config:
        show: true
        orient: vertical
        order: seriesAsc
        trigger: axis
        axisPointer:
          axis: auto
  legend:
    - component: oh-chart-legend
      config:
        show: true
        orient: horizontal
        bottom: "10"

I read somewhere to use this code to link the X-axis together:

axisPointer:
      link:
        xAxisIndex: all

But to no avail or I can’t get it implemented correctly. Ideally, all the intervals could be smoothed out as well but the main thing is the tooltip. I just want it to show all 3 values at a given time. Any hints please?

JustinG · October 12, 2022, 3:17pm

When I copy your code (and plug in three random items), I get all three items in the tooltip with or without the axisPointer.

So, I’m not sure what’s going on. What happens if you copy and paste your code into a new chart page?

arjan-io · October 12, 2022, 4:33pm

You copied the ‘second’ code? So with the oh-time-series?

JustinG · October 12, 2022, 4:45pm

Yes, the second code. And it works with the tooltip is I use it directly and if I delete the axis pointer lines.

arjan-io · October 12, 2022, 5:33pm

Very odd. Creating a new graph, I still get only one item in the tooltip. Maybe your data is more of a uniform sort? Mine comes from JDBC(mySql) persistence and is based on every change and every minute. Values are send via MQTT and they arrive (thus update) at different intervals (lets say, 20 seconds past whole minute, 35 and 40 seconds past the whole minute).

Playing around a bit I got this:

A Start but now I get 3 times the value from where the data point comes from. I think because I created 3 X-axis. If I revert back to one X-axis, same problem.
YAML:

config:
  label: test
  period: D
  options:
    color:
      - red
      - blue
      - "#59f42f"
    axisPointer:
      link:
        xAxisIndex: all
slots:
  grid:
    - component: oh-chart-grid
      config: {}
  xAxis:
    - component: oh-time-axis
      config:
        gridIndex: 0
    - component: oh-time-axis
      config:
        gridIndex: 0
    - component: oh-time-axis
      config:
        gridIndex: 0
  yAxis:
    - component: oh-value-axis
      config:
        gridIndex: 0
        name: °C
        min: "0"
    - component: oh-value-axis
      config:
        gridIndex: 0
        name: "%"
        min: "0"
    - component: oh-value-axis
      config:
        gridIndex: 0
        min: "0"
        show: false
  series:
    - component: oh-time-series
      config:
        name: Temperatuur
        gridIndex: 0
        xAxisIndex: 0
        yAxisIndex: 0
        type: line
        item: tempKeuken
        areaStyle:
          opacity: 0.2
        smooth: true
    - component: oh-time-series
      config:
        name: Luchtovchtigheid
        gridIndex: 0
        xAxisIndex: 1
        type: line
        item: humKeuken
        yAxisIndex: 1
        areaStyle:
          opacity: 0.2
        smooth: true
    - component: oh-time-series
      config:
        name: Luchtkwaliteit
        gridIndex: 0
        xAxisIndex: 2
        yAxisIndex: 2
        type: line
        item: iaqKeuken
        areaStyle:
          opacity: 0.2
        smooth: true
  tooltip:
    - component: oh-chart-tooltip
      config:
        show: true
        orient: horizontal
        order: seriesDesc
        trigger: axis
        axisPointer:
          axis: auto
          type: cross
  legend:
    - component: oh-chart-legend
      config:
        show: true
        orient: horizontal
        bottom: "10"

JustinG · October 12, 2022, 7:33pm

The items I plugged in were just stored by the default rrd4j, so it’s possible that the data has something to do with it, but I"m not sure at this point.

That shouldn’t matter according to my understanding, but there is something obviously strange going on here so my limited understanding has reached its limit.

arjan-io · October 12, 2022, 7:37pm

Ok. Thanks for trying to help! Much appreciated.

arjan-io · October 13, 2022, 7:07am

Is there someone who had experience with the formatter: part?

Example (content not applicable to this question, more the coding):

formatter : (params) => {
   //The datetime where the axisPointer is
   var xTime = new Date(params[0].axisValue)
      
   //Create our custom tooltip and add to its top the dateTime where the axisPointer is
   let tooltip = `<p>${xTime.toLocaleString()}</p> `;
      
   //Go through each serie
   series.forEach((serie, index) => {
     //Find the closest value
     value = serie.data.reduce((prev, curr) => Math.abs(new Date(curr.value[0]).valueOf() - xTime.valueOf()) < Math.abs(new Date(prev.value[0]).valueOf() - xTime.valueOf()) ? curr : prev).value[1]
        
     /* Add a line in our custom tooltip */
     // Add the colored circle at the begining of the line
     tooltip += `<p><span style="display:inline-block;margin-right:5px;border-radius:10px;width:9px;height:9px;background-color: ${myChart.getVisual({ seriesIndex: index }, 'color')}"></span>`
     // Add the serie's name and its value
     tooltip += `${serie.name} &emsp;&emsp; <b>${value}</b></p>`;
   });
   return tooltip;
}

JustinG · October 13, 2022, 3:39pm

It does not seem possible to send functions to eCharts properties via the widget system. There have been several other attempts. Something in the chain between the yaml and eCharts means that the functions are not interpreted by eCharts but are just taken as a raw string.

arjan-io · October 13, 2022, 3:50pm

Hm. Bummer.

I managed to get this to work
formatter: "{a0}: {c0} {a1}: {c1} {a2}: {c2} {a3}: {c3} {a4}: {c4} {a5}: {c5}"

This produces:

Close but now I need to get rid of the date-time bit