jQWidgets Forums

Dear Peter,

As you can see in my example i am using a width of: <jqxChart [width]='”100%”‘ [height]=’400’
On load it works, but when i resize the window the graph is at its old width and not resized to the 100% of the new window size.

Thanks for the response. But when is the next version to be released? Is this within 1-2 weeks or more like month(s)?

I just updated to 4.5.1 in the hope this problem would be fixed. Unfortunately it was still not resizing. Will this be fixed soon or do we need to wait a few months? (this is kind of a showstopper for us at the moment)

Component:

export class StudieStatusComponent implements AfterViewInit, OnInit {

    @ViewChild('chartReference') myChart: jqxChartComponent;
    @ViewChild('chartReferenceEng') myChartEng: jqxChartComponent;

    public ecverloop: ECVerloop[];
    public userinfo: UserInfo;
    public titel: string = "Verloop behalen en toekennen van EC's vanaf start opleiding";

    constructor(
        private ecverloopService: ECVerloopService,
        private studiestatusService: StudieStatusService,
        private toetsresultatenService: ToetsResultatenService,
        private userInfoService: UserInfoService 

    ) { }

    ngOnInit() {
        this.getECVerloop();
        this.getStudieStatus();
        this.getToetsresultaten();
        this.getuserInfo();
    } 

       

    ngAfterViewInit(): void {
        this.myChart.createComponent(this.chartsettings);
        this.myChartEng.createComponent(this.chartsettingsEng);

   
    }

    chartsettings: jqwidgets.ChartOptions = {
        enableAnimations: true,
        showLegend: true,
        borderLineWidth: 0,
        padding: { left: 25, top: 25, right: 35, bottom: 25 },
        titlePadding: { left: 15, top: 15, right: 15, bottom: 25 },
        title: this.titel,
        xAxis:
        {
            dataField: 'datum',
            type: 'date'
        },
        colorScheme: 'scheme01',
        seriesGroups:
        [
            {
                type: 'area',
                series: [{
                    dataField: 'toegekendewaardecumm',
                    displayText: 'Toegekende waarde',
                    opacity: 0.7
                }]
            },
            {
                type: 'spline',
                series: [
                    {
                        dataField: 'virtuelewaardecumm',
                        displayText: 'Virtuele waarde',
                        opacity: 0.7
                    }
                ]
            },
            {
                type: 'spline',
                series: [
                    {
                        dataField: 'compensatiewaardecumm',
                        displayText: 'Compensatie waarde',
                        opacity: 0.7
                    }
                ]
            }
           
        ]

    }

HTML:

<div class="hidden-xs hidden-sm">
        <div [hidden]="userinfo?.taalid != '2'" class="hidden-xs hidden-sm">
            <jqxChart [width]='"100%"' [height]='400' [source]='ecverloop' [description]='false' [auto-create]='false' #chartReferenceEng></jqxChart>
        </div>
        <div [hidden]="userinfo?.taalid != '1'" class="hidden-xs hidden-sm">
            <jqxChart [width]='"100%"' [height]='400' [source]='ecverloop' [description]='false' [auto-create]='false' #chartReference></jqxChart>
        </div>
    </div>

I did some more testing this evening. As you can see in my example i am hidding one graph based on the ‘taalid’ (stands for langauge). When i don’t use this and just show both graphs only one of the graphs resizes and the other one don’t. I checked this with a brand new Angluar-CLI project with just jqwidgets. As soon as i add the second graph on the page only one of them resizes and the other one don’t.

When i remove one chart then it does work. But i need to change serveral display text based on the language settings of the user. (different chartsettings)

That is possible, but on other pages whe want to show two different charts. Then we still have these problems. So i was hoping this could be fixed.