jQWidgets Forums
jQuery UI Widgets › Forums › Gauges and Maps › Gauges › Multiple line Caption
This topic contains 1 reply, has 2 voices, and was last updated by Dimitar 10 years, 12 months ago.
Viewing 2 posts - 1 through 2 (of 2 total)
-
AuthorMultiple line Caption Posts
-
I am using MVC.NET and creating my caption as follows:
<input type="hidden" id="ppmVal" name="ppmVal" value='@Model.PPMRevenue.ToString("C")' /> <script type="text/javascript"> $(document).ready(function () { $('#PPMRevGaugeContainer').jqxGauge({ ranges: [{ startValue: 0, endValue: 5000, style: { fill: '#e02629', stroke: '#e02629' }, startDistance: '5%', endDistance: '5%', endWidth: 13, startWidth: 13 }, { startValue: 5000, endValue: 10000, style: { fill: '#ff8000', stroke: '#ff8000' }, startDistance: '5%', endDistance: '5%', endWidth: 13, startWidth: 13 }, { startValue: 10000, endValue: 15000, style: { fill: '#fbd109', stroke: '#fbd109' }, startDistance: '5%', endDistance: '5%', endWidth: 13, startWidth: 13 }, { startValue: 15000, endValue: 20000, style: { fill: '#4bb648', stroke: '#4bb648' }, startDistance: '5%', endDistance: '5%', endWidth: 13, startWidth: 13 } ], ticksMinor: { interval: 500, size: '5%', style: { stroke: '#898989' }, visible: true }, ticksMajor: { interval: 5000, size: '9%', style: { stroke: '#898989' }, visible: true }, labels: { distance: '48%', position: 'none', interval: 5000, offset: [0, -10], visible: true, formatValue: function (value) { return value; } }, //pointer: { pointerType: 'default', style: { fill: 'theme-specific-color', stroke: 'theme-specific-color' }, length: '70%', width: '2%', visible: true }, pointer: { size: '5%' }, //cap: { size: '4%', style: { fill: 'theme-specific-color', stroke: 'theme-specific-color' }, visible: true }, caption: { value: 'PPM: ' + ppmVal.value, position: 'bottom', offset: [0, 0], visible: true }, border: { size: '10%', style: { stroke: '#cccccc' }, visible: true, showGradient: true }, style: { fill: '#ffffff', stroke: '#ffffff' }, value: 0, max: 20000, height: 250, width: 250, ticksDistance: '25%', colorScheme: 'scheme05', animationDuration: 1200 }); $('#PPMRevGaugeContainer').jqxGauge('value', "@Model.PPMRevenue"); }); </script>
This is giving me a caption like PPM: $13,450.01
I would like to put PPM and the number value on sep. lines.
Any ideas???TIA,
KenHello Ken,
Unfortunately, this cannot be achieved with the built-in caption. However, you may create a custom caption, as in the demo Default Functionality, which you will be able to easily manipulate. E.g., you can change:
$('#gaugeContainer').on('valueChanging', function (e) { $('#gaugeValue').text(Math.round(e.args.value) + ' kph'); });
to:
$('#gaugeContainer').on('valueChanging', function (e) { $('#gaugeValue').html(Math.round(e.args.value) + '<br /> kph'); });
and the value and “kph” will be on different lines.
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.