+- Logic Machine Forum (https://forum.logicmachine.net)
+-- Forum: LogicMachine eco-system (https://forum.logicmachine.net/forumdisplay.php?fid=1)
+--- Forum: Visualization (https://forum.logicmachine.net/forumdisplay.php?fid=9)
+--- Thread: BAR CHANGE SIZE 0 to 100% (/showthread.php?tid=3182)
BAR CHANGE SIZE 0 to 100% - Acla - 19.02.2021
How could you have in a visualization a bar that goes up and down in function of a variable from 0 to 100%
RE: BAR CHANGE SIZE 0 to 100% - admin - 22.02.2021
See this thread for a similar example: https://forum.logicmachine.net/showthread.php?tid=3075
For horizontal mode you need to change the height property to width in both CSS and Custom JS.
RE: BAR CHANGE SIZE 0 to 100% - Acla - 24.02.2021
thanks, but i need change in the order side, ..from bottom to top . Now i can do it but down to up.
RE: BAR CHANGE SIZE 0 to 100% - admin - 24.02.2021
Set additional class is bar. This single example will work on multiple elements with the same class.
Code:
$(function(){
if (typeof grp == 'undefined') {
return;
}
$('.bar').each(function(index, wrapel) {
var wrap = $(wrapel);
var addr = wrap.data('object');
var el = wrap.find('.icon');
var height = el.height();
var init = true;
grp.listen(addr, function(object) {
var value = Math.round(object.value * height / 100);
el.css('overflow', 'hidden')
.css('height', value)
.css('margin-top', height - value);
if (init) {
init = false;
setTimeout(function() {
el.css('transition', 'height 1s linear, margin-top 1s linear');
}, 10);
}
}, true);
});
});RE: BAR CHANGE SIZE 0 to 100% - Acla - 25.02.2021
Do I need to create a new class (css custom) "bar"?
What icon for css is needed? Is anyone worth it?
RE: BAR CHANGE SIZE 0 to 100% - admin - 25.02.2021
No Custom CSS is needed, just add Custom JavaScript and set Additional classes property to bar for all required visualization elements. Objects must have 1-byte scale (0..100%) data type to work properly.
Another option is to use clip-path property so icon is clipped from the top instead of from the bottom as in the previous example. Make sure that only one script is used at a time.
Code:
$(function(){
if (typeof grp == 'undefined') {
return;
}
$('.bar').each(function(_, wrapel) {
var wrap = $(wrapel);
var addr = wrap.data('object');
var el = wrap.find('.icon').css('transition', 'clip-path 1s linear');
grp.listen(addr, function(object) {
el.css('clip-path', 'inset(' + (100 - object.value) + '% 0 0 0)')
}, true);
});
});RE: BAR CHANGE SIZE 0 to 100% - Acla - 28.02.2021
When putting bar class and the java custom script indicated (both) gives me error.. Cannot reach 'split'
RE: BAR CHANGE SIZE 0 to 100% - Acla - 28.02.2021
If I put read only does nothing the css or java script
RE: BAR CHANGE SIZE 0 to 100% - admin - 01.03.2021
Read only does not affect this. Do you have anything else in Custom JavaScript? It's possible that an error there prevents the script from working. Can you provide a backup if it still does not work for you?
RE: BAR CHANGE SIZE 0 to 100% - Acla - 01.03.2021
When putting bar class and
the java custom script indicated (both) gives me error.. Cannot reach 'split'
RE: BAR CHANGE SIZE 0 to 100% - admin - 02.03.2021
Please upload backup from your device to https://wetransfer.com/ and send a link via a private message here.