It is nice to see that these UI blocks exist!
Page: slide-test01
I’m not sure about the right way to set up the logic relationship though.
What is the logic required to populate a chart with data from the database?
How can input components, such as range sliders, be used to send data to a graph for visualization?
(And then submission…)
“Select a chart in Component Settings Panel”
I feel like this is going to involve an object and a list, but not exactly sure how.
Thanks for any help.
Hello @Causality
Currently, there is no way to manage chart settings using other ui-builder components. The chart is a visualization component. Created and configured in the visualizations section. In the ui-builder it can only be controlled by own settings.
But we might need to think about how to implement your problem.
Regards
Thank you for considering implementing this functionality.
It would certainly be useful.
For the time being, is it possible to create multiple sliders that are linked in a way that they always add up to 100%? It could function like a pie chart.
When one slider is increased, the others would need to decrease proportionally, and vice versa.
Below is a mock-up.
It is not functional, but the values of all three sliders add up to 100%
Then, can a chart be rendered with this data in another page after submitting the values?
Thank you.
Definitely possible. Should be rather simple math with data binding.
Hi Mark!
I managed to get some logic working for this.
When a slider value is changed, the change is evaluated to see if it’s greater than or less than the previous value.
If the dragged slider is increased, the other two get decreased …by the same amount, divided by 2 (the number of other sliders).
The inverse applies when the dragged slider is decreased.
The only trouble is that float values are slipping through without getting rounded.
I made a function that is supposed to round to two decimal places.
Page: sliders-total-100
Do you have any idea why this kind of thing might happen?
I’m already using the rounding function in multiple places. If anything I would like to reduce the number of times it gets called.
I tried putting it on the text readout as well. It didn’t help.
Thank you for any advice.
Hello @Causality
When you multiply numbers in JavaScript, especially floating point numbers like 0.01, you may sometimes encounter results that have many digits after the decimal point, which you might not expect. This phenomenon is due to how floating point numbers are represented and handled in computer arithmetic, specifically following the IEEE 754 standard used by JavaScript and many other programming languages.
Here’s a breakdown of why multiplying by 0.01 can lead to such results:
Floating Point Precision: JavaScript uses double-precision 64-bit binary format to represent numbers. This allows for a very wide range but not always exact precision, especially when decimals are involved. The number 0.01 in binary cannot be represented with perfect accuracy. It’s an infinite repeating binary fraction, similar to how 1/3 is repeating in decimal.
Binary Representation: In binary, 0.01 (decimal) is approximately 0.0000001010001111010111000010100011110101110000101000111101011100 in binary (up to 52 binary digits for a double-precision float). This approximation introduces a tiny error margin.
Arithmetic Operations: When you perform arithmetic operations with such approximations, the tiny errors can compound. For example, multiplying 0.01 with another floating point number combines the imprecision of both numbers, potentially magnifying the error.
Displaying Results: When JavaScript displays these numbers, it converts the internal binary representation back into a decimal, showing you a number that can sometimes have many trailing zeroes or unexpected digits beyond the decimal point.
If you’re working in situations where precision is crucial, such as financial calculations, you might need to use strategies to manage these floating point peculiarities. One common approach is to use integer-based calculations or to utilize libraries designed to handle decimal numbers more accurately.
Here’s a JavaScript code snippet demonstrating the issue and one way to handle it using toFixed() for rounding:
let product = 0.1 * 0.01;
console.log(product); // Might output a very small error like 0.0010000000000000002
// To fix the presentation:
let roundedProduct = product.toFixed(2); // Rounds to 2 decimal places
console.log(roundedProduct); // Outputs "0.00"
So you can create a custom function with the following code:
return Number.parseFloat(numberToRound).toFixed(2)
Then you can use it in service or in UI Builder
@sergey.kuk Thank you so much for this detailed explanation! 
You taught me a really important programming concept here regarding decimal precision.
This was also a good opportunity for me to try out JS inside of a custom function.
I have a feeling I will be using this knowledge over and over in the future.
Thank you Inna!
That’s excellent! I’m sure many will find it useful. 
