jQuery UI Widgets Forums Gauges and Maps Gauges angular linear-gauge

This topic contains 8 replies, has 4 voices, and was last updated by  Dimitar 3 years, 4 months ago.

Viewing 9 posts - 1 through 9 (of 9 total)
  • Author
  • angular linear-gauge #80320

    DenisSm
    Participant

    Hi,

    i would like to ask , how can I add caption to linear-gauge in angular. Everything is working for me,
    except cap and caption properties, where i get console error Invalid property: cap for cap property
    and Invalid property: caption for caption property.
    My setting for linear-gauge inside controller with caption property looks like this :

    `$scope.gaugeSettings = {
    ranges: [
    { startValue: 10, endValue: 16, style: { fill: ‘#fad00b’, stroke: ‘#fad00b’ }, startDistance: 0, endDistance: 0 },
    { startValue: 16, endValue: 22, style: { fill: ‘#4cb848’, stroke: ‘#4cb848’ }, startDistance: 0, endDistance: 0 },
    { startValue: 22, endValue: 30, style: { fill: ‘#e53d37’, stroke: ‘#e53d37’ }, startDistance: 0, endDistance: 0 }

    ],
    //cap: { size: ‘5%’, style: { fill: ‘#2e79bb’, stroke: ‘#2e79bb’ } },
    caption:{ value: ‘°C’, position: ‘bottom’, offset: [0, 0], visible: true },
    ticksMinor: { interval: 5, size: ‘10%’ },
    ticksMajor: { interval: 20, size: ‘15%’ },
    background: { visible:false},
    colorScheme :’scheme01′,
    height:150,
    width:150,
    ticksPosition:’near’,
    pointer: { size: ‘10%’ },
    max:80,
    min:10,
    labels: { position: ‘near’, interval: 5, offset:2 },
    animationDuration: 1000
    }; `

    DenisSm

    angular linear-gauge #80354

    Dimitar
    Participant

    Hi DenisSm,

    That is because jqxLinearGauge does not have such properties, as can be seen from its API documentation (second tab). The cap and caption properties are supported by jqxGauge only.

    Best Regards,
    Dimitar

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

    angular linear-gauge #80385

    DenisSm
    Participant

    Hi Dimitar,

    silly me and you are right :-), i missed second tab. I should read more precisely before writing …

    Thank you,
    DenisSm

    angular linear-gauge #81209

    amelia
    Participant

    Is it possible to set the font name and size of labels into a Angular gauge?

    Amelia

    angular linear-gauge #81216

    Dimitar
    Participant

    Hi Amelia,

    These settings can be adjusted with CSS by modifying the style of the class jqx-gauge-label.

    Best Regards,
    Dimitar

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

    angular linear-gauge #81333

    amelia
    Participant

    I solved it using:

    $(‘.jqx-gauge-label’).css({“font”: “22px Verdana”, fill: “white”, color: “white” });
    but as the font size increases, the labels shift to the right.

    Where is the complete description of the css properties?

    Thanks.

    Amelia

    angular linear-gauge #81334

    Dimitar
    Participant

    Hi Amelia,

    We suggest to apply these modifications directly in the CSS and not with JavaScript, e.g.: https://www.jseditor.io/?key=jqxgauge-label-font-size (note the CSS tab on the left pane).

    Best Regards,
    Dimitar

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

    angular linear-gauge #93265

    jmedlock
    Participant

    Your above example does not work, changing the font size in the CSS for the jqx-guage-label doesn’t have any affect in Safari or Firefox. Is there another way to change the font size?
    Thanks
    James

    angular linear-gauge #93268

    Dimitar
    Participant

    Hi James,

    As an alternative, please try the following way of setting font-size using labels.fontSize: https://www.jseditor.io/?key=jqxgauge-increase-font-size.

    Best Regards,
    Dimitar

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

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

You must be logged in to reply to this topic.