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)
  • Author
  • Multiple line Caption #54220

    Kenmeister
    Participant

    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,
    Ken

    Multiple line Caption #54314

    Dimitar
    Participant

    Hello 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,
    Dimitar

    jQWidgets team
    http://www.jqwidgets.com/

Viewing 2 posts - 1 through 2 (of 2 total)

You must be logged in to reply to this topic.