JQXChart problem

[rjwijnenParticipant]

Hello,

I’m trying to get an working example of the JQXChart but i am getting the following errors:

Error at C:/Projecten/BMO KPIs/Angular2WebpackVisualStudioHZ/src/Angular2WebpackVisualStudio/node_modules/jqwidgets-framework/jqwidgets-ts/angular_jqxchart.ts:70:22: Property 'attrWidth' does not exist on type 'SimpleChanges'.
Error at C:/Projecten/BMO KPIs/Angular2WebpackVisualStudioHZ/src/Angular2WebpackVisualStudio/node_modules/jqwidgets-framework/jqwidgets-ts/angular_jqxchart.ts:70:43: Property 'attrHeight' does not exist on type 'SimpleChanges'.

Any idea’s why this is going wrong?

Component:

/// <reference path="../../../../node_modules/jqwidgets-framework/jqwidgets-ts/jqwidgets.d.ts" />

import { Component } from '@angular/core';
import { jqxChartComponent } from '../../../../node_modules/jqwidgets-framework/jqwidgets-ts/angular_jqxchart';

@Component({
    selector: 'ecverloop-component',
    template: 

<jqxChart [width]=’850′ [height]=’500′
[title]=’title’ [description]=’description’ [showLegend]=’true’
[enableAnimations]=’true’ [padding]=’padding’ [titlePadding]=’titlePadding’
[source]=’sampleData’ [xAxis]=’xAxis’ [colorScheme]='”scheme01″‘
[seriesGroups]=’seriesGroups’>
</jqxChart>`
})

export class ECVerloopComponent {

sampleData = [
{ Day: ‘Monday’, Keith: 30, Erica: 15, George: 25 },
{ Day: ‘Tuesday’, Keith: 25, Erica: 25, George: 30 },
{ Day: ‘Wednesday’, Keith: 30, Erica: 20, George: 25 },
{ Day: ‘Thursday’, Keith: 35, Erica: 25, George: 45 },
{ Day: ‘Friday’, Keith: 20, Erica: 20, George: 25 },
{ Day: ‘Saturday’, Keith: 30, Erica: 20, George: 30 },
{ Day: ‘Sunday’, Keith: 60, Erica: 45, George: 90 }
];
title: string = “Fitness & exercise weekly scorecard”;
description: string = “Time spent in vigorous exercise”;
padding: any = { left: 5, top: 5, right: 5, bottom: 5 };
titlePadding: any = { left: 90, top: 0, right: 0, bottom: 10 };
xAxis: any =
{
dataField: ‘Day’,
gridLines: {
visible: true
}
};
seriesGroups: any[] =
[
{
type: ‘column’,
columnsGapPercent: 50,
seriesGapPercent: 0,
valueAxis:
{
unitInterval: 10,
minValue: 0,
maxValue: 100,
displayValueAxis: true,
description: ‘Time in minutes’,
axisSize: ‘auto’,
tickMarksColor: ‘#888888’
},
series: [
{ dataField: ‘Keith’, displayText: ‘Keith’ },
{ dataField: ‘Erica’, displayText: ‘Erica’ },
{ dataField: ‘George’, displayText: ‘George’ }
]
}
];
}`

Package.json:

{
  "name": "angular2-webpack-visualstudio",
  "version": "1.0.0",
  "description": "",
  "main": "wwwroot/index.html",
  "author": "",
  "license": "ISC",
  "scripts": {
    "ngc": "ngc -p ./tsconfig-aot.json",
    "start": "concurrently \"webpack-dev-server --hot --inline --port 8080\" \"dotnet run\" ",
    "webpack-dev": "set NODE_ENV=development && webpack",
    "webpack-production": "set NODE_ENV=production && webpack",
    "build-dev": "npm run webpack-dev",
    "build-production": "npm run ngc && npm run webpack-production",
    "watch-webpack-dev": "set NODE_ENV=development && webpack --watch --color",
    "watch-webpack-production": "npm run build-production --watch --color",
    "publish-for-iis": "npm run build-production && dotnet publish -c Release"
  },
  "dependencies": {
    "@angular/common": "~2.4.6",
    "@angular/compiler": "~2.4.6",
    "@angular/core": "~2.4.6",
    "@angular/forms": "~2.4.6",
    "@angular/http": "~2.4.6",
    "@angular/platform-browser": "~2.4.6",
    "@angular/platform-browser-dynamic": "~2.4.6",
    "@angular/router": "~3.4.6",
    "@angular/upgrade": "~2.4.6",
    "angular-in-memory-web-api": "0.2.4",
    "core-js": "2.4.1",
    "reflect-metadata": "0.1.9",
    "rxjs": "5.0.3",
    "zone.js": "0.7.6",
    "@angular/compiler-cli": "~2.4.6",
    "@angular/platform-server": "~2.4.6",
    "bootstrap": "^3.3.7",
    "ie-shim": "~0.1.0",
    "ng2-adal": "0.2.8",
    "angular2-adal": "0.1.4",
    "angular2-platform-node": "~2.0.10",
    "angular2-universal": "~2.0.10",
    "angular2-universal-polyfills": "~2.0.10",
    "jqwidgets-framework": "4.5.0"

  },
  "devDependencies": {
    "@types/node": "7.0.0",
    "angular2-template-loader": "0.6.0",
    "angular-router-loader": "^0.5.0",
    "awesome-typescript-loader": "^2.2.4",
    "clean-webpack-plugin": "^0.1.15",
    "concurrently": "^3.1.0",
    "copy-webpack-plugin": "^4.0.1",
    "css-loader": "^0.26.1",
    "file-loader": "^0.9.0",
    "html-webpack-plugin": "^2.26.0",
    "jquery": "^2.2.0",
    "json-loader": "^0.5.4",
    "node-sass": "^4.3.0",
    "raw-loader": "^0.5.1",
    "rimraf": "^2.5.4",
    "sass-loader": "^4.1.1",
    "script-loader": "0.7.0",
    "source-map-loader": "^0.1.6",
    "style-loader": "^0.13.1",
    "ts-helpers": "^1.1.2",
    "tslint": "^4.3.1",
    "tslint-loader": "^3.3.0",
    "typescript": "2.0.3",
    "url-loader": "^0.5.7",
    "webpack": "^2.2.1",
    "webpack-dev-server": "2.2.1"
  },
  "-vs-binding": {
    "ProjectOpened": [
      "watch-webpack-dev"
    ]
  }
}

[Ivo ZhulevParticipant]

Hi rjwijnen,

Thanks for the report. This will be fixed in the next release. For now change the following line of code(line 70 in the angular_jqxchart.ts file) to:
if (changes.hasOwnProperty('attrWidth') || changes.hasOwnProperty('attrHeight')) {

Best Regards,
Ivo

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

[rjwijnenParticipant]

Now i am getting the following error when using AOT build (the build succeeds but when opening the page this error occured, normal build without AOT shows the chart oke and no errors) :
TypeError: this.host.jqxChart is not a function

[Ivo ZhulevParticipant]

Hi rjwijnen,

Can you please debug it and tell me exactly on which line of angular_jqxchart.ts that error occurs. And ofcourse with what do you cause it.

Best Regards,
Ivo

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

[rjwijnenParticipant]

My excuses, i think i found the problem. In my webpack config i had the commonchunkplugin configured also for the jqw js files. I my dev. config i did not have this.

[Author]

Posts