+- LogicMachine Forum (https://forum.logicmachine.net)
+-- Forum: LogicMachine eco-system (https://forum.logicmachine.net/forumdisplay.php?fid=1)
+--- Forum: General (https://forum.logicmachine.net/forumdisplay.php?fid=2)
+--- Thread: chartist to display nice pie... (/showthread.php?tid=3789)
RE: chartist to display nice pie... - admin - 31.10.2025
It should already be possible to do using HTML widget.
RE: chartist to display nice pie... - stianj - 31.10.2025
Ok, thanks. But in that case using CSS and not Chartist.js..?
Because I also have some of these:
Code:
// UPS Load
$(function() {
grp.listen('35/0/6', function(obj, type) {
var load = grp.getvalue('35/0/6');
var planid = 17;
var el = $('<progress id="p1" value="' + load + '" max="100"></progress>').css({
position: 'absolute',
top: '528px',
left: '100px'
}).appendTo('#plan-' + planid);
}, true);
});
That I don't quite understand how to deal with now...RE: chartist to display nice pie... - admin - 31.10.2025
Old JS examples won't work. New Visu does not use jQuery so the $ function won't work. localbus should be used instead of grp. Function reference: https://kb.logicmachine.net/misc/visu/
A major difference is that old visu rendered all plans and widgets once loaded but new Visu renders only the currently active plan.
RE: chartist to display nice pie... - stianj - 03.11.2025
This turned a bit off topic, but... I can use this:
Code:
localbus.listen('object', '35/0/6', (value) => {
if (value)
{
document.getElementById("p1").value = value;
}
})and have this in a html-widget:
Code:
<progress id="p1" value="0" max="100"></progress>and it works - after the first update of 35/0/6. Since the JS is run before the page is completely rendered, I have no way to have this value from start.
I'm sure there is a workaround I just don't understand..?
RE: chartist to display nice pie... - domotiqa - 03.11.2025
(31.10.2025, 12:36)stianj Wrote: Ok, thanks. But in that case using CSS and not Chartist.js..?
Because I also have some of these:
Code:// UPS Load $(function() { grp.listen('35/0/6', function(obj, type) { var load = grp.getvalue('35/0/6'); var planid = 17; var el = $('<progress id="p1" value="' + load + '" max="100"></progress>').css({ position: 'absolute', top: '528px', left: '100px' }).appendTo('#plan-' + planid); }, true); }); That I don't quite understand how to deal with now...
hello.
I wasn't aware of this change.
so it mean if we upgrade our customer building that use chartist, they will not have it working anymore ?
RE: chartist to display nice pie... - admin - 03.11.2025
@stianj, you need to listen to widget-ready and widget-hide events and only then execute localbus.listen / localbus.unlisten.
Or you can use slider in read-only mode without the handle to display a progress bar. Set Additional classes to slider-progress. You can adjust active / inactive color as needed.
Code:
.slider-progress {
pointer-events: none;
}
.slider-progress .slider-handle {
display: none;
}
.slider-progress .slider-track {
background-color: var(--widget-inactive-color, var(--visu-widget-inactive-color));
}
.slider-progress .slider-track div {
opacity: 1;
background-color: var(--widget-active-color, var(--visu-widget-active-color));
}@domotiqa, as mentioned before any Custom JS and CSS from old visu won't work with new Visu.
RE: chartist to display nice pie... - stianj - 03.11.2025
Thanks, using the slider widget is the right solution here (especially since I wasn't able to get any listen-events working). But this is much cleaner anyway.
Code:
.slider-progress {
pointer-events: none;
}
.slider-progress .slider-handle {
display: none;
}
.slider-progress .slider-track {
border-radius: 0.4em;
border: solid 1px #242b35;
background: linear-gradient(#191c23, #2d3341);
height: 20px;
}
.slider-progress .slider-track div {
opacity: 1;
border-radius: 0.4em;
background: linear-gradient(#357a38, transparent 85%), linear-gradient(90deg, #357a38, #4caf50)
}But it's minimum width of 200px is a bit too much for me. 150 would be much better ?
And to get back on topic, would still really, really like a way to use Chartist.js or another similar library.
RE: chartist to display nice pie... - stianj - 04.11.2025
(30.10.2025, 13:57)admin Wrote: What exactly do you want to display in this chart? Maybe making a new widget for this is a better solution.
Maybe I've changed my mind. The trend widget is actually quite good. So if there would be a widget that resembles the Home Assistant history graph then I would be happy
(Of course, given identical size and time span/resolution, the x-axis must match the trend widget)
For me that would be incredibly useful! ?
RE: chartist to display nice pie... - admin - 04.11.2025
Here's a working example for HTML progress element.
HTML widget contents:
Code:
<progress max="100" class="w-100"></progress>Custom JS, change widgetId and addr as needed:
Code:
const widgetId = 123
const addr = '1/2/3'
let progress
function onChange(value) {
progress.value = value
}
Visu.on('widget-ready', widgetId, ({ widget }) => {
progress = widget.getEl().querySelector('progress')
localbus.listen('object', addr, onChange)
})
Visu.on('widget-hide', widgetId, () => {
localbus.unlisten('object', addr, onChange)
})Trends cannot be used to display on/off times for a binary object. Trends aggregate the data without storing changes as exact timestamps.
For this you need something like Graph widget from old visu that uses data from object logs.
RE: chartist to display nice pie... - stianj - 04.11.2025
Really appreciate the example, it will for sure be useful for other things! Thank you!
And yes, I didn't mean that the Trends widget could or should be used for showing on/off states. But I was hoping you'd consider making a separate widget that does just this. It's an very convenient way of visualizing the object logs...