jqxGaugeComponent caption value angular2 jqxWidgets 4.4

[timhortonsParticipant]

How you set the caption value based on a dynamic data. I would like to set an element of an array from response data after completing the http request:

this.caption = { offset: [0, -25], value: myName[0], position: ‘bottom’ };

I am trying to set this but it doesn’t seem to work. Any suggestions.

[Ivo ZhulevParticipant]

Hi timhortons,

This worked in my test. Heres the code:

app.component.html

<jqxGauge #myGauge
          [value]="0" [colorScheme]="'scheme04'" [animationDuration]="1500"
          [ranges]="ranges" [ticksMinor]="ticksMinor" [ticksMajor]="ticksMajor"
          [labels]="labels" [style]="style" [caption]="caption" [cap]="'radius: 0.04'">
</jqxGauge>

<button (click)="clickFunction()">Click Me!</button>

app.component.ts

export class AppComponent {
    ticksMinor: any = { interval: 5, size: '5%' };

    ticksMajor: any = { interval: 10, size: '10%' };

    labels: any = { visible: true, position: 'inside' };

    style: any = { stroke: '#ffffff', 'stroke-width': '1px', fill: '#ffffff' };

    caption: any = { offset: [0, -25], value: 'jQWidgets', position: 'bottom' };

    ranges: any[] =
    [
        { 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 }
    ];

    clickFunction() {
        this.caption = { offset: [0, -25], value: 'asdasd', position: 'bottom' };
    }
}

Best Regards,
Ivo

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

[Author]

Posts