[rjwijnenParticipant]

It is indeed working again, thanks!

[rjwijnenParticipant]

I found the problem. I was importing jquery.slim.min.js instead of jquery.min.js.. My Bad.

[rjwijnenParticipant]

Any update on this? We are more than two weeks further now.

[rjwijnenParticipant]

I think i placed it in the wrong bracket, now it works. Thanks for a quick response! I then encountered something else with the resources. I did the same trick as with the source. But then i experienced that i didn’t see any values in the legend. I discovered that in my refreshfunction i need to do: this.showLegend=true;
It does not work when i set showlegend default on true and only refresh the resources property. The legend shows but stays empty. Maybe is this some kind of bug?

Also i have another question. Is it possible to make the rows/columns in weekview dynamic, so you can show more information inside the appointment?
Example:

[rjwijnenParticipant]

I am a bit further after trying some things.
Function:

refreshdata(){
 
  this.source.localData=this.events;
  this.dataAdapter = new jqx.dataAdapter(this.source)
 
 }

But the next challenge is to call this function after all the data is stored in ‘events’ property.

[rjwijnenParticipant]

Did you try: [width]='”100%”‘ ?

[rjwijnenParticipant]

Thanks for the quick response and fix! The sample project now works correctly. Next week i will try to implement it in my production project.

[rjwijnenParticipant]

Hi,

I placed my test app on: https://github.com/rjwijnen/jqxchart_resizing_problem . This is just a sample, but it shows the problem.

[rjwijnenParticipant]

See: http://www.jqwidgets.com/jquery-widgets-documentation/documentation/angular2/angular2-webpack.htm?search=

Also for your angular-cli config:

add the needed js files in your script section in angular-cli.json: For example: ( i added jqwidgets-framework to my package.json and installed it so the files are in my node-modules folder)

 "scripts": [
            "../node_modules/jqwidgets-framework/jqwidgets/jqxcore.js",
            "../node_modules/jqwidgets-framework/jqwidgets/jqxdata.js",
            "../node_modules/jqwidgets-framework/jqwidgets/jqxdraw.js",
            "../node_modules/jqwidgets-framework/jqwidgets/jqxchart.core.js"

        ],

[rjwijnenParticipant]

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.

[rjwijnenParticipant]

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)

[rjwijnenParticipant]

Did you check your tsconfig.json with the one on the site? I thought i had this error also today.

[rjwijnenParticipant]

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.

[rjwijnenParticipant]

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>

[rjwijnenParticipant]

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)

[Author]

Posts