Search code examples
ioschartsangular2-nativescript

Nativescript iOS CandleStickSeries/OhlcSeries 'Unrecognized Selector' Error


I'm using the NativeScript Angular demo code on iOS (See the code here.) and I'm getting the console debug error:

(CoreFoundation) -[NSNull y]: unrecognized selector sent to instance 0x11194cfc0

Process 10889 stopped

* thread #1, queue = 'com.apple.main-thread', stop reason = EXC_BAD_ACCESS (code=1, address=0x0)

frame #0: 0x0000000111f4bab0 libunwind.dylib`libunwind::CFI_Parser::decodeFDE(libunwind::LocalAddressSpace&, unsigned long long,

libunwind::CFI_Parser::FDE_Info*, libunwind::CFI_Parser::CIE_Info*) + 26

libunwind.dylib`libunwind::CFI_Parser::decodeFDE:

-> 0x111f4bab0 <+26>: movl (%r15), %r12d

0x111f4bab3 <+29>: leaq 0x4(%r15), %rbx

0x111f4bab7 <+33>: movl $0xffffffff, %eax ; imm = 0xFFFFFFFF

0x111f4babc <+38>: cmpq %rax, %r12

Target 0: (test) stopped.

when I load either the CandleStickSeries or OhlcSeries demo. It locks up the UI and I have to restart the app. The typescript is exactly the same as the sample code.

I have successfully loaded the PieSeries, SplineAreaSeries, and AreaSeries charts without issues.

Here's the html code for the component:

<RadCartesianChart tkExampleTitle tkToggleNavButton>

    <DateTimeCategoricalAxis 
        tkCartesianHorizontalAxis 
        dateFormat="yyyy-MM-dd"
        verticalLocation="Bottom">
    </DateTimeCategoricalAxis>

    <LinearAxis tkCartesianVerticalAxis></LinearAxis>

    <OhlcSeries 
        tkCartesianSeries 
        categoryProperty="Date" 
        openPropertyName="Open" 
        highPropertyName="High" 
        lowPropertyName="Low" 
        closePropertyName="Close"
        [items]="ohlcSourceItems">
    </OhlcSeries>

</RadCartesianChart>

tns-ios version is 4.1.1, although I also tested with 4.1.0. nativescript-ui-chart version is ^3.6.1 although I also tested with different versions and had the same result.

I can't figure out what's causing this error. When I remove the categoryProperty="Date" (which is silly, I know) property the error disappears, and the chart still doesn't load (even without error as it does for the Android version). I've rearranged the properties, removed and replaced them with attributes found on their respective API pages and just can't seem to find a solution.

I recently updated from NativeScript 4.0 to 4.1 to see if this would resolve the error, but it did not.

I've tested this in the each of the xcode hardware simulators from the iPhone 6 to the iPhone X and I get the same error when trying to load the charts.

On Android, these charts just work.

Just for fun here's my "obfuscated" package.json I'm using (keep in mind this error still occurs when I run the sample code as is):

 {
  "description": "Test",
  "license": "SEE LICENSE IN <your-license-filename>",
  "readme": "NativeScript Application",
  "repository": "<fill-your-repository-here>",
  "nativescript": {
    "id": "org.nativescript.test",
    "tns-android": {
      "version": "4.1.3"
    },
    "tns-ios": {
      "version": "4.1.1"
    }
  },
  "dependencies": {
    "@angular/animations": "^5.2.11",
    "@angular/common": "^5.2.11",
    "@angular/compiler": "^5.2.11",
    "@angular/core": "^5.2.11",
    "@angular/forms": "^5.2.11",
    "@angular/http": "^5.2.11",
    "@angular/platform-browser": "^5.2.11",
    "@angular/platform-browser-dynamic": "^5.2.11",
    "@angular/router": "^5.2.11",
    "@types/lodash": "^4.14.110",
    "lodash": "^4.17.10",
    "moment": "^2.22.2",
    "nativescript-angular": "~5.3.0",
    "nativescript-couchbase": "^1.0.18",
    "nativescript-gradient": "^2.0.1",
    "nativescript-pulltorefresh": "^2.1.1",
    "nativescript-svg": "^1.3.4",
    "nativescript-theme-core": "~1.0.4",
    "nativescript-toast": "^1.4.6",
    "nativescript-ui-autocomplete": "^3.7.1",
    "nativescript-ui-chart": "*",
    "node": "^8.11.3",
    "reflect-metadata": "~0.1.8",
    "rxjs": "^5.5.11",
    "tns-core-modules": "^4.1.0",
    "zone.js": "~0.8.2"
  },
  "devDependencies": {
    "@angular/compiler-cli": "^5.2.11",
    "@ngtools/webpack": "~1.9.4",
    "@types/jasmine": "^2.8.8",
    "babel-traverse": "6.26.0",
    "babel-types": "6.26.0",
    "babylon": "6.18.0",
    "clean-webpack-plugin": "~0.1.19",
    "copy-webpack-plugin": "~4.3.0",
    "css-loader": "~0.28.7",
    "extract-text-webpack-plugin": "~3.0.2",
    "husky": "^0.14.3",
    "lazy": "1.0.11",
    "lint-staged": "^7.2.0",
    "nativescript-dev-sass": "^1.5.0",
    "nativescript-dev-typescript": "^0.7.2",
    "nativescript-dev-webpack": "^0.11.0",
    "nativescript-worker-loader": "~0.8.1",
    "prettier": "^1.13.7",
    "raw-loader": "~0.5.1",
    "resolve-url-loader": "~2.2.1",
    "sass-loader": "~6.0.6",
    "node-sass": "^4.0.0",
    "tslint": "^5.10.0",
    "typescript": "~2.6.2",
    "uglifyjs-webpack-plugin": "~1.1.6",
    "webpack": "~3.10.0",
    "webpack-bundle-analyzer": "^2.13.1",
    "webpack-sources": "~1.1.0"
  },
  "author": "me"
}

Finally...

Here's the html code that I'm trying to get working for my own personal project. Obviously, if the demo code doesn't work, then mine won't. But here it is:

<StackLayout  backgroundColor="rgba(0,0,0,0.7)" borderRadius="3">
  <RadCartesianChart>
    <OhlcSeries 
      tkCartesianSeries
      seriesName="financialChart"
      [items]="ohlcSourceItems"
      verticalAxis="LinearAxis"
      horizontalAxis="DateTimeCategoricalAxis"
      showLabels="false"
      selectionMode="none"
      openPropertyName="Open" 
      highPropertyName="High" 
      lowPropertyName="Low"
      categoryProperty="Date"
      closePropertyName="Close">
    </OhlcSeries>
    <DateTimeCategoricalAxis 
      tkCartesianHorizontalAxis
      majorTickIntervalProperty
      majorTickInterval="5"
      dateFormat="MM/dd"
      dateTimeComponent="Day"
      verticalLocation="Bottom"
      labelSize="12"
      labelMargin="10"
      labelTextColor="#ffffff"
      lineColor="#ffffff"
      plotMode="BetweenTicks">
    </DateTimeCategoricalAxis>
    <LinearAxis 
      tkCartesianVerticalAxis 
      [minimum]="smallest"
      [maximum]="largest"
      labelLayoutMode="Outer"
      labelTextColor="#ffffff"
      labelSize="12"
      labelMargin="10"
      lineColor="#ffffff">
    </LinearAxis>
  </RadCartesianChart>
</StackLayout>

Solution

  • So the answer here had to do with the data I was sending to the chart... not the attributes OF the chart.

    I'm using moment js to format the Date string a la:

    const date = (moment(arr.time * 1000).format('YYYY/MM/DD')).toString();
    

    Turns out the chart required the format 'DD/MM/YYYY' to work.

    I updated the code to

    const date = (moment(arr.time * 1000).format('DD/MM/YYYY')).toString();
    

    and the iOS chart fired up.

    I'm assuming the word selector in

    unrecognized selector sent to instance

    refers the data object containing the data and the instance meant the chart attribute.

    ::goes back to the computer cave::