Power consumption in your home:
(Dummy data above)
I’ve finally worked out what the diagram was that I have been looking for - it’s called a Sankey Diagram
Well, I am trying to write another widget to display this based on your measurement items. I have the rules and items working and get it to build the correct data format to populate the diagram.
What I can’t work out is how to execute the existing JS within the HABPanel widget.
I have:
- A js file with the library in html folder
- A file called cp.js which is my data file
The html has a div, which is in the widget, and there is a call to the .create method which makes magic happen. I understand that js cannot be execute like normal but cannot fathom how, if at all, I can get it to start.
Example is here: https://codepen.io/plotly/pen/OvywBa
My widget is
<div id="myDiv" oc-lazy-load="['/static/cps/cp.js', '/static/cps/plotly-latest.min.js']"><!-- Plotly chart will be drawn inside this DIV --></div>
and, well, the cp.js contains rubbish as this point. All the examples I have copied don’t work when I put the code below in
var data = {
type: "sankey",
orientation: "h",
node: {
pad: 15,
thickness: 30,
line: {
color: "black",
width: 0.5
},
label: ["A1", "A2", "B1", "B2", "C1", "C2"],
color: ["blue", "blue", "blue", "blue", "blue", "blue"]
},
link: {
source: [0,1,0,2,3,3],
target: [5,3,3,4,4,5],
value: [8,4,2,8,4,2]
}
}
var data = [data]
var layout = {
title: "Basic Sankey",
font: {
size: 10
}
}
Plotly.react('myDiv', data, layout, {showSendToCloud:false})
What I want to do:
I have a string items which build up the data in the same shape as as that needed to populate the graph but don’t know where to start to get the graph to draw on the widget.
Google has another version but it requires an online-library. Maybe easier?
https://developers.google.com/chart/interactive/docs/gallery/sankey
Help