Using HA or HACS graphs w/ InfluxDB data in HA?

Configuration Frontend
1

I’ve been using Grafana and Influx for graphs. So I have a lot of sensor data in InfluxDB. But I can see the utility of small graph cards in HA itself. Putting Grafana panels into the HA UI as iFrames looks pretty bad and has issues with LAN/remote access. It’s just not a good solution.

Is there a way to use HA graph cards or even the nicer looking HACS graph cards, but use influx as the data source? I’m trying to avoid having to double save sensor data in both Influx and HA (and having to add HA entities for those sensors data). I like the way Influx handles data (via retention policies and CQ). And I like the idea of keeping my HA database pretty lean instead of bloating it up with duplicate sensor data.

2

I don’t think so.

1 Like
3

You can read influxdb data into a sensor with the same influxdb integration:

https://www.home-assistant.io/integrations/influxdb/#sensor

Personal example:

- platform: influxdb
  host: influxdb.lan
  queries:
    - name: Rpi iomega free
      where: '"host" = ''NAS-IO-1'' AND "path" = ''/srv/dev-disk-by-label-iomega'''
      measurement: '"disk"'
      field: free
      value_template: '{{ (value|float / (1000 * 1000 * 1000)) | round(1) }}'
      unit_of_measurement: 'GB'
      group_function: last
      database: telegraf
    - name: Rpi hd2 free
      where: '"host" = ''NAS-IO-1'' AND "path" = ''/srv/dev-disk-by-label-hd2'''
      measurement: '"disk"'
      field: free
      value_template: '{{ (value|float / (1000 * 1000 * 1000)) | round(1) }}'
      unit_of_measurement: 'GB'
      group_function: last
      database: telegraf      
    - name: Data var free
      where: '"host" = ''data'' AND "path" = ''/var'''
      measurement: '"disk"'
      field: free
      value_template: '{{ (value|float / (1000 * 1000 * 1000)) | round(1) }}'
      unit_of_measurement: 'GB'
      group_function: last
      database: telegraf            
    - name: RPI mirror free
      where: '"host" = ''NAS-IO-1'' AND "path" = ''/srv/dev-disk-by-label-mirror'''
      measurement: '"disk"'
      field: free
      value_template: '{{ (value|float / (1000 * 1000 * 1000)) | round(1) }}'
      unit_of_measurement: 'GB'
      group_function: last
      database: telegraf
1 Like
4

Thanks @koying, I think that’s exactly what I was looking for. I have my recorder set to exclude most things except for a intentional list. So I’m hoping that using this influx sensor would allow me to have native HA charts without actually replicating the sensor data in HA’s database. Curious if you chart your influx sensors at all, and if you go through the trouble of limiting your recorder?

5

Fact is those influx sensors are themselves going to the HA recorder, and you want them to if you want to create graphs on them.
So if the original data comes from HA, it doesn’t really make sense :wink:

Mine comes from telegraf, and generally speaking, I put in influx all data I actually want to keep an long-term history of. The HA database is not fit for that, at least because of the “monolithic” retention period of the recorder.

I chart those with grafana, and display in Lovelace via an iframe in panel mode.

title: Graph
icon: 'mdi:chart-bell-curve'
panel: true
path: graphs
badges: []
cards:
  - aspect_ratio: 100%
    type: iframe
    url: >-
        https://grafana.xxx/d/CoStaHigk/home-assistant?orgId=1&refresh=5m&kiosk=tv

image
image1920×943 321 KB

Not the best integration, but it fits my bill.

I do not really graph the imported influx sensor, just a simple custom:mini-graph-card

image

1 Like
6

Just for fun (yeah, I know, I have a strange notion of fun), I tried to use ApexCharts-Card directly with influxdb. That card allows to provide javascript code as data source.

It doesn’t work out-of-the box, because of async issues, but I managed to make it work without going through the recorder at all after that PR CHG: make datagenerator async by koying · Pull Request #157 · RomRider/apexcharts-card (github.com) EDIT: The change is in release 1.9.0

type: 'custom:apexcharts-card'
graph_span: 36h
header:
  show: true
  title: ApexCharts-Card
  show_states: true
  colorize_states: true
series:
  - entity: sensor.hue_sensor1_temperature
    data_generator: |
      console.log(start);
      var params = new URLSearchParams({
          pretty: true,
          db: "home_assistant",
          q: "SELECT mean(\"value\") FROM \"°C\" WHERE (\"entity_id\" = 'mijia_out_temp' OR \"entity_id\" = 'exterieur_temperature') AND time >= '" + start.toISOString() + "' AND time <= '" + end.toISOString() + "' GROUP BY time(10m) fill(none)"
          });

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

      const request = async () => {
          var result = [];
          const response = await fetch('http://influxdb.lan: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]]);
              }
          } else {
              console.log("error: " + json)
          }
          return result;
      }
      return request();

image
image624×514 13.7 KB

Totally proof-of-concrpt :wink:

4 Likes
7

That is amazing! Thanks for putting the time into this. Giving me the motivation to install HACS. Maybe it’s just me, but I kinda thought my usecase is pretty common. It seems like a lot of HA users also have influx running somewhere else for all their data hoarding needs. I wish the default graph objects would accommodate influx as data sources.

I think part of my issue with using Grafana in HA is I was trying to do individual charts instead of an entire dashboard as single big iFrame panel. I like the look of your panel, good idea.

8

Thanks koying for the reply.
So now I kind of understand why the influx sensor will not display the data from the influxdb… not that it makes any sense to me, and I cant believe that other users don’t want to just use influx and apex charts or other graphs instead of grafana.

Anyways I have tried your code and modified to my influx setup. And all I get is loading where the graph should be.

Here is what I put in the command line to get the results I want.

# influx -database sensors
> SELECT "value" FROM "solar" WHERE "entity_id"='month' AND time < now()
name: solar
time                value
----                -----
1612085400000000000 588.8
1614504600000000000 596.5
1617183000000000000 736.7
1619775000000000000 572.9

Here is what I have in the apexchart that is modified from what you have put:

type: 'custom:apexcharts-card'
graph_span: 12month
header:
  show: true
  title: Solar Monthly Output
  show_states: true
  colorize_states: true
series:
  - entity: sensor.solar_monthly_influxdb
    data_generator: |
      console.log(start);
      var params = new URLSearchParams({
          pretty: true,
          db: "sensors",
          q: "SELECT mean(\"value\") FROM \"solar\" WHERE \"entity_id\" = 'month' AND time >= '" + start.toISOString() + "' AND time <= '" + end.toISOString() + "' GROUP BY time(1d) fill(none)"
          });

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

      const request = async () => {
          var result = [];
          const response = await fetch('http://127.0.0.1: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]]);
              }
          } else {
              console.log("error: " + json)
          }
          return result;
      }
      return request();

Influx is on the same server as HA - 127.0.0.1
Can you see what is wrong with it ?

Thank you so much for any help as I have spent days trying to get this to work!

9

Check in the browser debug console. You’ll’probably see some kind of JavaScript errors there.

10

this is what is in the console window - i dont understand it

chunk.8968af8ab3eb1de47eb2.js:1 Uncaught (in promise) TypeError: Cannot read property 'toString' of undefined
    at i (chunk.8968af8ab3eb1de47eb2.js:1)
    at HTMLElement.value (chunk.f252380a0b09845fc457.js:4696)
    at HTMLElement.update (app.52350e7c.js:12773)
    at HTMLElement.performUpdate (app.52350e7c.js:12773)
    at HTMLElement._enqueueUpdate (app.52350e7c.js:12773)
i @ chunk.8968af8ab3eb1de47eb2.js:1
value @ chunk.f252380a0b09845fc457.js:4696
update @ app.52350e7c.js:12773
performUpdate @ app.52350e7c.js:12773
_enqueueUpdate @ app.52350e7c.js:12773
Promise.then (async)
value @ chunk.f252380a0b09845fc457.js:4398
value @ chunk.7ade96a9da5d055f2747.js:2750
value @ chunk.7ade96a9da5d055f2747.js:2750
async function (async)
value @ chunk.7ade96a9da5d055f2747.js:2750
value @ chunk.7ade96a9da5d055f2747.js:2750
performUpdate @ app.52350e7c.js:12773
_enqueueUpdate @ app.52350e7c.js:12773
async function (async)
_enqueueUpdate @ app.52350e7c.js:12773
requestUpdateInternal @ app.52350e7c.js:12773
set @ app.52350e7c.js:12773
value @ chunk.7ade96a9da5d055f2747.js:2750
value @ chunk.7ade96a9da5d055f2747.js:2750
performUpdate @ app.52350e7c.js:12773
_enqueueUpdate @ app.52350e7c.js:12773
async function (async)
_enqueueUpdate @ app.52350e7c.js:12773
requestUpdateInternal @ app.52350e7c.js:12773
initialize @ app.52350e7c.js:12773
initialize @ app.52350e7c.js:12773
C @ app.52350e7c.js:12773
T @ app.52350e7c.js:12773
r @ chunk.7ade96a9da5d055f2747.js:2498
s @ chunk.bf78bb32ee89f3425ccf.js:3096
d @ chunk.bf78bb32ee89f3425ccf.js:3096
c @ chunk.bf78bb32ee89f3425ccf.js:3096
value @ chunk.7ade96a9da5d055f2747.js:2974
performUpdate @ app.52350e7c.js:12773
_enqueueUpdate @ app.52350e7c.js:12773
async function (async)
_enqueueUpdate @ app.52350e7c.js:12773
requestUpdateInternal @ app.52350e7c.js:12773
initialize @ app.52350e7c.js:12773
C @ app.52350e7c.js:12773
i @ chunk.7ade96a9da5d055f2747.js:2974
value @ chunk.7ade96a9da5d055f2747.js:3796
(anonymous) @ chunk.7ade96a9da5d055f2747.js:3796
setTimeout (async)
(anonymous) @ chunk.f1bc7a27e6f6560c34d7.js:1
(anonymous) @ chunk.b5b99f95b1f9c2a1c2fa.js:1
requestAnimationFrame (async)
window.requestAnimationFrame @ chunk.b5b99f95b1f9c2a1c2fa.js:1
i @ chunk.f1bc7a27e6f6560c34d7.js:1
value @ chunk.7ade96a9da5d055f2747.js:3796
performUpdate @ app.52350e7c.js:12773
_enqueueUpdate @ app.52350e7c.js:12773
async function (async)
_enqueueUpdate @ app.52350e7c.js:12773
requestUpdateInternal @ app.52350e7c.js:12773
set @ app.52350e7c.js:12773
commit @ app.52350e7c.js:12773
commit @ app.52350e7c.js:12773
update @ app.52350e7c.js:12773
__commitTemplateResult @ app.52350e7c.js:12773
commit @ app.52350e7c.js:12773
a @ app.52350e7c.js:12773
T.render @ app.52350e7c.js:12773
update @ app.52350e7c.js:12773
performUpdate @ app.52350e7c.js:12773
_enqueueUpdate @ app.52350e7c.js:12773
async function (async)
_enqueueUpdate @ app.52350e7c.js:12773
requestUpdateInternal @ app.52350e7c.js:12773
set @ app.52350e7c.js:12773
value @ chunk.7ade96a9da5d055f2747.js:4487
saveConfig @ chunk.7ade96a9da5d055f2747.js:4487
value @ chunk.57e5b7cb5684d6b2bde8.js:1264
handleEvent @ app.52350e7c.js:12773
__boundHandleEvent @ app.52350e7c.js:12773
VM1587:3 Thu May 21 2020 17:06:13 GMT+1000 (Australian Eastern Standard Time)
apexcharts-card.js:1 apexcharts-card:  TypeError: Cannot read property '1' of undefined
    at apexcharts-card.js:852
    at Array.forEach (<anonymous>)
    at HTMLElement._updateData (apexcharts-card.js:852)
le @ apexcharts-card.js:1
_updateData @ apexcharts-card.js:852
async function (async)
_updateData @ apexcharts-card.js:852
_firstDataLoad @ apexcharts-card.js:808
_initialLoad @ apexcharts-card.js:852
async function (async)
_initialLoad @ apexcharts-card.js:852
connectedCallback @ apexcharts-card.js:808
value @ chunk.7ade96a9da5d055f2747.js:2750
value @ chunk.7ade96a9da5d055f2747.js:2750
async function (async)
value @ chunk.7ade96a9da5d055f2747.js:2750
value @ chunk.7ade96a9da5d055f2747.js:2750
performUpdate @ app.52350e7c.js:12773
_enqueueUpdate @ app.52350e7c.js:12773
async function (async)
_enqueueUpdate @ app.52350e7c.js:12773
requestUpdateInternal @ app.52350e7c.js:12773
set @ app.52350e7c.js:12773
value @ chunk.7ade96a9da5d055f2747.js:2750
value @ chunk.7ade96a9da5d055f2747.js:2750
performUpdate @ app.52350e7c.js:12773
_enqueueUpdate @ app.52350e7c.js:12773
async function (async)
_enqueueUpdate @ app.52350e7c.js:12773
requestUpdateInternal @ app.52350e7c.js:12773
initialize @ app.52350e7c.js:12773
initialize @ app.52350e7c.js:12773
C @ app.52350e7c.js:12773
T @ app.52350e7c.js:12773
r @ chunk.7ade96a9da5d055f2747.js:2498
s @ chunk.bf78bb32ee89f3425ccf.js:3096
d @ chunk.bf78bb32ee89f3425ccf.js:3096
c @ chunk.bf78bb32ee89f3425ccf.js:3096
value @ chunk.7ade96a9da5d055f2747.js:2974
performUpdate @ app.52350e7c.js:12773
_enqueueUpdate @ app.52350e7c.js:12773
async function (async)
_enqueueUpdate @ app.52350e7c.js:12773
requestUpdateInternal @ app.52350e7c.js:12773
initialize @ app.52350e7c.js:12773
C @ app.52350e7c.js:12773
i @ chunk.7ade96a9da5d055f2747.js:2974
value @ chunk.7ade96a9da5d055f2747.js:3796
(anonymous) @ chunk.7ade96a9da5d055f2747.js:3796
setTimeout (async)
(anonymous) @ chunk.f1bc7a27e6f6560c34d7.js:1
(anonymous) @ chunk.b5b99f95b1f9c2a1c2fa.js:1
requestAnimationFrame (async)
window.requestAnimationFrame @ chunk.b5b99f95b1f9c2a1c2fa.js:1
i @ chunk.f1bc7a27e6f6560c34d7.js:1
value @ chunk.7ade96a9da5d055f2747.js:3796
performUpdate @ app.52350e7c.js:12773
_enqueueUpdate @ app.52350e7c.js:12773
async function (async)
_enqueueUpdate @ app.52350e7c.js:12773
requestUpdateInternal @ app.52350e7c.js:12773
set @ app.52350e7c.js:12773
commit @ app.52350e7c.js:12773
commit @ app.52350e7c.js:12773
update @ app.52350e7c.js:12773
__commitTemplateResult @ app.52350e7c.js:12773
commit @ app.52350e7c.js:12773
a @ app.52350e7c.js:12773
T.render @ app.52350e7c.js:12773
update @ app.52350e7c.js:12773
performUpdate @ app.52350e7c.js:12773
_enqueueUpdate @ app.52350e7c.js:12773
async function (async)
_enqueueUpdate @ app.52350e7c.js:12773
requestUpdateInternal @ app.52350e7c.js:12773
set @ app.52350e7c.js:12773
value @ chunk.7ade96a9da5d055f2747.js:4487
saveConfig @ chunk.7ade96a9da5d055f2747.js:4487
value @ chunk.57e5b7cb5684d6b2bde8.js:1264
handleEvent @ app.52350e7c.js:12773
__boundHandleEvent @ app.52350e7c.js:12773
VM1588:3 Thu May 21 2020 17:06:39 GMT+1000 (Australian Eastern Standard Time)
apexcharts-card.js:1 apexcharts-card:  TypeError: Cannot read property '1' of undefined
    at apexcharts-card.js:852
    at Array.forEach (<anonymous>)
    at HTMLElement._updateData (apexcharts-card.js:852)
le @ apexcharts-card.js:1
_updateData @ apexcharts-card.js:852
async function (async)
_updateData @ apexcharts-card.js:852
_firstDataLoad @ apexcharts-card.js:808
_initialLoad @ apexcharts-card.js:852
async function (async)
_initialLoad @ apexcharts-card.js:852
connectedCallback @ apexcharts-card.js:808
value @ chunk.41966229a8d95ddfa733.js:1
value @ chunk.41966229a8d95ddfa733.js:1
performUpdate @ app.52350e7c.js:12773
_enqueueUpdate @ app.52350e7c.js:12773
async function (async)
_enqueueUpdate @ app.52350e7c.js:12773
requestUpdateInternal @ app.52350e7c.js:12773
initialize @ app.52350e7c.js:12773
C @ app.52350e7c.js:12773
r @ chunk.41966229a8d95ddfa733.js:1
_clone @ app.52350e7c.js:12773
__commitTemplateResult @ app.52350e7c.js:12773
commit @ app.52350e7c.js:12773
a @ app.52350e7c.js:12773
T.render @ app.52350e7c.js:12773
update @ app.52350e7c.js:12773
performUpdate @ app.52350e7c.js:12773
_enqueueUpdate @ app.52350e7c.js:12773
async function (async)
_enqueueUpdate @ app.52350e7c.js:12773
requestUpdateInternal @ app.52350e7c.js:12773
set @ app.52350e7c.js:12773
value @ chunk.57e5b7cb5684d6b2bde8.js:619
n @ app.52350e7c.js:41332
async function (async)
n @ app.52350e7c.js:41332
(anonymous) @ app.52350e7c.js:41332
i @ app.52350e7c.js:12773
o @ chunk.7ade96a9da5d055f2747.js:1995
(anonymous) @ chunk.7ade96a9da5d055f2747.js:2974
i @ app.52350e7c.js:12773
value @ chunk.ad2067308357837218ea.js:316
handleEvent @ app.52350e7c.js:12773
__boundHandleEvent @ app.52350e7c.js:12773
VM1589:3 Thu May 21 2020 17:07:40 GMT+1000 (Australian Eastern Standard Time)
apexcharts-card.js:1 apexcharts-card:  TypeError: Cannot read property '1' of undefined
    at apexcharts-card.js:852
    at Array.forEach (<anonymous>)
    at HTMLElement._updateData (apexcharts-card.js:852)
11

Nothing obvious. Maybe try to add a console.log("return: " + json) before the return result.
The output of influxdb will be logged in the browser console.

12

I have put in the bit of code you said - here is where I put it - is that correct:

              console.log("error: " + json)
          }
          console.log("return: " + json) 
          return result;
      }
      return request();

Here is the output in the console window.

apexcharts-card.js:1 apexcharts-card:  TypeError: Cannot read property '1' of undefined
    at apexcharts-card.js:852
    at Array.forEach (<anonymous>)
    at HTMLElement._updateData (apexcharts-card.js:852)
le @ apexcharts-card.js:1
_updateData @ apexcharts-card.js:852
async function (async)
_updateData @ apexcharts-card.js:852
_firstDataLoad @ apexcharts-card.js:808
_initialLoad @ apexcharts-card.js:852
async function (async)
_initialLoad @ apexcharts-card.js:852
_reset @ apexcharts-card.js:808
setConfig @ apexcharts-card.js:808
s.setConfig @ card-mod.js:5
value @ chunk.41966229a8d95ddfa733.js:1
performUpdate @ app.52350e7c.js:12773
_enqueueUpdate @ app.52350e7c.js:12773
async function (async)
_enqueueUpdate @ app.52350e7c.js:12773
requestUpdateInternal @ app.52350e7c.js:12773
set @ app.52350e7c.js:12773
commit @ app.52350e7c.js:12773
commit @ app.52350e7c.js:12773
update @ app.52350e7c.js:12773
__commitTemplateResult @ app.52350e7c.js:12773
commit @ app.52350e7c.js:12773
a @ app.52350e7c.js:12773
T.render @ app.52350e7c.js:12773
update @ app.52350e7c.js:12773
performUpdate @ app.52350e7c.js:12773
_enqueueUpdate @ app.52350e7c.js:12773
async function (async)
_enqueueUpdate @ app.52350e7c.js:12773
requestUpdateInternal @ app.52350e7c.js:12773
set @ app.52350e7c.js:12773
value @ chunk.57e5b7cb5684d6b2bde8.js:1264
handleEvent @ app.52350e7c.js:12773
__boundHandleEvent @ app.52350e7c.js:12773
i @ app.52350e7c.js:12773
value @ chunk.ffc30d40bdb982984a0e.js:509
value @ chunk.ffc30d40bdb982984a0e.js:509
value @ chunk.ffc30d40bdb982984a0e.js:888
handleEvent @ app.52350e7c.js:12773
__boundHandleEvent @ app.52350e7c.js:12773
i @ app.52350e7c.js:12773
value @ chunk.e569390753b4b84e6b04.js:1106
(anonymous) @ chunk.e569390753b4b84e6b04.js:1106
update @ chunk.1431d25117b120ae04cd.js:1
_dispatch @ chunk.1431d25117b120ae04cd.js:1
dispatch @ chunk.1431d25117b120ae04cd.js:1
wi @ chunk.1431d25117b120ae04cd.js:1
(anonymous) @ chunk.1431d25117b120ae04cd.js:1
flush @ chunk.1431d25117b120ae04cd.js:1
(anonymous) @ chunk.1431d25117b120ae04cd.js:1
VM459:27 error: [object Object]
VM459:29 return: [object Object]

What does the VM459:27 error: [object Object] and VM459:29 return: [object Object] mean ?

And is this an error in apex charts ?

apexcharts-card:  TypeError: Cannot read property '1' of undefined
    at apexcharts-card.js:852
    at Array.forEach (<anonymous>)
    at HTMLElement._updateData (apexcharts-card.js:852)
return: [object Object]

If I put this URL into the browser (chrome):

http://10.0.0.10:8086/query?db=sensors&q=SELECT+"value"+FROM+"solar"+WHERE+"entity_id"+=+'month'

I get this return - which has the correct values:

{"results":[{"statement_id":0,"series":[{"name":"solar","columns":["time","value"],"values":[["2021-01-31T09:30:00Z",588.8],["2021-02-28T09:30:00Z",596.5],["2021-03-31T09:30:00Z",736.7],["2021-04-30T09:30:00Z",572.9]]}]}]}

The date/time is correct - last day of month @ 19:30 = 09:30UTC+10:00. and the solar production for the month.
So all I need to do is get this into apex-charts.
How can I adapt the URL and returned json to work with your javascript code?

thanks

13

Maybe due to how you patched apexchart?

EDIT: Removed obsolete link

14

I didnt patch apexchats - I installed HAC’s and added it from there. I did try your version of apexcharts-card.js too, which has a bigger file size (1,188kb) compared to the default HAC version (727kb).

I am still getting this error:

apexcharts-card.js:1 apexcharts-card:  TypeError: Cannot read property '1' of undefined
    at apexcharts-card.js:852
    at Array.forEach (<anonymous>)
    at HTMLElement._updateData (apexcharts-card.js:852)

Thanks

15

You have to, or the code won’t work.
If you still have the same error, it’s possible you’re still using the hacs version.

Did you adapt the lovelace resources to point to my version?

16

I think I have done it correct:
I copied your version to homeassistant/www/
I went to Configuration / Lovelace Dashboards / Resources
Selected the current apexcharts and changed the URL to /www/apexcharts-card.js

apex-update
apex-update905×602 28.9 KB

is this correct ?

EDIT: the URL is /local/apexcharts-card.js

17

Yes. Just be sure to remove the “/hacsfiles” reference to the original apexchart as well or you don’t know which one is used.
And restart HA, ofc.

EDIT: And clear browser cache

18

Koying - someone is a very smart lad !
I had to wipe browser cache and it worked.
I can’t beleive it is working the way I want. Its been my biggest problem with using HA and apex cards.
Here is my settings for anyone else

type: 'custom:apexcharts-card'
header:
  show: true
  title: Solar Monthly Production
  show_states: false
  colorize_states: true
apex_config:
  chart:
    height: 270
    extend_to_end: false
  yaxis:
    min: 0
    max: 800
  stroke:
    show: true
    width: 1
  legend:
    show: true
graph_span: 12 month
span:
  end: month
series:
  - entity: sensor.solar_monthly_influxdb
    type: column
    name: Monthly Production
    color: green
    extend_to_end: false
    show:
      datalabels: true
    group_by:
      duration: 1month
    data_generator: |
      console.log(start);
      var params = new URLSearchParams({
          db: "sensors",
          q: "SELECT \"value\" FROM \"solar\" WHERE \"entity_id\" = 'month' AND time < now()"
          });

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

      const request = async () => {
          var result = [];
          const response = await fetch('http://10.0.0.10: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]]);
              }
          } else {
              console.log("error: " + json)
          }
          console.log("return: " + json) 
          return result;
      }
      return request();
update_interval: 1d

apex-working

Don’t know how much the sensor config makes, but below is what I have in configuration.yaml

  - platform: influxdb
    host: 127.0.0.1
    queries:
      - name: solar_monthly_influxdb
        database: sensors
        field: value
        measurement: solar
        where: '"entity_id" = ''month'' AND time < now()'
        unit_of_measurement: kWh

Thank you so much Chris

3 Likes
19

Glad it worked :slight_smile:
You can remove those loggings, to not flood your browser.

20

The needed change to apex-card has been incorporated in release 1.9.0.

1 Like