angular2 jqxGauge responsive width and height

[timhortonsParticipant]

How do you set the jqxGauge responsive as you resize the screen?

[Ivo ZhulevParticipant]

Hi timhortons,

• This reply was modified 5 years, 3 months ago by  Ivo Zhulev.

[Ivo ZhulevParticipant]

Hi timhortons,

In order to make this work you must do this things:

app.component.html

<div id="gaugeContainer">
    <div id="gauge"></div>
</div>

app.component.ts

import { Component, ViewChild, AfterViewInit, ViewEncapsulation } from '@angular/core';

@Component({
    selector: 'app-root',
    templateUrl: './app.component.html',
    styles: [<code></code>
        html, body, #gaugeContainer {
            width: 100%;
            height: 100%;
        }

    <code></code>],
    encapsulation: ViewEncapsulation.None
})

export class AppComponent implements AfterViewInit {
    ngAfterViewInit(): void {
        const options = {
            width: '100%', height: '100%', ranges: this.ranges, ticksMinor: this.ticksMinor,
            ticksMajor: this.ticksMajor, labels: this.labels, style: this.style, caption: this.caption
        }
        jqwidgets.createInstance('#gauge', 'jqxGauge', options);
    }
   
    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 }
    ];
}

Best Regards,
Ivo

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

[timhortonsParticipant]

I am getting the following error:
jqxdraw.js:7 Error: <circle> attribute r: A negative value is not valid. (“-2”)

Not sure how to go about resolving this?

• This reply was modified 5 years, 2 months ago by  timhortons.

[Ivo ZhulevParticipant]

Hi timhortons,

Don’t worry about this, it won’t affect you. We will fix it soon.

Best Regards,
Ivo

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

[timhortonsParticipant]

<div id="myGauge" aria-valuenow="0" aria-valuemin="0" aria-valuemax="220" aria-disabled="false" style="width: 352px; height: 0px;" class="jqx-widget"><div style="width: 352px; height: 0px;">

Some reason the height is being set to 0px, pressure gauge is not being displayed. If I manually change the css in chrome then I can see the gauge. Any reason why the height is 0px even though I set height and width to 100% as above.

[StanislavParticipant]

Hello timhortons,

Are you setting the width and height to 100%, dynamically?
In the CSS you set the body/HTML and the gaugeContainer to width/height 100%, so they fill the whole window.
After that, you set the widget itself to 100% width/height so it will fill the gaugeContainer.

Take note of this!
If you hardcode the width/height somewhere it will not work.
Example:
width: 352; height: 250;
If you do this when resizing, this element will not resize.

Best Regards,
Stanislav

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

[StanislavParticipant]

Hello timhortons,

Can you please share some more information on your case?
The HTML(a bit more information on that) and ts/CSS would be very helpful.

Best Regards,
Stanislav

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

[Author]

Posts