jQuery UI Widgets › Forums › Gauges and Maps › Gauges › Decimal numbers in ranges
This topic contains 1 reply, has 2 voices, and was last updated by Dimitar 11 years, 12 months ago.
-
Author
-
Hi:
In the property “ranges”, items “startValue” and “EndValue” can not have decimal numbers? not working, only take integer values
example:
{
ranges: [{startValue: 0, endValue: 0.5, style: {fill: ‘# 009900’, stroke: ‘# 000000’}, endWidth: 10, startWidth: 5},
{startValue: 0.5, endValue: 3, style: {fill: ‘# FF9900’, stroke: ‘# 000000’}, endWidth: 20, startWidth: 10},
{startValue: 3, endValue: 4.2, style: {fill: ‘# D9007E’, stroke: ‘# 000000’}, endWidth: 40, startWidth: 20}],
value: 1.5
}Thanks
Kozto
Hello Kozto,
Unfortunately, jqxGauge does not support ranges with decimal values. They are, however, supported by jqxLinearGauge.
A possible workaround is multiplying all your values by 10 and then showing the real values with labels. An example is shown below:
<!DOCTYPE html><html lang="en"><head> <meta name="keywords" content="jQuery Gauge, Gauge, Radial Gauge, jqxGauge" /> <meta name="description" content="In the following demo you can see how you can cuztomize jqxGauge's ranges. You can set range's start and end width, start and end distance from the gauge's bundaries and custom style." /> <title id='Description'>jqxGauge displays an indicator within a range of values. Gauges can be used in a table or matrix to show the relative value of a field in a range of values in the data region, for example, as a KPI</title> <link rel="stylesheet" href="../../jqwidgets/styles/jqx.base.css" type="text/css" /> <script type="text/javascript" src="../../scripts/jquery-1.8.3.min.js"></script> <script type="text/javascript" src="../../jqwidgets/jqxcore.js"></script> <script type="text/javascript" src="../../jqwidgets/jqxchart.js"></script> <script type="text/javascript" src="../../jqwidgets/jqxgauge.js"></script> <style type="text/css"> #gaugeValue { background-image: -webkit-gradient(linear, 50% 0%, 50% 100%, color-stop(0%, #fafafa), color-stop(100%, #f3f3f3)); background-image: -webkit-linear-gradient(#fafafa, #f3f3f3); background-image: -moz-linear-gradient(#fafafa, #f3f3f3); background-image: -o-linear-gradient(#fafafa, #f3f3f3); background-image: -ms-linear-gradient(#fafafa, #f3f3f3); background-image: linear-gradient(#fafafa, #f3f3f3); -webkit-border-radius: 3px; -moz-border-radius: 3px; -ms-border-radius: 3px; -o-border-radius: 3px; border-radius: 3px; -webkit-box-shadow: 0 0 50px rgba(0, 0, 0, 0.2); -moz-box-shadow: 0 0 50px rgba(0, 0, 0, 0.2); box-shadow: 0 0 50px rgba(0, 0, 0, 0.2); padding: 10px; } </style> <script type="text/javascript"> $(document).ready(function () { $('#gaugeContainer').jqxGauge({ ranges: [{ startValue: 0, endValue: 5, style: { fill: '# 009900', stroke: '# 000000' }, endWidth: 10, startWidth: 5 }, { startValue: 5, endValue: 30, style: { fill: '# FF9900', stroke: '# 000000' }, endWidth: 20, startWidth: 10 }, { startValue: 30, endValue: 42, style: { fill: '# D9007E', stroke: '# 000000' }, endWidth: 40, startWidth: 20}], ticksMinor: { interval: 1, size: '5%' }, ticksMajor: { interval: 5, size: '9%' }, labels: { interval: 3, formatValue: function (value, position) { return value / 10; } }, value: 0, max: 42, colorScheme: 'scheme05', animationDuration: 1200 }); $('#gaugeContainer').jqxGauge('value', 15); }); </script></head><body style="background: white;"> <div style="float: left;" id="gaugeContainer"> </div></body></html>
Best Regards,
DimitarjQWidgets team
http://www.jqwidgets.com/ -
AuthorPosts
You must be logged in to reply to this topic.