nativescript-ui-charts
nativescript-ui-charts copied to clipboard
NativeScript
Pie chart breaks application on Android
Which platform(s) does your issue occur on?
- Android emulator
- API 28
- emulator Pixel 3
Please, provide the following version numbers that your issue occurs with:
- CLI: 7.0.10 "dependencies": { "@angular/animations": "~10.1.6", "@angular/common": "~10.1.6", "@angular/compiler": "~10.1.6", "@angular/core": "~10.1.6", "@angular/forms": "~10.1.6", "@angular/platform-browser": "~10.1.6", "@angular/platform-browser-dynamic": "~10.1.6", "@angular/router": "~10.1.6", "@nativescript/angular": "~10.1.7", "@nativescript/core": "~7.0.11", "@nativescript/firebase": "~11.0.0", "@nativescript/iqkeyboardmanager": "~2.0.0", "@nativescript/localize": "~5.0.2", "@nativescript/secure-storage": "^3.0.0", "@nativescript/theme": "~3.0.0", "@nativescript/ui-charts": "0.0.5", "apollo-angular-link-http": "^1.11.0", "apollo-cache-inmemory": "~1.6.6", "apollo-cache-persist": "~0.1.1", "apollo-link": "~1.2.14", "apollo-link-batch-http": "~1.2.14", "apollo-link-context": "~1.0.20", "apollo-link-error": "~1.1.13", "apollo-link-logger": "~1.2.3", "d3-ease": "^2.0.0", "graphql": "^15.3.0", "graphql-tag": "^2.11.0", "intl": "^1.2.5", "moment": "^2.29.1", "nativescript-oauth2-ext": "file:../mnd-custom-plugins/nativescript-oauth2-ext/publish/package/nativescript-oauth2-ext-3.0.0.tgz", "nativescript-sqlite": "^2.6.4", "nativescript-ui-autocomplete": "^7.0.2", "nativescript-ui-calendar": "^7.0.2", "nativescript-ui-chart": "^8.0.2", "nativescript-ui-gauge": "~7.0.2", "nativescript-ui-listview": "^9.0.4", "offix-angular": "^0.0.5", "offix-client": "^0.15.5", "reflect-metadata": "~0.1.13", "rxjs": "^6.5.5", "tslib": "1.10.0", "uuid": "^8.3.1", "zone.js": "~0.10.2" }, "devDependencies": { "@angular/cli": "~10.1.7", "@angular/compiler-cli": "~10.1.6", "@graphql-codegen/cli": "^1.17.8", "@graphql-codegen/fragment-matcher": "^1.17.8", "@graphql-codegen/introspection": "^1.17.8", "@graphql-codegen/typescript": "^1.17.9", "@graphql-codegen/typescript-apollo-angular": "^1.17.7", "@graphql-codegen/typescript-operations": "^1.17.8", "@nativescript/android": "7.0.0", "@nativescript/types": "~7.0.4", "@nativescript/webpack": "~3.0.7", "@ngtools/webpack": "~10.1.3", "@types/d3-ease": "^1.0.9", "@types/intl": "^1.2.0", "@types/node": "^13.13.19", "@types/uuid": "^7.0.4", "codelyzer": "^6.0.1", "keycloak-request-token": "^0.1.0", "node-sass": "^4.14.1", "tns-ios": "6.5.3", "ts-node": "^8.10.2", "tslint": "^6.1.3", "typescript": "~3.9.2" },
Please, tell us how to recreate the issue in as much detail as possible.
Use the following chart and run it on Android -> App should crash on startup callstack is
JS: ERROR Error: JNI Exception occurred (SIGABRT). JS: ======= JS: Check the 'adb logcat' for additional information about the error. JS: ======= chromium: [INFO:library_loader_hooks.cc(36)] Chromium logging enabled: level = 0, default verbosity = 0 System.err: An uncaught Exception occurred on "main" thread. System.err: Calling js method onCreateView failed System.err: Error: JNI Exception occurred (SIGABRT). System.err: ======= System.err: Check the 'adb logcat' for additional information about the error. System.err: ======= System.err: System.err: System.err: StackTrace: System.err: optionsBuilder(file: node_modules/@nativescript/ui-charts/options-handlers/helpers/helpers.android.js:119:0) System.err: at dataLabelsHandler(file: node_modules/@nativescript/ui-charts/options-handlers/dataLabels/dataLabels-handler.js:62:49) System.err: at HIDataLabels(file: node_modules/@nativescript/ui-charts/options-handlers/helpers/_helpers.common.js:158:276) System.err: at optionsBuilder(file: node_modules/@nativescript/ui-charts/options-handlers/helpers/helpers.android.js:119:0) System.err: at seriesHandler(file: node_modules/@nativescript/ui-charts/options-handlers/series/series-handler.js:119:25) System.err: at pieHandler(file: node_modules/@nativescript/ui-charts/options-handlers/series/pie/pie-handler.js:30:28) System.err: at HIPie(file: node_modules/@nativescript/ui-charts/options-handlers/helpers/_helpers.common.js:129:36) System.err: at optionsBuilder(file: node_modules/@nativescript/ui-charts/options-handlers/helpers/helpers.android.js:119:0) System.err: at plotOptionsHandler(file: node_modules/@nativescript/ui-charts/options-handlers/plotOptions/plotOptions-handler.js:58:25) System.err: at HIPlotOptions(file: node_modules/@nativescript/ui-charts/options-handlers/helpers/_helpers.common.js:170:197) System.err: at optionsBuilder(file: node_modules/@nativescript/ui-charts/options-handlers/helpers/helpers.android.js:119:0) System.err: at optionsHandler(file: node_modules/@nativescript/ui-charts/options-handlers/options-handler.js:93:25) System.err: at onLoaded(file: node_modules/@nativescript/ui-charts/ui-charts.android.js:7:40) System.err: at (file: node_modules/@nativescript/core/ui/core/view-base/index.js:297:0) System.err: at callFunctionWithSuper(file: node_modules/@nativescript/core/ui/core/view-base/index.js:291:0) System.err: at callLoaded(file: node_modules/@nativescript/core/ui/core/view-base/index.js:297:0) System.err: at loadView(file: node_modules/@nativescript/core/ui/core/view-base/index.js:437:0) System.err: at (file: node_modules/@nativescript/core/ui/core/view-base/index.js:216:0) System.err: at eachChildView(file: node_modules/@nativescript/core/ui/layouts/layout-base-common.js:101:0) System.err: at eachChild(file: node_modules/@nativescript/core/ui/core/view/view-common.js:700:0) System.err: at onLoaded(file: node_modules/@nativescript/core/ui/core/view-base/index.js:215:0) System.err: at onLoaded(file: node_modules/@nativescript/core/ui/core/view/index.android.js:271:0) System.err: at (file: node_modules/@nativescript/core/ui/core/view-base/index.js:297:0) System.err: at callFunctionWithSuper(file: node_modules/@nativescript/core/ui/core/view-base/index.js:291:0) System.err: at callLoaded(file: node_modules/@nativescript/core/ui/core/view-base/index.js:297:0) System.err: at loadView(file: node_modules/@nativescript/core/ui/core/view-base/index.js:437:0) System.err: at (file: node_modules/@nativescript/core/ui/core/view-base/index.js:216:0) System.err: at eachChildView(file: node_modules/@nativescript/core/ui/layouts/layout-base-common.js:101:0) System.err: at eachChild(file: node_modules/@nativescript/core/ui/core/view/view-common.js:700:0) System.err: at onLoaded(file: node_modules/@nativescript/core/ui/core/view-base/index.js:215:0) System.err: at onLoaded(file: node_modules/@nativescript/core/ui/core/view/index.android.js:271:0) System.err: at (file: node_modules/@nativescript/core/ui/core/view-base/index.js:297:0) System.err: at callFunctionWithSuper(file: node_modules/@nativescript/core/ui/core/view-base/index.js:291:0) System.err: at callLoaded(file: node_modules/@nativescript/core/ui/core/view-base/index.js:297:0) System.err: at loadView(file: node_modules/@nativescript/core/ui/core/view-base/index.js:437:0) System.err: at (file: node_modules/@nativescript/core/ui/core/view-base/index.js:216:0) System.err: at eachChildView(file: node_modules/@nativescript/core/ui/layouts/layout-base-common.js:101:0) System.err: at eachChild(file: node_modules/@nativescript/core/ui/core/view/view-common.js:700:0) System.err: at onLoaded(file: node_modules/@nativescript/core/ui/core/view-base/index.js:215:0) System.err: at onLoaded(file: node_modules/@nativescript/core/ui/core/view/index.android.js:271:0) System.err: at (file: node_modules/@nativescript/core/ui/core/view-base/index.js:297:0) System.err: at callFunctionWithSuper(file: node_modules/@nativescript/core/ui/core/view-base/index.js:291:0) System.err: at callLoaded(file: node_modules/@nativescript/core/ui/core/view-base/index.js:297:0) System.err: at loadView(file: node_modules/@nativescript/core/ui/core/view-base/index.js:437:0) System.err: at (file: node_modules/@nativescript/core/ui/core/view-base/index.js:216:0) System.err: at eachChildView(file: node_modules/@nativescript/core/ui/layouts/layout-base-common.js:101:0) System.err: at eachChild(file: node_modules/@nativescript/core/ui/core/view/view-common.js:700:0) System.err: at onLoaded(file: node_modules/@nativescript/core/ui/core/view-base/index.js:215:0) System.err: at onLoaded(file: node_modules/@nativescript/core/ui/core/view/index.android.js:271:0) System.err: at (file: node_modules/@nativescript/core/ui/core/view-base/index.js:297:0) System.err: at callFunctionWithSuper(file: node_modules/@nativescript/core/ui/core/view-base/index.js:291:0) System.err: at callLoaded(file: node_modules/@nativescript/core/ui/core/view-base/index.js:297:0) System.err: at loadView(file: node_modules/@nativescript/core/ui/core/view-base/index.js:437:0) System.err: at (file: node_modules/@nativescript/core/ui/core/view-base/index.js:216:0) System.err: at eachChildView(file: node_modules/@nativescript/core/ui/layouts/layout-base-common.js:101:0) System.err: at eachChild(file: node_modules/@nativescript/core/ui/core/view/view-common.js:700:0) System.err: at onLoaded(file: node_modules/@nativescript/core/ui/core/view-base/index.js:215:0) System.err: at onLoaded(file: node_modules/@nativescript/core/ui/core/view/index.android.js:271:0) System.err: at (file: node_modules/@nativescript/core/ui/core/view-base/index.js:297:0) System.err: at callFunctionWithSuper(file: node_modules/@nativescript/core/ui/core/view-base/index.js:291:0) System.err: at callLoaded(file: node_modules/@nativescript/core/ui/core/view-base/index.js:297:0) System.err: at loadView(file: node_modules/@nativescript/core/ui/core/view-base/index.js:437:0) System.err: at (file: node_modules/@nativescript/core/ui/core/view-base/index.js:216:0) System.err: at eachChildView(file: node_modules/@nativescript/core/ui/layouts/layout-base-common.js:101:0) System.err: at eachChild(file: node_modules/@nativescript/core/ui/core/view/view-common.js:700:0) System.err: at onLoaded(file: node_modules/@nativescript/core/ui/core/view-base/index.js:215:0) System.err: at onLoaded(file: node_modules/@nativescript/core/ui/core/view/index.android.js:271:0) System.err: at (file: node_modules/@nativescript/core/ui/core/view-base/index.js:297:0) System.err: at callFunctionWithSuper(file: node_modules/@nativescript/core/ui/core/view-base/index.js:291:0) System.err: at callLoaded(file: node_modules/@nativescript/core/ui/core/view-base/index.js:297:0) System.err: at loadView(file: node_modules/@nativescript/core/ui/core/view-base/index.js:437:0) System.err: at (file: node_modules/@nativescript/core/ui/core/view-base/index.js:216:0) System.err: at eachChildView(file: node_modules/@nativescript/core/ui/layouts/layout-base-common.js:101:0) System.err: at eachChild(file: node_modules/@nativescript/core/ui/core/view/view-common.js:700:0) System.err: at onLoaded(file: node_modules/@nativescript/core/ui/core/view-base/index.js:215:0) System.err: at onLoaded(file: node_modules/@nativescript/core/ui/core/view/index.android.js:271:0) System.err: at (file: node_modules/@nativescript/core/ui/core/view-base/index.js:297:0) System.err: at callFunctionWithSuper(file: node_modules/@nativescript/core/ui/core/view-base/index.js:291:0) System.err: at callLoaded(file: node_modules/@nativescript/core/ui/core/view-base/index.js:297:0) System.err: at loadView(file: node_modules/@nativescript/core/ui/core/view-base/index.js:437:0) System.err: at (file: node_modules/@nativescript/core/ui/core/view-base/index.js:216:0) System.err: at eachChildView(file: node_modules/@nativescript/core/ui/content-view/index.js:65:0) System.err: at eachChildView(file: node_modules/@nativescript/core/ui/page/page-common.js:99:0) System.err: at eachChild(file: node_modules/@nativescript/core/ui/core/view/view-common.js:700:0) System.err: at onLoaded(file: node_modules/@nativescript/core/ui/core/view-base/index.js:215:0) System.err: at onLoaded(file: node_modules/@nativescript/core/ui/core/view/index.android.js:271:0) System.err: at onLoaded(file: node_modules/@nativescript/core/ui/page/index.android.js:37:0) System.err: at (file: node_modules/@nativescript/core/ui/core/view-base/index.js:297:0) System.err: at callFunctionWithSuper(file: node_modules/@nativescript/core/ui/core/view-base/index.js:291:0) System.err: at callLoaded(file: node_modules/@nativescript/core/ui/core/view-base/index.js:297:0) System.err: at loadView(file: node_modules/@nativescript/core/ui/core/view-base/index.js:437:0) System.err: at _addViewCore(file: node_modules/@nativescript/core/ui/core/view-base/index.js:432:0) System.err: at _addView(file: node_modules/@nativescript/core/ui/core/view-base/index.js:418:0) System.err: at onCreateView(file: node_modules/@nativescript/core/ui/frame/index.android.js:738:0) System.err: at onCreateView(file: node_modules/@nativescript/core/ui/frame/fragment.android.js:25:0) System.err: at com.tns.Runtime.callJSMethodNative(Native Method) System.err: at com.tns.Runtime.dispatchCallJSMethodNative(Runtime.java:1302) System.err: at com.tns.Runtime.callJSMethodImpl(Runtime.java:1188) System.err: at com.tns.Runtime.callJSMethod(Runtime.java:1175) System.err: at com.tns.Runtime.callJSMethod(Runtime.java:1153) System.err: at com.tns.Runtime.callJSMethod(Runtime.java:1149) System.err: at com.tns.FragmentClass.onCreateView(FragmentClass.java:55) System.err: at androidx.fragment.app.Fragment.performCreateView(Fragment.java:2699) System.err: at androidx.fragment.app.FragmentStateManager.createView(FragmentStateManager.java:320) System.err: at androidx.fragment.app.FragmentManager.moveToState(FragmentManager.java:1199) System.err: at androidx.fragment.app.FragmentManager.moveToState(FragmentManager.java:1368) System.err: at androidx.fragment.app.FragmentManager.moveFragmentToExpectedState(FragmentManager.java:1446) System.err: at androidx.fragment.app.FragmentManager.moveToState(FragmentManager.java:1509) System.err: at androidx.fragment.app.BackStackRecord.executeOps(BackStackRecord.java:447) System.err: at androidx.fragment.app.FragmentManager.executeOps(FragmentManager.java:2181) System.err: at androidx.fragment.app.FragmentManager.executeOpsTogether(FragmentManager.java:2004) System.err: at androidx.fragment.app.FragmentManager.removeRedundantOperationsAndExecute(FragmentManager.java:1959) System.err: at androidx.fragment.app.FragmentManager.execPendingActions(FragmentManager.java:1861) System.err: at androidx.fragment.app.FragmentManager$4.run(FragmentManager.java:413) System.err: at android.os.Handler.handleCallback(Handler.java:873) System.err: at android.os.Handler.dispatchMessage(Handler.java:99) System.err: at android.os.Looper.loop(Looper.java:193) System.err: at android.app.ActivityThread.main(ActivityThread.java:6669) System.err: at java.lang.reflect.Method.invoke(Native Method) System.err: at com.android.internal.os.RuntimeInit$MethodAndArgsCaller.run(RuntimeInit.java:493) System.err: at com.android.internal.os.ZygoteInit.main(ZygoteInit.java:858)
Is there any code involved?
chartOptions: any = {
chart: {
type: 'pie',
backgroundColor: 'rgba(0,0,0,0)',
options3d: {
enabled: true,
alpha: 65,
beta: 0
},
marginTop: 0,
marginBottom: 15,
marginLeft: 0,
marginRight: 0
},
legend: {
layout: 'horizontal',
align: 'center',
verticalAlign: 'bottom',
floating: true,
enabled: true,
itemStyle: {
color: '#6E6E6E',
fontSize: '12px',
fontWeight: 'normal'
},
y: 8
},
exporting: {
enabled: false
},
credits: {
enabled: false
},
title: {
text: 'Carbohydrate Decomposition of last Week',
style: {
color: '#377576',
fontSize: '12px',
fontWeight: 'bold'
}
},
plotOptions: {
pie: {
dataLabels: {
distance: '10%',
enabled: true,
useHTML: true,
formatter:
// tslint:disable-next-line: quotemark
"function () { return '<span style=\"font-size:12px; color:#6E6E6E;margin-bottom:20px; font-weight: normal;\">' + this.y + '%</span>';}"
},
allowPointSelect: false,
depth: 15,
showInLegend: true
}
},
series: [
{
type: 'pie',
enableMouseTracking: false,
data: [
{ name: 'Dietary Fiber', y: 33.3, color: '#FECB02' },
{
name: 'Sugar',
y: 33.3,
color: '#e63e11'
},
{ name: 'Other', color: '#85bb2f', y: 33.3 }
]
}
]
};
Found the problem now. Seems like Android version does not support use of objects within series array. The following works on Android
series: [
{
type: 'pie',
animation: true,
enableMouseTracking: false,
keys: ['name', 'y', 'color'],
data: [['Dietary Fiber', 33.3, '#FECB02'], ['Sugar', 33.3, '#e63e11'], ['Other', 33.3, '#85bb2f']]
}
]
and the following does not work:
series: [
{
type: 'pie',
animation: true,
enableMouseTracking: false,
data: [
{ name: 'Dietary Fiber', y: 33.3, color: '#FECB02' },
{
name: 'Sugar',
y: 33.3,
color: '#e63e11'
},
{ name: 'Other', color: '#85bb2f', y: 33.3 }
]
}
]
