Example HTML Horizontal Barchart
This example shows how Web Binding can be used to easily make an HTML-based horizontal bar-chart.
This example has three major elements. The staticborder which is a solid black region, the bar inside that region that grows to show the value, and the text which gives the user the exact measured value.
<html> <head> </head> <body ardiserver="https://demo.optrix.com.au/s/pl"> <div id="staticborder" style="height: 2em; border-radius: 5px; background-color: black; padding: 3px; display: absolute; top: 0px; left: 0px; right: 0px;"> <div id="bar" style="position: absolute; max-height: 2em; border-radius: 5px; background-color: green; height: 100%;" ardibindwidth="point=Paint Line.Speed - Actual;mininput=0;maxinput=80;minoutput=0;maxoutput=100;postfix=%"> </div> <div id="text" style="position: absolute;z-index: 200; left: 1em; top: 1em; color: white; font-weight: bold;" ardibind="point=Paint Line.Speed - Actual;round=2;postfix=m/min"> </div> </div> <script src="https://demo.optrix.com.au/plugins/optrix/livepage.js"></script> </body> </html>