jQuery UI Widgets Forums Angular angular2 jqxGauge responsive width and height

This topic contains 7 replies, has 3 voices, and was last updated by  Stanislav 6 years ago.

Viewing 8 posts - 1 through 8 (of 8 total)
  • Author

  • timhortons
    Participant

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


    Ivo Zhulev
    Participant

    Hi timhortons,

    • This reply was modified 6 years, 1 month ago by  Ivo Zhulev.

    Ivo Zhulev
    Participant

    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/


    timhortons
    Participant

    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 6 years, 1 month ago by  timhortons.

    Ivo Zhulev
    Participant

    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/


    timhortons
    Participant

    <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.


    Stanislav
    Participant

    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/


    Stanislav
    Participant

    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/

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

You must be logged in to reply to this topic.