Tests: 
There are several adapters available to view charts within ioBroker. As far as I know, all of them are using a UI to configure content and options of the charts. Typically not all features of the used graphical sub system could be used in this way. E.g. it's not possible to view fully featured stacked charts with eChart-Adapter.
This adapter uses a different approach. It brings almost the complete feature set of Apache ECharts to ioBroker. Take a look to the demo charts.
Remark: Adapter was not tested on MacOS, yet.
There is no UI to configure any chart. You have to define the chart yourself, the adapter takes care about visualization. You have to provide definition and content of the chart by providing the content as a json-object - in eCharts examples it corresponds to the content of variable option. Here's an example to make it clear. To create a stacked chart you store it's definition in an ioBroker state (json format):
{ "tooltip": {"trigger": "axis","axisPointer": {"type": "shadow"}},
"legend": {},
"xAxis": [{"type": "category","data": ["Mon","Tue","Wed","Thu","Fri","Sat","Sun"]}],
"yAxis": [{"type": "value"}],
"dataZoom": [{"show": true,"start": 0, "end": 100}],
"series": [
{ "name": "Grid", "type": "bar", "color": "#a30000", "stack": "Supply",
"data": [8,19,21,50,26,0,36]},
{ "name": "PV", "type": "bar", "color": "#00a300", "stack": "Supply",
"data": [30,32,20,8,33,21,36]},
{ "name": "Household", "type": "bar", "color": "#0000a3", "stack": "Consumption",
"data": [16,12,11,13,14,9,12]},
{ "name": "Heat pump", "type": "bar", "color": "#0000ff", "stack": "Consumption",
"data": [22,24,30,20,22,12,25]},
{ "name": "Wallbox", "type": "bar", "color": "#00a3a3", "stack": "Consumption",
"data": [0,15,0,25,23,0,35]}
]
}
flexchart adapter will then show this chart:
Typically you will use Blockly or javascript to create and update content of this state.
There is another possibility to directly hand over eCharts-data via callback function within javascript. For details see below.
To be clear: This approach is not intended to be used to quickly create a simple chart. But if you have a specific idea in mind for a more complex chart, flexcharts offers the possibility to implement it.
This adapter brings it's functionality as a web extension. Therefore it is mandatory to have installed and running the web adapter (web.0). In this readme it's assumed you're using the standard port 8082 for web adapter.
When flexcharts adapter is active you can access it via http://localhost:8082/flexcharts/echarts.html (replace localhost by address of your ioBroker server).
You may use this address in iFrame widgets of vis or jarvis or other visualizations. Of course you can also use it directly in a browser tab.
To make it work, you have to provide additional parameters to tell the adapter about the source of data. Two options are availabe:
source=state=> You provide chart data in an ioBroker state (json)source=script=> You provide chart data via a script (javascript or blockly)
There are additional options available, pls. refer to reference section
To check for correct installation of adapter use built-in demo chart: http://localhost:8082/flexcharts/echarts.html?source=state&id=flexcharts.0.info.chart1
Example: http://localhost:8082/flexcharts/echarts.html?source=state&id=0_userdata.0.echarts.chart1
Flexcharts will evaluate state 0_userdata.0.echarts.chart1 as data for eChart. Try it: Create such a state and copy json data of example shown above ({ "tooltip": { ...) as state content, then access given address with a browser.
This is a bit more complicated but much more efficient and flexible. You provide the charts data directly by your JS script which is dynamically called by flexcharts adapter. You can pass additional parameters to your script by adding parameters to the http-address, e.g. &chart=chart1. All http-parameters are availabe within script in the object httpParams (see example below).
Again it's best to explain using an example. Create a script with this content (only first JS instance (javascript.0) is supported, name of script doesn't matter):
onMessage('flexcharts', (httpParams, callback) => {
const myJsonParams = (httpParams.myjsonparams ? JSON.parse(httpParams.myjsonparams) : {} );
console.log(`httpParams = ${JSON.stringify(httpParams)}`);
console.log(`myJsonParams = ${JSON.stringify(myJsonParams)}`);
chart1(result => callback(result));
});
function chart1(callback) {
const option = {
tooltip: {trigger: "axis", axisPointer: {type: "shadow"}},
legend: {},
xAxis: [{type: "category", data: ["Mon","Tue","Wed","Thu","Fri","Sat","Sun"]}],
yAxis: [{type: "value"}],
dataZoom: [{show: true, start: 0, end: 100}],
series: [
{ name: "Grid", type: "bar", color: "#a30000", stack: "Supply",
data: [8,19,21,50,26,0,36]},
{ name: "PV", type: "bar", color: "#00a300", stack: "Supply",
data: [30,32,20,8,33,21,36]},
{ name: "Household", type: "bar", color: "#0000a3", stack: "Consumption",
data: [16,12,11,13,14,9,12]},
{ name: "Heat pump", type: "bar", color: "#0000ff", stack: "Consumption",
data: [22,24,30,20,22,12,25]},
{ name: "Wallbox", type: "bar", color: "#00a3a3", stack: "Consumption",
data: [0,15,0,25,23,0,35]}
]
};
callback(option);
}
Start the script and access this address in a browser: http://localhost:8082/flexcharts/echarts.html?source=script
Same chart should show up as in previous example.
You should get two log entries of the example script:
httpParams = {"message":"mylinechart","source":"script"}
myJsonParams = {}
Additional paramters can be forwarded to the script and will be available within the script in variable httpParams. Try following command: http://localhost:8082/flexcharts/echarts.html?source=script&chart=chart1&myjsonparams={"period":"daily"}
Log entries now should look like this:
httpParams = {"source":"script","chart":"chart1","myjsonparams":"{\"period\":\"daily\"}"}`
myJsonParams = {"period":"daily"}
Pls. note, you have to use the onMessage() functionality to receive the trigger from the adapter. Default vaule for the message is flexcharts as shown in example above. You may use different messages by providing an additional parameter, e.g. to use message mycharts add &message=mycharts to http address: http://localhost:8082/flexcharts/echarts.html?source=script&message=mycharts
Javascript templates are available for some uses cases:
- chart using data from history adapter: template1
- simple chart for a heat curve: template2
- a very specific use case is available for Viessmann devices of E3 series, e.g. heat pump Vitocal 250. Refer to MyHomeMyData/ioBroker.e3oncan#35
Use ioBroker state as data source: http://localhost:8082/flexcharts/echarts.html?source=state&id=my_state_id
Use javascript as data source: http://localhost:8082/flexcharts/echarts.html?source=script
&message=my_message- sends "my_message" to javascript. UseonMessage('my_message', (httpParams, callback) => { callback(mychart); })to provide chart data. Defaults toflexcharts.&darkmode- activates dark mode visualization of ECharts.&refresh=number- do a refresh of chart ervery "number" seconds. Defaults to 60 seconds. Minimum allowed value is 5 seconds.&user_defined_arguments- Add more parameters as per your need. All arguments are available within functiononMessage()in objecthttpParams. See examples above and templates for more details.
There is a built-in demo chart available: http://localhost:8082/flexcharts/echarts.html?source=state&id=flexcharts.0.info.chart1
This should bring up a demo chart, when flexcharts- and web-adapter are running.
Note: Replace localhost by address of your ioBroker server. Replace 8082 by port number used by your Web-Adapter.
- (MyHomeMyData) Updated readme. Added sections Templates and Reference.
- (MyHomeMyData) Fix for issue #41 (findings of repository checker)
- (MyHomeMyData) Updated ECharts to version 5.5.1, see issue #40
- (MyHomeMyData) Fix for issue #39 (html warnings)
- (MyHomeMyData) Added option 'refresh' to enable auto update of chart
- (MyHomeMyData) Fix for issue #37
- (MyHomeMyData) Fixes for issue #36
- (MyHomeMyData) Fixes for issue #34
- (MyHomeMyData) Fixes for issue #33
- (MyHomeMyData) Fixed issue on windows systems (handling of file path)
- (MyHomeMyData) Adapted adapter configurations
- (MyHomeMyData) Removed main.js from package.json since it's obsolete
- (MyHomeMyData) Use web extension instead of creating own web server. Use http://localhost:8082/flexcharts/echarts.html instead of http://localhost:3100/echarts.html
- (MyHomeMyData) Changed default port to 3100 to avoid conflict with camera adapter
- (MyHomeMyData) Check for conflicting port usage during start of instance
- (MyHomeMyData) Added option to select dark mode
- (MyHomeMyData) Fixed missing 404-page
- (MyHomeMyData) Disabled sinon should interface
- (MyHomeMyData) Update of npm dependencies
- (MyHomeMyData) initial release
MIT License
Copyright (c) 2024 MyHomeMyData juergen.bonfert@gmail.com
Permission is hereby granted, free of charge, to any person obtaining a copy of this software and associated documentation files (the "Software"), to deal in the Software without restriction, including without limitation the rights to use, copy, modify, merge, publish, distribute, sublicense, and/or sell copies of the Software, and to permit persons to whom the Software is furnished to do so, subject to the following conditions:
The above copyright notice and this permission notice shall be included in all copies or substantial portions of the Software.
THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY, FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM, OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE SOFTWARE.
Additional remark: Source code of Apache ECharts is used according to Apache License, Version 2.0