Last active
June 19, 2024 06:30
-
-
Save boxers999/56eb4eea9920b4d622962309cfde3c5b to your computer and use it in GitHub Desktop.
Basic Ecoflow data charting script. You need to request an API key from Ecoflow Support. Once you have this, replace these 3 sections (YOUR_SERIAL_NUMBER_HERE, API_KEY_GOES_HERE, SECRET_KEY_GOES_HERE) in the script . Then run in any web browser.
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| <!DOCTYPE html> | |
| <html> | |
| <head> | |
| <title>Charts from JSON Response</title> | |
| <script src="https://cdn.jsdelivr.net/npm/chart.js"></script> | |
| <style> | |
| canvas { | |
| width: 300px; | |
| height: 300px; | |
| } | |
| </style> | |
| </head> | |
| <body> | |
| <div> | |
| <canvas id="myChart" width="300" height="300"></canvas> | |
| </div> | |
| <div> | |
| <span id="chargeLevel" style="font-family: 'Arial Black'; font-size: 30px; padding-right: 25px;"></span> | |
| <span id="wattsIn" style="font-family: 'Arial Black'; font-size: 30px; padding-right: 25px;"></span> | |
| <span id="maxWattsIn" style="font-family: 'Arial Black'; font-size: 30px; padding-right: 25px;">Watts In Max 0</span> | |
| <span id="wattsOut" style="font-family: 'Arial Black'; font-size: 30px; padding-right: 25px;"></span> | |
| <span id="timeRemaining" style="font-family: 'Arial Black'; font-size: 30px; padding-right: 25px;"></span> | |
| </div> | |
| <script> | |
| // Set up the chart options | |
| var maxWatts = 0; | |
| const chartOptions = { | |
| type: 'line', | |
| data: { | |
| labels: [], | |
| datasets: [{ | |
| label: 'SOC', | |
| data: [], | |
| borderColor: 'red', | |
| fill: false | |
| }, { | |
| label: 'Remaining Time', | |
| data: [], | |
| borderColor: 'green', | |
| fill: false | |
| }, { | |
| label: 'Watts Out Sum', | |
| data: [], | |
| borderColor: 'blue', | |
| fill: false | |
| }, { | |
| label: 'Watts In Sum', | |
| data: [], | |
| borderColor: 'orange', | |
| fill: false | |
| }] | |
| }, | |
| options: { | |
| responsive: true, | |
| maintainAspectRatio: false, | |
| scales: { | |
| xAxes: [{ | |
| ticks: { | |
| autoSkip: true, | |
| maxTicksLimit: 1 | |
| } | |
| }] | |
| } | |
| } | |
| }; | |
| // Define the function to update the chart | |
| function updateChart(data) { | |
| const labels = chartOptions.data.labels; | |
| const datasets = chartOptions.data.datasets; | |
| // Add the new data to the chart | |
| labels.push(new Date().toLocaleTimeString()); | |
| datasets[0].data.push(data.soc); | |
| var timeRem = Math.abs(data.remainTime).toFixed(2) / 60; | |
| datasets[1].data.push(timeRem); | |
| datasets[2].data.push(data.wattsOutSum); | |
| datasets[3].data.push(data.wattsInSum); | |
| // Limit the chart to 10 data points | |
| if (labels.length > 20) { | |
| labels.shift(); | |
| datasets.forEach(dataset => dataset.data.shift()); | |
| } | |
| // Update the chart | |
| myChart.update(); | |
| } | |
| // Define the function to fetch data from the API | |
| function fetchData() { | |
| fetch('https://api.ecoflow.com/iot-service/open/api/device/queryDeviceQuota?sn=YOUR_SERIAL_NUMBER_HERE', { | |
| headers: { | |
| 'appKey': 'API_KEY_GOES_HERE', | |
| 'secretKey': 'SECRET_KEY_GOES_HERE' | |
| } | |
| }) | |
| .then(response => response.json()) | |
| .then(data => { | |
| if (data.code === '0') { | |
| document.getElementById("chargeLevel").textContent = "Battery Level " + data.data.soc + "%"; | |
| document.getElementById("wattsIn").textContent = "Watts In " + data.data.wattsInSum; | |
| document.getElementById("wattsOut").textContent = "Watts Out " + data.data.wattsOutSum; | |
| document.getElementById("timeRemaining").textContent = "Time Remaining " + Math.round(Math.abs(data.data.remainTime).toFixed(2) / 60); | |
| if(data.data.wattsInSum > maxWatts){ | |
| maxWatts = data.data.wattsInSum; | |
| document.getElementById("maxWattsIn").textContent = "Watts In Max " + maxWatts; | |
| } | |
| updateChart(data.data); | |
| } | |
| }) | |
| .catch(error => console.error(error)); | |
| } | |
| // Create the chart | |
| const ctx = document.getElementById('myChart').getContext('2d'); | |
| const myChart = new Chart(ctx, chartOptions); | |
| // Fetch data from the API every 5 seconds | |
| setInterval(() => { | |
| fetchData(); | |
| }, 1500); | |
| </script> | |
| </body> | |
| </html> |
Yes it's still working for me on my Delta2.
…On Tue, 8 Aug 2023, 16:38 astrowunder, ***@***.***> wrote:
***@***.**** commented on this gist.
------------------------------
Is this still working? I just tried it with my 3 variables and just get a
static chart with no data. My unit is a Delta 2
—
Reply to this email directly, view it on GitHub
<https://gist.github.com/boxers999/56eb4eea9920b4d622962309cfde3c5b#gistcomment-4655129>
or unsubscribe
<https://github.com/notifications/unsubscribe-auth/AADNWMMXPYLRFJCRBCJGUDDXUJMNVBFKMF2HI4TJMJ2XIZLTSKBKK5TBNR2WLJDHNFZXJJDOMFWWLK3UNBZGKYLEL52HS4DFQKSXMYLMOVS2I5DSOVS2I3TBNVS3W5DIOJSWCZC7OBQXE5DJMNUXAYLOORPWCY3UNF3GS5DZVRZXKYTKMVRXIX3UPFYGLK2HNFZXIQ3PNVWWK3TUUZ2G64DJMNZZDAVEOR4XAZNEM5UXG5FFOZQWY5LFVEYTEMJVHEZTAMZXU52HE2LHM5SXFJTDOJSWC5DF>
.
You are receiving this email because you authored the thread.
Triage notifications on the go with GitHub Mobile for iOS
<https://apps.apple.com/app/apple-store/id1477376905?ct=notification-email&mt=8&pt=524675>
or Android
<https://play.google.com/store/apps/details?id=com.github.android&referrer=utm_campaign%3Dnotification-email%26utm_medium%3Demail%26utm_source%3Dgithub>
.
Dang- I just get a blank chart. I've been trying to contact ecoflow, but they're not very responsive. I also can't use curl- it says device not found currently with the keys they sent me- I assume it's the same issue
Great Job ! Thx a lot !!!!!!
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment
Is this still working? I just tried it with my 3 variables and just get a static chart with no data. My unit is a Delta 2