Can't create chart with Trial version

6 posts, 0 answers
  1. Sergey
    Sergey avatar
    8 posts
    Member since:
    Jul 2017

    Posted 15 Jul Link to this post

    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

  2. Sergey
    Sergey avatar
    8 posts
    Member since:
    Jul 2017

    Posted 15 Jul Link to this post

    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>

  3. nikolay.tsonev
    Admin
    nikolay.tsonev avatar
    286 posts

    Posted 17 Jul Link to this post

    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
    Did you know that you can open private support tickets which are reviewed and answered within 24h by the same team who built the components? This is available in our UI for NativeScript Pro + Support offering.
  4. Sergey
    Sergey avatar
    8 posts
    Member since:
    Jul 2017

    Posted 17 Jul in reply to nikolay.tsonev Link to this post

    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

  5. nikolay.tsonev
    Admin
    nikolay.tsonev avatar
    286 posts

    Posted 17 Jul Link to this post

    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
    Did you know that you can open private support tickets which are reviewed and answered within 24h by the same team who built the components? This is available in our UI for NativeScript Pro + Support offering.
  6. Sergey
    Sergey avatar
    8 posts
    Member since:
    Jul 2017

    Posted 17 Jul in reply to nikolay.tsonev Link to this post

    Great! Thank you very much for your help.
Back to Top