@sharmstr said in [MMM-ApexCharts] ApexCharts.js for your mirror.:
There are several working examples in the wiki
https://github.com/sharmstr/MMM-ApexCharts/wiki/JSON
Hi - thankyou very much - and apologies for somehow not finding your great documentation! I’ve been able to get sample charts working now.
Just some notes on where I’ve got to with my mirror - I’ve been trying MMM-ApexCharts out using a mini power monitor called an IotaWatt as a datasource. It sits on my home network and collects power readings from my mains connection using a current transformer. You can then query this data back and possibly use it to draw graphs.
Queries are just done with an http request and look like:
http://MyIotaWatt.local/query?select=[time.local,InstPower_W.wh.d2]&begin=s-24h&end=s&group=1h&format=json&header=no
returning (in this case) json with readings for total power usage (kWatt hours) for each of the previous 24 hours.
Responses look like (e.g.)
0
0 "2024-09-21T14:05:00"
1 0.76
1
0 "2024-09-21T13:05:00"
1 0.75
2
0 "2024-09-21T12:05:00"
1 0.73
etc
so this has worked well with the paired chartJsonFormat config.
Things I found useful so far:
- if I put the http://iotawatt.local/query?… in the chartJsonUrl config then the log showed that the call failed with a CORS error. I’ve got it to return data if I add the local CORS server prefix though i.e.
http://localhost:8080/cors?url=http://MyIotaWatt.local/query?...
- Times returned in the response match NZ local time, but the labels on my chart’s x-axis originally displayed times 12 hours earlier. I’ve included a datetimeUTC entry in my
xaxis.labels config to leave it in local time
xaxis: {
type: "datetime",
tickPlacement: "off",
labels: {
datetimeUTC: false,
format: "HH:mm",
}
},
@sharmstr I’ve also been trying out showing more than one chart on the mirror, following your sample config. Is there a way to show two charts when both make their own call to a datasource (i.e. with separate chartJsonUrls?)
This would be useful in my case to show a chart for Detailed power usage (over last 30 mins) and a separate chart for Overview (usage in last 24 hours).
I’ve configured these charts to work individually, but when I add both to my config at the same time (with different chartIDs) the 2nd chart doesn’t show on the mirror. The log shows json responses to both calls, but also an error
Uncaught (in promise) TypeError: Cannot read properties of null (reading '1')
following the 2nd response. Is there a neat way to allow both charts, or have I just messed it up? Thanks very much
