jQWidgets Forums
jQuery UI Widgets › Forums › Gauges and Maps › Gauges › semi-circle
Tagged: circle, endAngle, gauge, height, jqxgauge, semi-circle, startAngle
This topic contains 1 reply, has 2 voices, and was last updated by Dimitar 11 years, 4 months ago.
Viewing 2 posts - 1 through 2 (of 2 total)
-
Authorsemi-circle Posts
-
Is it possible to make a semi-circular gauge?
I can see how most of it works, but not the border.
Hello testuserreg,
Here is an example:
<!DOCTYPE html><html lang="en"><head> <link rel="stylesheet" href="../../jqwidgets/styles/jqx.base.css" type="text/css" /> <script type="text/javascript" src="../../scripts/jquery-1.10.2.min.js"></script> <script type="text/javascript" src="../../scripts/demos.js"></script> <script type="text/javascript" src="../../jqwidgets/jqxcore.js"></script> <script type="text/javascript" src="../../jqwidgets/jqxdata.js"></script> <script type="text/javascript" src="../../jqwidgets/jqxchart.js"></script> <script type="text/javascript" src="../../jqwidgets/jqxgauge.js"></script> <script type="text/javascript" src="../../jqwidgets/jqxbuttons.js"></script> <script type="text/javascript" src="../../jqwidgets/jqxcheckbox.js"></script> <script type="text/javascript" src="../../jqwidgets/jqxradiobutton.js"></script> <script type="text/javascript" src="../../jqwidgets/jqxexpander.js"></script> <script type="text/javascript"> $(document).ready(function () { var labels = { visible: true, position: 'inside' }; //Create jqxGauge $('#gauge').jqxGauge({ ranges: [{ startValue: 0, endValue: 90, style: { fill: '#e2e2e2', stroke: '#e2e2e2' }, startDistance: '5%', endDistance: '5%', endWidth: 13, startWidth: 13 }, { startValue: 90, endValue: 140, style: { fill: '#f6de54', stroke: '#f6de54' }, startDistance: '5%', endDistance: '5%', endWidth: 13, startWidth: 13 }, { startValue: 140, endValue: 180, style: { fill: '#db5016', stroke: '#db5016' }, startDistance: '5%', endDistance: '5%', endWidth: 13, startWidth: 13 }, { startValue: 180, endValue: 220, style: { fill: '#d02841', stroke: '#d02841' }, startDistance: '5%', endDistance: '5%', endWidth: 13, startWidth: 13 } ], cap: { radius: 0.04 }, caption: { offset: [0, -25], value: 'jQWidgets', position: 'bottom' }, value: 0, style: { stroke: '#ffffff', 'stroke-width': '1px', fill: '#ffffff' }, animationDuration: 1500, height: 175, startAngle: 0, endAngle: 180, colorScheme: 'scheme04', labels: labels, ticksMinor: { interval: 5, size: '5%' }, ticksMajor: { interval: 10, size: '10%' } }); // set gauge's value. $('#gauge').jqxGauge('setValue', 220); }); </script></head><body class='default'> <div id="gauge" style="float: left;"> </div></body></html>
You have to set the height, startAngle and endAngle properties.
Best Regards,
DimitarjQWidgets team
http://www.jqwidgets.com/ -
AuthorPosts
Viewing 2 posts - 1 through 2 (of 2 total)
You must be logged in to reply to this topic.