Can't create chart with Trial version

[Sergey]

Hi,

I've downloaded a Free Trial version of nativescript-telerik-ui-pro earlier today, but for some reason cannot create a simple chart described in the official documentation. I am consistently hitting a dialog "Telerik UI for NativeScript by Progress Trial" proposing to purchase a commercial license and then a message saying "NoHorizontalAxis NoVerticalAxis NoSeries". I am wondering if there is a bug in my code or I missed something in the process. 

 

Thanks

[Sergey]

I sorted this out. I am using NativeScript with Angular. It seems that examples and documentation (at least those that I've found) are outdated. I finally see the chart after changing xml to:

<RadCartesianChart id="cartesianChart">
<LinearAxis tkCartesianVerticalAxis></LinearAxis>
<DateTimeContinuousAxis tkCartesianHorizontalAxis
minimum="01/02/2015"
maximum="01/10/2015"
majorStep="Month"
dateFormat="MMM-dd"
labelFitMode="Rotate"
labelRotationAngle="1.2">
</DateTimeContinuousAxis>
<LineSeries tkCartesianSeries [items]="dateTimeSource" categoryProperty="timeStamp" valueProperty="Amount"></LineSeries>
</RadCartesianChart>

[Nikolay Tsonev]

Hi,

I am glad to hear that you have resolved your problem and you are able to keep work on your project.

Regarding the topic, all snippets shown on the  UI for NativeScript docs come from the nativescript-ui-samples, where all code samples are tested with the latest version of the plugin. 
In case, the code fragment, you have used, come from the docs, could you please provide a link to the article, and we will verify if there is a real issue with it.

Bear in mind that you could use the sample application here as a starting point and as a simple way to verify, how the components work.


Thank you in advance for your cooperation.

Regards,
nikolay.tsonev
Progress Telerik

[Sergey]

Nikolay,

Thank you very much for the quick response. I didn't mention that I am using nativescript with Angular2. Do you have a different sample repo for Angular2 users? Because if I am taking this file [1] from the samples repository that you've mentioned above and copy chart to my code. First thing I get is an error saying that only void or foreign elements can be self closed (please see the link to the stackoverflow thread describing an exactly the same issue [2]). After replacing <LinearAxis/> with <LinearAxis></LinearAxis> I get a screen that I described in my initial post with "NoHorizontalAxis NoVerticalAxis NoSeries". Then I have to change items to Angular's style [items] but only after I am changing xml to:

<RadCartesianChart id="cartesianChart">
<LineSeries tkCartesianSeries [items]="testReports" categoryProperty="timeStamp" valueProperty="Amount">
<CategoricalAxis tkCartesianHorizontalAxis></CategoricalAxis>
<LinearAxis tkCartesianVerticalAxis></LinearAxis>
</LineSeries>
</RadCartesianChart>

 

I finally see my chart.

 

[1] https://github.com/telerik/nativescript-ui-samples/blob/release/sdk/app/chart/series/line/line-series.xml

[2] https://stackoverflow.com/questions/39731661/nativescript-getting-template-parse-errors-only-void-and-foreign-elements-can

 

Thanks

[Nikolay Tsonev]

Hi,

Excuse me for my misunderstanding.

Indeed there is another sample app, which demonstrates, how to use the UI for NativeScript plugin inside a NativeScript Angular project and it could be found here.

The specific example of using DateTimeContinuousAxis in the Chart could be found in this section of the app.
There you will also find how to setup the component in the HTML without any parsing errors.

Regards,
nikolay.tsonev
Progress Telerik

[Sergey]

Great! Thank you very much for your help.