Chart - React to Selection, HTTP Requets Style and Layout Questions

Thread is closed for posting
91 posts, 0 answers
  1. Nikolay Iliev
    Admin
    Nikolay Iliev avatar
    351 posts

    Posted 22 Jun 2016 Link to this post

    Hi Paulson,

    When using ScrollView keep ni mind that it should "know" the sizes of its child elements which will it will scroll.
    That means that you can not set abstract sizes like auto  or * (for Grid rows and col) and should avoid using percentages for sizing child elements.

    For example how to implement scroll-view with header section, chart and  footer section.

    in your page.xml
          navigatingTo="navigatingTo"
          loaded="onPageLoaded"
          xmlns:chart="nativescript-telerik-ui-pro/chart">
     
        <ScrollView >
            <GridLayout rows="50, 400, 50" columns="*">
                    <GridLayout row="0" rows="*" columns="*" backgroundColor="green">
                        <Label text="Header" textWrap="true" /> 
                    </GridLayout>
     
                    <chart:RadCartesianChart row="1" id="cartesianChart">
                        <chart:RadCartesianChart.series>                 
                            <chart:BarSeries.horizontalAxis>
                                <chart:CategoricalAxis/>
                            </chart:BarSeries.horizontalAxis>
                            <chart:BarSeries.verticalAxis>
                                <chart:LinearAxis minimum="-10" maximum="25"/>
                            </chart:BarSeries.verticalAxis>
                            <chart:BarSeries items="{{ countriesSource }}" categoryProperty="Country" valueProperty="Amount" />
                            <chart:LineSeries items="{{ yearSource }}" categoryProperty="Country" valueProperty="SecondVal" />
                        </chart:RadCartesianChart.series>
                    </chart:RadCartesianChart>
     
                    <GridLayout row="2"  rows="*" columns="*" backgroundColor="blue">
                        <Label text="Footer" textWrap="true" />         
                    </GridLayout>
            </GridLayout>
        </ScrollView>
    </Page>

    in your page.js
    "use strict";
    var observable_1 = require("data/observable");
     
    var countriesItems = [
        { Country: "Germany", Amount: -5, SecondVal: 14 },
        { Country: "France", Amount: 13, SecondVal: -3 },
        { Country: "Bulgaria", Amount: -10, SecondVal: 17 },
        { Country: "Spain", Amount: 11, SecondVal: -9 },
        { Country: "USA", Amount: 18, SecondVal: 8 }
    ];
     
    var yearItems = [
        { Year: 200, Amount: 15 },
        { Year: 456, Amount: -8 },
        { Year: 366, Amount: 25 },
        { Year: 100, Amount: -5 },
        { Year: 340, Amount: 17 },
        { Year: 135, Amount: 20 },
    ];
     
    var viewModel = new observable_1.Observable();
    viewModel.set("countriesSource", countriesItems);
    viewModel.set("yearSource", countriesItems);
     
    function navigatingTo(args) {
        var page = args.object;
        page.bindingContext = viewModel;
    }
    exports.navigatingTo = navigatingTo;

    In the code above if you change the dimensions of your main GridLayout
    from this:
    <GridLayout rows="50, 400, 50" columns="*">

    to this: 
    <GridLayout rows="50, *, 50" columns="*">
    Then your chart won't appear because the ScrollView will give 0px for it as it does not know how much space to generate. So that is the main thing you have to consider when using scroll-view.
    From this point on the slider arrows should be easily implemented once you have your footer - there are plenty examples for creating ones -  either with custom images or with custom buttons with background images or even with iconFonts 

    Regards,
    Nikolay Iliev
    Telerik
    Do you want to have your say when we set our development plans? Do you want to know when a feature you care about is added or when a bug fixed? Explore the Telerik Feedback Portal and vote to affect the priority of the items
  2. Paulson
    Paulson avatar
    54 posts
    Member since:
    Apr 2016

    Posted 24 Jun 2016 Link to this post

    Hi,

     This code is working now.

    after i put a slide plugin (nativescript-slides) in android it is working properly but in ios slide is working but this graph is became small

     

    my code is

     

    <ScrollView>
            <GridLayout rows="50, 400, 50" columns="*">
                    <GridLayout row="0" rows="*" columns="*" backgroundColor="green">
                        <Label text="Header" textWrap="true" /> 
                    </GridLayout>
     <GridLayout row="1">
            <Slides:SlideContainer id="slideContainer" loop="true" >
              <Slides:Slide>
                    <chart:RadCartesianChart row="1" id="cartesianChart">
                        <chart:RadCartesianChart.series>                 
                            <chart:BarSeries.horizontalAxis>
                                <chart:CategoricalAxis/>
                            </chart:BarSeries.horizontalAxis>
                            <chart:BarSeries.verticalAxis>
                                <chart:LinearAxis minimum="-10" maximum="25"/>
                            </chart:BarSeries.verticalAxis>
                            <chart:BarSeries items="{{ countriesSource }}" categoryProperty="Country" valueProperty="Amount" />
                            <chart:LineSeries items="{{ yearSource }}" categoryProperty="Country" valueProperty="SecondVal" />
                        </chart:RadCartesianChart.series>
                    </chart:RadCartesianChart>
                 </Slides:Slide>

              <Slides:Slide>
                
              </Slides:Slide>

              <Slides:Slide>
                
              </Slides:Slide>
            </Slides:SlideContainer>
          </GridLayout>
                    <GridLayout row="2"  rows="*,*" columns="*" backgroundColor="#fff">
                        <StackLayout row="0" col="0" orientation="horizontal" horizontalAlignment="center" style="margin-top:10;">
                          <Image src="~/images/left.png" tap="prev" cssClass="arrowLeft" />
                          <StackLayout orientation="vertical" horizontalAlignment="center">
                            <Label text=" 2ND QUARTER - 015" cssClass="slideLabel" />
                          </StackLayout>
                          <Image src="~/images/right.png" tap="next" cssClass="arrowRight" />
                        </StackLayout>
                      </GridLayout>
            </GridLayout>
        </ScrollView>

  3. Paulson
    Paulson avatar
    54 posts
    Member since:
    Apr 2016

    Posted 24 Jun 2016 in reply to Paulson Link to this post

    scroll touch in graph is also not working
  4. Nikolay Iliev
    Admin
    Nikolay Iliev avatar
    351 posts

    Posted 24 Jun 2016 Link to this post

    Hi Paulson,

    I have researched your code and the reason why your chart is not displaying correctly is because the plugin nativescript-slides is using AbsoluteLayout to create each slide. By default, the behaviour of absolute elements with no predefined sizes is different in iOS and Android and this is the reason for the different result.
    However the solution is pretty simple - you just need to give a size for your charts (or whatever parent container you are going to use in your different slides)

    In your case change this line of code
                           
    <chart:RadCartesianChart id="cartesianChart" >

    With this line
    <chart:RadCartesianChart id="cartesianChart" height="400">

    Both iOS and Android seems to handle well width but still if it is applicable you might want to set it as well.

    Regards,
    Nikolay Iliev
    Telerik
    Do you want to have your say when we set our development plans? Do you want to know when a feature you care about is added or when a bug fixed? Explore the Telerik Feedback Portal and vote to affect the priority of the items
  5. Nikolay Iliev
    Admin
    Nikolay Iliev avatar
    351 posts

    Posted 24 Jun 2016 Link to this post

    Hi Paulson,

    By "scroll touch " I am understanding the swipe gesture to change the different slides - if my understanding is correct then it is working on both Android and iOS for the sample project. Just keep in mind that you have to make several swipes for passing over the empty slides in your code sample (or create other charts to test it with content)

    Regards,
    Nikolay Iliev
    Telerik
    Do you want to have your say when we set our development plans? Do you want to know when a feature you care about is added or when a bug fixed? Explore the Telerik Feedback Portal and vote to affect the priority of the items
  6. Paulson
    Paulson avatar
    54 posts
    Member since:
    Apr 2016

    Posted 25 Jun 2016 Link to this post

    Hi,

    In chart i need to change color in bar chart then in ios also should be same which i used in android now the colours changing in ios and android...

    i did  design in android but the same design in ios is not looking good.. can i do separate page for ios

  7. Nikolay Iliev
    Admin
    Nikolay Iliev avatar
    351 posts

    Posted 27 Jun 2016 Link to this post

    Hi Paulson,

    To have a different UX in Android and iOS you can use platform qualifiers to specify different files for usage under different OS and screen resolutions.
    For example, you can have:
    page.ios.css (higher priority then page.css)
    page.android.css (higher priority then page.css)
    page.css  
    (common styling which will be valid for both OS) 

    And your styles will load accordingly to the operating system loaded.
    Full documentation article about this option you can find here.

    Also, you can specify different screen pages,(more about this option here).

    Specifically, for "telerik-ui-pro" you can further style your charts with properties like
    strokeColor, fillColor, strokeWidth (more about this you can find here)

    Regards,
    Nikolay Iliev
    Telerik
    Do you want to have your say when we set our development plans? Do you want to know when a feature you care about is added or when a bug fixed? Explore the Telerik Feedback Portal and vote to affect the priority of the items
  8. Paulson
    Paulson avatar
    54 posts
    Member since:
    Apr 2016

    Posted 27 Jun 2016 Link to this post

    hi,

    Can i set rotation in disable mode?

    i did this code

    <Page xmlns="http://schemas.nativescript.org/tns.xsd"
          navigatingTo="navigatingTo"
          loaded="onPageLoaded"
          xmlns:chart="nativescript-telerik-ui-pro/chart">

        <ScrollView >
            <GridLayout rows="50, 400, 50" columns="*">
                    <GridLayout row="0" rows="*" columns="*"backgroundColor="green">
                        <Label text="Header" textWrap="true" /> 
                    </GridLayout>

                    <chart:RadCartesianChart row="1" id="cartesianChart">
                        <chart:RadCartesianChart.series>                 
                            <chart:BarSeries.horizontalAxis>
                                <chart:CategoricalAxis/>
                            </chart:BarSeries.horizontalAxis>
                            <chart:BarSeries.verticalAxis>
                                <chart:LinearAxis minimum="-10"maximum="25"/>
                            </chart:BarSeries.verticalAxis>
                            <chart:BarSeries items="{{ countriesSource }}"categoryProperty="Country" valueProperty="Amount" />
                            <chart:LineSeries items="{{ yearSource }}"categoryProperty="Country" valueProperty="SecondVal" />
                        </chart:RadCartesianChart.series>
                    </chart:RadCartesianChart>

                    <GridLayout row="2"  rows="*" columns="*"backgroundColor="blue">
                        <Label text="Footer" textWrap="true" />         
                    </GridLayout>
            </GridLayout>
        </ScrollView>
    </Page>

    but here when i touch on chart section scrollview is not working but it is working end of the right part of chart screen, i need scroll view swipe selection entire screen or full chart i need scroll view on touch or swipe.

    another one question

    exports.chartNext = function() {
        var topmost = frameModule.topmost();
        topmost.navigate("./views/chart/chartSecond");
    };

    i did this code for navigate one page to another page in ios it is working very well but in android some version it is not working like lollipop.  Why?

    is that any update problem or else?

  9. Nikolay Iliev
    Admin
    Nikolay Iliev avatar
    351 posts

    Posted 27 Jun 2016 Link to this post

    H Paulson,

    I have tested the scenario you have described and on my side, the chart is scrollable and works as expected.
    Can you specify on what platform you are testing (OS, API Level, emulator/device)

    About your second question - you should "cache" your topmost when your page is loaded or navigatedTo.
    For example
    var frameModule = require("ui/frame");
    var topmost;
     
    function navigatingTo(args) {
        var page = args.object;
        topmost = frameModule.topmost();
    }
    exports.navigatingTo = navigatingTo;
     
    function goToSubPage() {
        topmost.navigate("sub-page");
    }
    exports.goToSubPage = goToSubPage;

    I have tested it on 4 different API version and it works perfectly.

    Regards,
    Nikolay Iliev
    Telerik
    Do you want to have your say when we set our development plans? Do you want to know when a feature you care about is added or when a bug fixed? Explore the Telerik Feedback Portal and vote to affect the priority of the items
  10. Paulson
    Paulson avatar
    54 posts
    Member since:
    Apr 2016

    Posted 27 Jun 2016 Link to this post

    J

     

     

    When I run my app showing this error how can solve this error?

     

    Java.lang.RuntimeException: Unable to start activity ComponentInfo{org.nativescript.MyApp/com.tns.NativeScriptActivity}: com.tns.NativeScriptException: 
    Calling js method onCreate failed

    TypeError: Cannot read property 'ContentLayout' of undefined
    File: "/data/data/org.nativescript.MyApp/files/app/tns_modules/ui/frame/frame.js, line: 221, column: 47

    StackTrace: 
    Frame: function:'Frame._createUI', file:'/data/data/org.nativescript.MyApp/files/app/tns_modules/ui/frame/frame.js', line: 221, column: 48
    Frame: function:'View._onContextChanged', file:'/data/data/org.nativescript.MyApp/files/app/tns_modules/ui/core/view.js', line: 209, column: 14
    Frame: function:'View._onAttached', file:'/data/data/org.nativescript.MyApp/files/app/tns_modules/ui/core/view.js', line: 165, column: 14
    Frame: function:'NativeScriptActivity.onCreate', file:'/data/data/org.nativescript.MyApp/files/app/tns_modules/ui/frame/frame.js', line: 613, column: 18

    at android.app.ActivityThread.performLaunchActivity(ActivityThread.java:2329)
    at android.app.ActivityThread.handleLaunchActivity(ActivityThread.java:2389)
    at android.app.ActivityThread.access$900(ActivityThread.java:147)
    at android.app.ActivityThread$H.handleMessage(ActivityThread.java:1296)
    at android.os.Handler.dispatchMessage(Handler.java:102)
    at android.os.Looper.loop(Looper.java:135)
    at android.app.ActivityThread.main(ActivityThread.java:5254)
    at java.lang.reflect.Method.invoke(Native Method)
    at java.lang.reflect.Method.invoke(Method.java:372)
    at com.android.internal.os.ZygoteInit$MethodAndArgsCaller.run(ZygoteInit.java:898)
    at com.android.internal.os.ZygoteInit.main(ZygoteInit.java:693)
    Caused by: com.tns.NativeScriptException: 
    Calling js method onCreate failed

    TypeError: Cannot read property 'ContentLayout' of undefined
    File: "/data/data/org.nativescript.MyApp/files/app/tns_modules/ui/frame/frame.js, line: 221, column: 47

    StackTrace: 
    Frame: function:'Frame._createUI', file:'/data/data/org.nativescript.MyApp/files/app/tns_modules/ui/frame/frame.js', line: 221, column: 48
    Frame: function:'View._onContextChanged', file:'/data/data/org.nativescript.MyApp/files/app/tns_modules/ui/core/view.js', line: 209, column: 14
    Frame: function:'View._onAttached', file:'/data/data/org.nativescript.MyApp/files/app/tns_modules/ui/core/view.js', line: 165, column: 14
    Frame: function:'NativeScriptActivity.onCreate', file:'/data/data/org.nativescript.MyApp/files/app/tns_modules/ui/frame/frame.js', line: 613, column: 18

    at com.tns.Runtime.callJSMethodNative(Native Method)
    at com.tns.Runtime.dispatchCallJSMethodNative(Runtime.java:861)
    at com.tns.Runtime.callJSMethodImpl(Runtime.java:726)
    at com.tns.Runtime.callJSMethod(Runtime.java:712)
    at com.tns.Runtime.callJSMethod(Runtime.java:693)
    at com.tns.Runtime.callJSMethod(Runtime.java:683)
    at com.tns.NativeScriptActivity.onCreate(NativeScriptActivity.java:13)
    at android.app.Activity.performCreate(Activity.java:5933)
    at android.app.Instrumentation.callActivityOnCreate(Instrumentation.java:1105)
    at android.app.ActivityThread.performLaunchActivity(

  11. Nikolay Iliev
    Admin
    Nikolay Iliev avatar
    351 posts

    Posted 28 Jun 2016 Link to this post

    Hi Paulson,

    There are several possibilities for the cause of this error message.
    As I do not have the project that invokes that behaviour I can not reproduce it but still there
     are some steps you can try to resolve it.

    Remove the platforms folder - manually or with the following commands. The idea is to reset your gradle file
    and all cached files
    tns platform remove android
    tns platform remove ios
     
    tns platform add android

    And then rebuild your app. with
    tns run android

    However if this does not resolve your issue let us know what version of NativeScript you are experiencing it,(possible solution is upgrading to the latest core and modules following this instructions)
    Also, provide some code base or sample project with which you are throwing the error and the used node.js and Android SDK versions. Is this your working project or a new one - if this is the project you are working on: have you added some new plugins or specific code that can be responsible for the error.


    Regards,
    Nikolay Iliev
    Telerik
    Do you want to have your say when we set our development plans? Do you want to know when a feature you care about is added or when a bug fixed? Explore the Telerik Feedback Portal and vote to affect the priority of the items
  12. Paulson
    Paulson avatar
    54 posts
    Member since:
    Apr 2016

    Posted 29 Jun 2016 Link to this post

    iTunes Store operation failed.
    No suitable application records were found. Verify your bundle identifier 'org.nativescript.MyApp' is correct.

    i tried to upload my nativescript app in appstore but this error is showing.. how can i upload my app in mac itunes.. can you give more explanation for this.... step by step..

  13. Nikolay Iliev
    Admin
    Nikolay Iliev avatar
    351 posts

    Posted 29 Jun 2016 Link to this post

    Hi Paulson,

    An extended step-by-step tutorial for publishing in iOS you can find at the following link: https://docs.nativescript.org/core-concepts/publishing-ios-apps#publishing-a-nativescript-ios-app-in-the-app-store

    In this article, you will find information that you need to set, modify and provide in order to have successfully published your application in Apple App Store.The last section of this article is about enrolling in iTunes Connect.
    I recommend going through the whole material as there are many mandatory requirements from Apple that needs to be fulfilled.

    As a side note with our next release (version 2.1) the workflow for providing the mandatory AppIcons and LaunchScreen (images or storyboards) will be simplified and an additional article on that matter will be released as well.

    After reading the step-bu-step introduction you can also check our CLI workflow for publishing in iOS from the following link: https://www.nativescript.org/blog/details/tip-using-nativescript-cli-to-publish-an-app-in-the-ios-app-store

    Regards,
    Nikolay Iliev
    Telerik
    Do you want to have your say when we set our development plans? Do you want to know when a feature you care about is added or when a bug fixed? Explore the Telerik Feedback Portal and vote to affect the priority of the items
  14. Paulson
    Paulson avatar
    54 posts
    Member since:
    Apr 2016

    Posted 30 Jun 2016 Link to this post

    ERROR ITMS-90096: "Your binary is not optimized for iPhone 5 - New iPhone apps and app updates submitted must support the 4-inch display on iPhone 5 and must include a launch image referenced in the Info.plist under UILaunchImages with a UILaunchImageSize value set to {320, 568}. Launch images must be PNG files and located at the top-level of your bundle, or provided within each .lproj folder if you localize your launch images. Learn more about iPhone 5 support and app launch images by reviewing the 'iOS Human Interface Guidelines' at 'https://developer.apple.com/library/ios/documentation/UserExperience/Conceptual/MobileHIG/IconsImages/IconsImages.html#//apple_ref/doc/uid/TP40006556-CH14-SW5' and the 'iOS App Programming Guide' at 'https://developer.apple.com/library/ios/documentation/iPhone/Conceptual/iPhoneOSProgrammingGuide/App-RelatedResources/App-RelatedResources.html#//apple_ref/doc/uid/TP40007072-CH6-SW12'."
    ERROR ITMS-90096: "Your binary is not optimized for iPhone 5 - New iPhone apps and app updates submitted must support the 4-inch display on iPhone 5 and must include a launch image referenced in the Info.plist under UILaunchImages with a UILaunchImageSize value set to {320, 568}. Launch images must be PNG files and located at the top-level of your bundle, or provided within each .lproj folder if you localize your launch images. Learn more about iPhone 5 support and app launch images by reviewing the 'iOS Human Interface Guidelines' at 'https://developer.apple.com/library/ios/documentation/UserExperience/Conceptual/MobileHIG/IconsImages/IconsImages.html#//apple_ref/doc/uid/TP40006556-CH14-SW5' and the 'iOS App Programming Guide' at 'https://developer.apple.com/library/ios/documentation/iPhone/Conceptual/iPhoneOSProgrammingGuide/App-RelatedResources/App-RelatedResources.html#//apple_ref/doc/uid/TP40007072-CH6-SW12'."

    When i run in ios showing this error how to fix this..?

     

     

     

  15. Nikolay Tsonev
    Admin
    Nikolay Tsonev avatar
    340 posts

    Posted 30 Jun 2016 Link to this post

    Hi Paulson,
    Thank you for reporting your problem.

    I have made a little research and found that this issue could be caused due to incorrect image format for  launch image or not providing support for all iPhone 5 screens. In regard to that I found several discussions, which could help you to resolve your problem:

    http://stackoverflow.com/questions/23780432/xcode-error-while-validation-your-binary-is-not-optimized-for-iphone-5

    http://www.appcoda.com/how-to-add-splash-screen-in-your-ios-app/

    https://github.com/Simbul/baker/issues/1201

    In addition you could also review this article, where have been described how to Creating AppIcons and Launch Screens for iOS for your NativeScript project.



    I hope this information would be useful. I will be glad to assist you further.

    Regards,
    nikolay.tsonev
    Telerik
    Do you want to have your say when we set our development plans? Do you want to know when a feature you care about is added or when a bug fixed? Explore the Telerik Feedback Portal and vote to affect the priority of the items
  16. Paulson
    Paulson avatar
    54 posts
    Member since:
    Apr 2016

    Posted 06 Jul 2016 Link to this post

    hi,

    In PieSeries chart can i change each pie in different colour my own color... 

    how will do?

  17. Nikolay Iliev
    Admin
    Nikolay Iliev avatar
    351 posts

    Posted 06 Jul 2016 Link to this post

    Hi Paulson,

    Yes, you can customize each pie entry with your own fillColor, strokeColor and strokeWidth.

    Here is an example syntax on how to customize each PaletteEntry (including the colors of the selected state)
    <chart:RadPieChart row="1" selectionMode="Single" margin="20">
        <chart:RadPieChart.series>
            <chart:PieSeries seriesName="Pie" showLabels="true" selectionMode="DataPoint" expandRadius="0.1" outerRadiusFactor="0.8" items="{{ pieSource }}" valueProperty="Amount" legendLabel="Country">
                <chart:PieSeries.labelStyle>
                    <chart:PointLabelStyle  margin="-55" textFormat="%2.0f%%" textColor="White" textSize="10" />
                </chart:PieSeries.labelStyle>
            </chart:PieSeries>
        </chart:RadPieChart.series>
         
        <chart:RadPieChart.legend>
            <chart:RadLegendView position="Top" title="" height="70"/>
        </chart:RadPieChart.legend>
         
        <chart:RadCartesianChart.palettes>
                <chart:Palette seriesName="Pie">
                <chart:Palette.entries>
                    <chart:PaletteEntry fillColor="#08caab" strokeWidth="0" />
                    <chart:PaletteEntry fillColor="#026968" strokeWidth="0" />
                    <chart:PaletteEntry fillColor="#aee403" strokeWidth="0" />
                    <chart:PaletteEntry fillColor="#3c5afe" strokeWidth="0" />
                </chart:Palette.entries>
            </chart:Palette> -->
            <chart:Palette seriesName="Pie" seriesState="Selected">
                <chart:Palette.entries>
                    <chart:PaletteEntry fillColor="#08caab" strokeWidth="2" strokeColor="#026555" />
                    <chart:PaletteEntry fillColor="#026968" strokeWidth="2" strokeColor="#003434" />
                    <chart:PaletteEntry fillColor="#aee403" strokeWidth="2" strokeColor="#577202"/>
                    <chart:PaletteEntry fillColor="#3c5afe" strokeWidth="2" strokeColor="#1e2d7f" />
                </chart:Palette.entries>
            </chart:Palette>
        </chart:RadCartesianChart.palettes>
             
    </chart:RadPieChart>

    The full example for this case ca be found at the following link:
     https://github.com/NativeScript/nativescript-marketplace-demo
    Note that at this very moment, the demo above is optimized for iOS - Android optimization coming soon.


    Regards,
    Nikolay Iliev
    Telerik by Progress
    Do you want to have your say when we set our development plans? Do you want to know when a feature you care about is added or when a bug fixed? Explore the Telerik Feedback Portal and vote to affect the priority of the items
  18. Paulson
    Paulson avatar
    54 posts
    Member since:
    Apr 2016

    Posted 08 Jul 2016 Link to this post

    CONSOLE ERROR file:///app/tns_modules/trace/trace.js:160:30: Binding: Binding error while setting property items of BarSeries: ReferenceError: Can't find variable: TKChartSeriesSelection

    this error showing in ios 
    but same chart working in android? how can i fix this

  19. Nikolay Iliev
    Admin
    Nikolay Iliev avatar
    351 posts

    Posted 08 Jul 2016 Link to this post

    Hello Paulson,

    Can you please share the sample project or code that is throwing that error in order to reproduce it locally.

    Regards,
    Nikolay Iliev
    Telerik by Progress
    Do you want to have your say when we set our development plans? Do you want to know when a feature you care about is added or when a bug fixed? Explore the Telerik Feedback Portal and vote to affect the priority of the items
  20. suralal
    suralal avatar
    18 posts
    Member since:
    Mar 2016

    Posted 08 Jul 2016 Link to this post

    .DS_Storebossapp
    sh-3.2# tns create BossAppDemo
    Project BossAppDemo was successfully created.


    sh-3.2# cd BossAppDemo/
    sh-3.2# tns run ios
    Copying template files...
    Project successfully created.
    Cannot read property 'id' of undefined
    # run ios
    ┌──────────────────────────────┬───────────────────────────────────────────┐
    │ Usage                        │ Synopsis                                  │
    │ Run on all connected devices │ $ tns run ios [--release] [--justlaunch]  │
    │ Run on a selected connected  │ $ tns run ios [--device <Device ID>] [-   │
    │ device                       │ -release] [--justlaunch]                  │
    │ Start an emulator and run    │ $ tns run ios --emulator [<Emulator       │
    │ the app inside it            │ Options>] [--release]                     │
    └──────────────────────────────┴───────────────────────────────────────────┘


    Runs your project on a connected iOS device or in the iOS Simulator, if configured. This is shorthand for prepare, build, and deploy. While your app is running, prints the output from the application in the console.


    IMPORTANT: Before building for iOS device, verify that you have configured a valid pair of certificate and provisioning profile on your OS X system. 


    ### Options


        * --device - Specifies a connected device on which to run the app.
        * --emulator - If set, runs the app in a native emulator for the target platform, if configured. When set, you can also set any other valid combination of emulator options as listed by $ tns help emulate ios. You cannot use --device and --emulator simultaneously.
        * --release - If set, produces a release build. Otherwise, produces a debug build.
        * --justlaunch - If set, does not print the application output in the console.


    ### Attributes


        * <Device ID> is the index or name of the target device as listed by $ tns device ios
        * <Emulator Options> is any valid combination of options as listed by $ tns help emulate ios


    Sending exception report (press Ctrl+C to stop).....
    sh-3.2# 

     

     In ios Showing this error but this same new created app running in android 

    How can i solve this error?

     

  21. Nikolay Iliev
    Admin
    Nikolay Iliev avatar
    351 posts

    Posted 08 Jul 2016 Link to this post

    Hi Paulson,

    Based on your error log it seems that you are trying to run your app on a connected device for which you do not have provisioning profile set. 
    https://docs.nativescript.org/core-concepts/publishing-ios-apps#certificates-identifiers--profiles

    Without provisioning profile, you can run your apps on simulator only.
    To do that either disconnect your iOS device, start your simulator and run
    tns run ios

    or use
    tns run ios --emulator

    Regards,
    Nikolay Iliev
    Telerik by Progress
    Do you want to have your say when we set our development plans? Do you want to know when a feature you care about is added or when a bug fixed? Explore the Telerik Feedback Portal and vote to affect the priority of the items
  22. suralal
    suralal avatar
    18 posts
    Member since:
    Mar 2016

    Posted 08 Jul 2016 Link to this post

     how to debug nativescript app ui?
  23. Nikolay Iliev
    Admin
    Nikolay Iliev avatar
    351 posts

    Posted 08 Jul 2016 Link to this post

    Hi Paulson,

    You can debug your app via the CLI or via VSCode.
    To learn more about the debug options and requirements please refer to this
    documentation article: https://docs.nativescript.org/core-concepts/debugging.html#debugging-with-visual-studio-code

    Also here you can find a nice video tutorial from a known NativeScript community member..
    And at this link, you can find the NativeScript youtube channel introduction for debugging in nativeScript.

    Regards,
    Nikolay Iliev
    Telerik by Progress
    Do you want to have your say when we set our development plans? Do you want to know when a feature you care about is added or when a bug fixed? Explore the Telerik Feedback Portal and vote to affect the priority of the items
  24. Paulson
    Paulson avatar
    54 posts
    Member since:
    Apr 2016

    Posted 11 Jul 2016 Link to this post

    Hai,

    when i run my code in ios showing this error how can fix it.?

    CONSOLE ERROR file:///app/tns_modules/trace/trace.js:160:30: Binding: Binding error while setting property items of BarSeries: ReferenceError: Can't find variable: TKChartSeriesSelection

    My xml is here

    <Page loaded="pageLoaded"
      navigatingTo="navigatingTo"
     xmlns:dd="nativescript-drop-down"
     xmlns:chart="nativescript-telerik-ui-pro/chart"
     xmlns:Slides="nativescript-slides" actionBarHidden="true">
          
      <!-- <ActionBar>
        <ActionBar.titleView>
         <NavigationButton visibility="collapsed"/>
          <GridLayout columns="auto, auto" rows="*,*" cssClass="header">
            <Image src="~/images/logo_tagline.png" col="0" row="0" horizontalAlignment="left" verticalAlignment="center" cssClass="logo"/>
            <Image src="~/images/profile_picture.png" col="1" row="0" horizontalAlignment="right" verticalAlignment="center" cssClass="profilePic" />
          </GridLayout>
        </ActionBar.titleView>
      </ActionBar>  -->
          <ScrollView>
            <GridLayout rows="180, 410, 100" columns="*">
              <GridLayout rows="*, *,*" columns="*, *, *, *" orientation="vertical"> 
                <GridLayout row="0" col="0" colSpan="4" height="70">
                  <Image src="~/images/logo_tagline.png" horizontalAlignment="left" verticalAlignment="center" cssClass="logo" />
                  <Image src="~/images/profile_picture.png" horizontalAlignment="right" verticalAlignment="center" cssClass="profilePic" tap="pieChart" />
                </GridLayout>
                <GridLayout row="1" col="0" colSpan="4" style.backgroundColor="#9E3293"  height="50">
                  <Label width="70%" text="Accounts Profit and Loss Statement" cssClass="textCenter" horizontalAlignment="left" verticalAlignment="center" />
                  <GridLayout width="30%" height="40" style.backgroundColor="#CDCDCD" horizontalAlignment="right" verticalAlignment="center" cssClass="dropDown">
                    <dd:DropDown items="{{ items }}" selectedIndex="{{ selectedIndex }}" cssClass="dropIcon"/>
                  </GridLayout>
                </GridLayout>
                <GridLayout row="2" col="0" colSpan="4">
                  <StackLayout style.backgroundColor="#BDBDBD" cssClass="dropDownlength">
                    <dd:DropDown items="{{ cash }}" selectedIndex="{{ selectedIndex }}" cssClass="dropDetails"/>
                  </StackLayout>
                </GridLayout>
              </GridLayout>
              <GridLayout row="1" height="500">
                <Slides:SlideContainer id="slideContainer" loop="true" height="400">
                  <Slides:Slide  height="500">
                    <chart:RadCartesianChart id="chart" selectionMode="Single" height="500">
                      <chart:RadCartesianChart.series>
                          <chart:BarSeries seriesName="Bar1"  categoryProperty="name" items="{{ info.chartSource1 }}" valueProperty="ExpenseDirect" selectionMode="Series" stackMode="Stack" showLabels="true" />
                          <chart:BarSeries seriesName="Bar" items="{{ info.chartSource1 }}" valueProperty="ExpenseExceptDirect" selectionMode="Series" stackMode="Stack" categoryProperty="name" showLabels="true" />
                           <chart:BarSeries seriesName="Bar2" valueProperty="netProfit" items="{{ info.chartSource1 }}" selectionMode="Series" stackMode="Stack" categoryProperty="name" showLabels="true" />
                      </chart:RadCartesianChart.series>
                      <chart:RadCartesianChart.horizontalAxis>
                          <chart:CategoricalAxis labelTextColor="#cb4b16" labelSize="10" lineThickness="2" lineColor="Red" />
                      </chart:RadCartesianChart.horizontalAxis>
                      <chart:RadCartesianChart.verticalAxis>
                          <chart:LinearAxis labelTextColor="Green" lineThickness="2" lineColor="Red" />
                      </chart:RadCartesianChart.verticalAxis>
                      <chart:RadCartesianChart.grid>
                        <chart:RadCartesianChartGrid 
                            horizontalLinesVisible="true" 
                            verticalLinesVisible="false" 
                            verticalStripLinesVisible="false"
                            horizontalStrokeColor="#e5e5e5"
                            verticalStripLineColor="#00000000, #00000000"
                            horizontalStripLineColor="#f8f8f8, #00000000"/>
                      </chart:RadCartesianChart.grid>
                      <chart:RadCartesianChart.palettes>
                        <chart:Palette seriesName="Bar">
                            <chart:Palette.entries>
                                <chart:PaletteEntry fillColor="#F37122" strokeWidth="0" android:strokeColor="#F37122" />
                            </chart:Palette.entries>
                        </chart:Palette>
                        <chart:Palette seriesName="Bar1">
                            <chart:Palette.entries>
                                <chart:PaletteEntry fillColor="#9E3293" strokeWidth="0" android:strokeColor="#9E3293" />
                            </chart:Palette.entries>
                        </chart:Palette>
                        <chart:Palette seriesName="Bar2">
                          <chart:Palette.entries>
                            <chart:PaletteEntry fillColor="#616161" strokeWidth="0" android:strokeColor="#616161" />
                          </chart:Palette.entries>
                        </chart:Palette>
                      </chart:RadCartesianChart.palettes>
                    </chart:RadCartesianChart>
                  </Slides:Slide>

                  <Slides:Slide>
                    <chart:RadCartesianChart id="chart" selectionMode="Single" height="500">
                      <chart:RadCartesianChart.series>
                          <chart:BarSeries seriesName="Bar1"  categoryProperty="name" items="{{ source.chartSource2 }}" valueProperty="ExpenseDirect" selectionMode="Series" stackMode="Stack" showLabels="true" />
                          <chart:BarSeries seriesName="Bar" items="{{ source.chartSource2 }}" valueProperty="ExpenseExceptDirect" selectionMode="Series" stackMode="Stack" categoryProperty="name" showLabels="true" />
                           <chart:BarSeries seriesName="Bar2" valueProperty="netProfit" items="{{ source.chartSource2 }}" selectionMode="Series" stackMode="Stack" categoryProperty="name" showLabels="true" />
                      </chart:RadCartesianChart.series>
                      <chart:RadCartesianChart.horizontalAxis>
                          <chart:CategoricalAxis labelTextColor="#cb4b16" labelSize="10" lineThickness="2" lineColor="Red" />
                      </chart:RadCartesianChart.horizontalAxis>
                      <chart:RadCartesianChart.verticalAxis>
                          <chart:LinearAxis labelTextColor="Green" lineThickness="2" lineColor="Red" />
                      </chart:RadCartesianChart.verticalAxis>
                      <chart:RadCartesianChart.grid>
                        <chart:RadCartesianChartGrid 
                            horizontalLinesVisible="true" 
                            verticalLinesVisible="false" 
                            verticalStripLinesVisible="false"
                            horizontalStrokeColor="#e5e5e5"
                            verticalStripLineColor="#00000000, #00000000"
                            horizontalStripLineColor="#f8f8f8, #00000000"/>
                      </chart:RadCartesianChart.grid>
                      <chart:RadCartesianChart.palettes>
                        <chart:Palette seriesName="Bar">
                            <chart:Palette.entries>
                                <chart:PaletteEntry fillColor="#F37122" strokeWidth="0" android:strokeColor="#F37122" />
                            </chart:Palette.entries>
                        </chart:Palette>
                        <chart:Palette seriesName="Bar1">
                            <chart:Palette.entries>
                                <chart:PaletteEntry fillColor="#9E3293" strokeWidth="0" android:strokeColor="#9E3293" />
                            </chart:Palette.entries>
                        </chart:Palette>
                        <chart:Palette seriesName="Bar2">
                          <chart:Palette.entries>
                            <chart:PaletteEntry fillColor="#616161" strokeWidth="0" android:strokeColor="#616161" />
                          </chart:Palette.entries>
                        </chart:Palette>
                      </chart:RadCartesianChart.palettes>
                    </chart:RadCartesianChart>
                  </Slides:Slide>

                  <Slides:Slide>

                  <chart:RadCartesianChart id="chart" selectionMode="Single" height="500">
                      <chart:RadCartesianChart.series>
                          <chart:BarSeries seriesName="Bar1"  categoryProperty="name" items="{{ chart3.chartSource3 }}" valueProperty="ExpenseDirect" selectionMode="Series" stackMode="Stack" showLabels="true" />
                          <chart:BarSeries seriesName="Bar" items="{{ chart3.chartSource3 }}" valueProperty="ExpenseExceptDirect" selectionMode="Series" stackMode="Stack" categoryProperty="name" showLabels="true" />
                           <chart:BarSeries seriesName="Bar2" valueProperty="netProfit" items="{{ chart3.chartSource3 }}" selectionMode="Series" stackMode="Stack" categoryProperty="name" showLabels="true" />
                      </chart:RadCartesianChart.series>
                      <chart:RadCartesianChart.horizontalAxis>
                          <chart:CategoricalAxis labelTextColor="#cb4b16" labelSize="10" lineThickness="2" lineColor="Red" />
                      </chart:RadCartesianChart.horizontalAxis>
                      <chart:RadCartesianChart.verticalAxis>
                          <chart:LinearAxis labelTextColor="Green" lineThickness="2" lineColor="Red" />
                      </chart:RadCartesianChart.verticalAxis>
                      <chart:RadCartesianChart.grid>
                        <chart:RadCartesianChartGrid 
                            horizontalLinesVisible="true" 
                            verticalLinesVisible="false" 
                            verticalStripLinesVisible="false"
                            horizontalStrokeColor="#e5e5e5"
                            verticalStripLineColor="#00000000, #00000000"
                            horizontalStripLineColor="#f8f8f8, #00000000"/>
                      </chart:RadCartesianChart.grid>
                      <chart:RadCartesianChart.palettes>
                        <chart:Palette seriesName="Bar">
                            <chart:Palette.entries>
                                <chart:PaletteEntry fillColor="#F37122" strokeWidth="0" android:strokeColor="#F37122" />
                            </chart:Palette.entries>
                        </chart:Palette>
                        <chart:Palette seriesName="Bar1">
                            <chart:Palette.entries>
                                <chart:PaletteEntry fillColor="#9E3293" strokeWidth="0" android:strokeColor="#9E3293" />
                            </chart:Palette.entries>
                        </chart:Palette>
                        <chart:Palette seriesName="Bar2">
                          <chart:Palette.entries>
                            <chart:PaletteEntry fillColor="#616161" strokeWidth="0" android:strokeColor="#616161" />
                          </chart:Palette.entries>
                        </chart:Palette>
                      </chart:RadCartesianChart.palettes>
                    </chart:RadCartesianChart>   
                  </Slides:Slide>

                  <Slides:Slide>

                  <chart:RadCartesianChart id="chart" selectionMode="Single" height="500">
                      <chart:RadCartesianChart.series>
                          <chart:BarSeries seriesName="Bar1"  categoryProperty="name" items="{{ chart4.chartSource4 }}" valueProperty="ExpenseDirect" selectionMode="Series" stackMode="Stack" showLabels="true" />
                          <chart:BarSeries seriesName="Bar" items="{{ chart4.chartSource4 }}" valueProperty="ExpenseExceptDirect" selectionMode="Series" stackMode="Stack" categoryProperty="name" showLabels="true" />
                           <chart:BarSeries seriesName="Bar2" valueProperty="netProfit" items="{{ chart4.chartSource4 }}" selectionMode="Series" stackMode="Stack" categoryProperty="name" showLabels="true" />
                      </chart:RadCartesianChart.series>
                      <chart:RadCartesianChart.horizontalAxis>
                          <chart:CategoricalAxis labelTextColor="#cb4b16" labelSize="10" lineThickness="2" lineColor="Red" />
                      </chart:RadCartesianChart.horizontalAxis>
                      <chart:RadCartesianChart.verticalAxis>
                          <chart:LinearAxis labelTextColor="Green" lineThickness="2" lineColor="Red" />
                      </chart:RadCartesianChart.verticalAxis>
                      <chart:RadCartesianChart.grid>
                        <chart:RadCartesianChartGrid 
                            horizontalLinesVisible="true" 
                            verticalLinesVisible="false" 
                            verticalStripLinesVisible="false"
                            horizontalStrokeColor="#e5e5e5"
                            verticalStripLineColor="#00000000, #00000000"
                            horizontalStripLineColor="#f8f8f8, #00000000"/>
                      </chart:RadCartesianChart.grid>
                      <chart:RadCartesianChart.palettes>
                        <chart:Palette seriesName="Bar">
                            <chart:Palette.entries>
                                <chart:PaletteEntry fillColor="#F37122" strokeWidth="0" android:strokeColor="#F37122" />
                            </chart:Palette.entries>
                        </chart:Palette>
                        <chart:Palette seriesName="Bar1">
                            <chart:Palette.entries>
                                <chart:PaletteEntry fillColor="#9E3293" strokeWidth="0" android:strokeColor="#9E3293" />
                            </chart:Palette.entries>
                        </chart:Palette>
                        <chart:Palette seriesName="Bar2">
                          <chart:Palette.entries>
                            <chart:PaletteEntry fillColor="#616161" strokeWidth="0" android:strokeColor="#616161" />
                          </chart:Palette.entries>
                        </chart:Palette>
                      </chart:RadCartesianChart.palettes>
                    </chart:RadCartesianChart>   
                  </Slides:Slide>
                </Slides:SlideContainer>
              </GridLayout>

              <GridLayout row="2"  rows="*,*" columns="*,*,*" backgroundColor="#fff">
                <StackLayout row="0" colSpan="3" col="0" orientation="horizontal" horizontalAlignment="center" style="margin-top:10;">
                  <Image src="~/images/left.png" tap="prev" cssClass="arrowLeft" />
                 <!--  <Button tap="prev"  text="prev" class="btnMain" /> -->
                  <StackLayout orientation="vertical" horizontalAlignment="center">
                    <Label text=" 2ND QUARTER - 015" cssClass="slideLabel" />
                  </StackLayout>
                  <Image src="~/images/right.png" tap="next" cssClass="arrowRight" />
                </StackLayout>

                <StackLayout row="1" col="0" orientation="horizontal" cssClass="containerCalender">
                  <Label text=""  cssClass="colorBox" />
                  <Label text="Accounts Receiveables" cssClass="ChartColor" verticalAlignment="center" />
                </StackLayout>
                <StackLayout row="1" col="1" orientation="horizontal" cssClass="containerCalender">
                  <Label text=""  cssClass="colorBox1" />
                  <Label text="Accounts Payables" cssClass="ChartColor" verticalAlignment="center" />
                </StackLayout>
                <StackLayout row="1" col="2" orientation="horizontal" cssClass="containerCalender">
                  <Label text=""  cssClass="colorBox2" />
                  <Label text="Cumulative Net Cash" cssClass="ChartColor" verticalAlignment="center" />
                </StackLayout> 
              </GridLayout>
            </GridLayout>
          </ScrollView>
    </Page>

     

    my Js here

    var frameModule = require("ui/frame");
    var scrollViewModule = require("ui/scroll-view");
    var observableArray = require("data/observable-array");
    var observable = require("data/observable");

    var scrollView = new scrollViewModule.ScrollView();
    var http = require("http");

    var viewModel;
    var slideContainer;
    function pageLoaded(args) {
        var page = args.object;
        slideContainer = page.getViewById('slideContainer');
        // console.log(slideContainer);
        var items = new observableArray.ObservableArray();
        var cash = new observableArray.ObservableArray();
        viewModel = new observable.Observable();
      
        items.push('Menu','About','About');
        cash.push('Income','Cash Flow From Operations','Operations1','Operations2');

        console.log(cash);
        viewModel.set("cash", cash);
        viewModel.set("items", items);
        viewModel.set("selectedIndex", 1);
        page.bindingContext = viewModel;
    }

    exports.pageLoaded = pageLoaded;

    exports.loaded = function(eventData) {
        page = eventData.object;
        page.bindingContext = pageData;
    };

    exports.pieChart = function() {
        var topmost = frameModule.topmost();
        topmost.navigate("views/file/pieChart");
    };

    function next(args) {
        console.log('Next slide');
        slideContainer.nextSlide();
    }

    exports.next = next;
    function prev(args) {
        console.log('Previous slide');
        slideContainer.previousSlide();
    }
    exports.prev = prev;

    var observable_1 = require("data/observable");
    var file_system_1 = require("file-system");
    var page;

    function navigatingTo(args) {
       // var page = args.object;
       //  var observable = new observable_1.Observable();
       //  var documents = file_system_1.knownFolders.currentApp();
       //  var jsonFile = documents.getFile('shared/chart.json');
       //  var jsonData;
       //  jsonFile.readText()
       //      .then(function (content) {
       //      jsonData = JSON.parse(content);
       //      // console.log(content);
       //      // console.dump(jsonData);
       //      observable.set("info", jsonData);
       //  }, function (error) {
       //      throw new Error('Could not read JSON file');
       //  });
       //  page.bindingContext = observable;
        var jsonData;
        
        var page = args.object;
        var observable = new observable_1.Observable();
        var documents = file_system_1.knownFolders.currentApp();
        http.request({
            url: "http://bossapp-erp.activbm.com/",
            method: "POST",
            headers: { "Content-Type": "application/x-www-form-urlencoded" },
            content: 'cmd=login&usr=Administrator&pwd=bossapp123'
        }).then(function (response) {
            sidCookie = response.headers['Set-Cookie'][0].split(";")[0]
            url = 'http://bossapp-erp.activbm.com/?report_name=Profit+and+Loss+Statement&filters=%7B%22company%22%3A%22Bluesky+Group+Pte.+Ltd.%22%2C%22fiscal_year%22%3A%222016%22%2C%22periodicity%22%3A%22Monthly%22%7D&cmd=frappe.desk.query_report.run&_=1467792072302'
            http.request({
                url: url,
                method: "GET",
                headers: { "sid": sidCookie }
            }).then(function (response) {
                var year = 2016
                result = response.content.toJSON().message
                var responseResult = response.content.toJSON().message.result
                chartArry1 = []
                chartArry2 = []
                chartArry3 = []
                chartArry4 = []
                var chartSource1 = {}
                var chartSource2 = {}
                var chartSource3 = {}
                var chartSource4 = {}
                var gObj = {}
                var p // current parent
                for (var i = 0; i < responseResult.length; i++) {
                    // console.log("Came 2 newObj")
                    var c = responseResult[i] // current Node
                    if (c.parent_account == null && c.account != null) {
                        p = c.account.replace(/[\. ,:-]+/g, "-") // parent node
                        gObj[p] = c
                    } else if (c.parent_account != null) {
                        var p1 = c.parent_account.replace(/[\. ,:-]+/g, "-") // parent node
                        var ch = c.account.replace(/[\. ,:-]+/g, "-") // child node
                        
                        if(gObj[p1]) {
                            gObj[p1]['child'] = gObj[p1]['child'] || {}
                            gObj[p1]['child'][ch] = c
                        }
                        else {
                            if(gObj[p]['child'][p1]){
                                gObj[p]['child'][p1]['child'] = gObj[p]['child'][p1]['child'] || {}
                                gObj[p]['child'][p1]['child'][ch] = c
                            }
                        }
                    }
                    else if(c.account == null){
                        if(c.account_name == "'Net Profit / Loss'"){
                            gObj["total"] = c
                        }
                    }
                }
                var janExpenseDirect = gObj["Expenses-BSG"]["child"]["Expenses-Direct-BSG"]["jan_"+year]
                var febExpenseDirect = gObj["Expenses-BSG"]["child"]["Expenses-Direct-BSG"]["feb_"+year]
                var marExpenseDirect = gObj["Expenses-BSG"]["child"]["Expenses-Direct-BSG"]["mar_"+year]
                var aprExpenseDirect = gObj["Expenses-BSG"]["child"]["Expenses-Direct-BSG"]["apr_"+year]
                var mayExpenseDirect = gObj["Expenses-BSG"]["child"]["Expenses-Direct-BSG"]["may_"+year]
                var junExpenseDirect = gObj["Expenses-BSG"]["child"]["Expenses-Direct-BSG"]["jun_"+year]
                var julExpenseDirect = gObj["Expenses-BSG"]["child"]["Expenses-Direct-BSG"]["jul_"+year]
                var augExpenseDirect = gObj["Expenses-BSG"]["child"]["Expenses-Direct-BSG"]["aug_"+year]
                var sepExpenseDirect = gObj["Expenses-BSG"]["child"]["Expenses-Direct-BSG"]["sep_"+year]
                var octExpenseDirect = gObj["Expenses-BSG"]["child"]["Expenses-Direct-BSG"]["oct_"+year]
                var novExpenseDirect = gObj["Expenses-BSG"]["child"]["Expenses-Direct-BSG"]["nov_"+year]
                var decExpenseDirect = gObj["Expenses-BSG"]["child"]["Expenses-Direct-BSG"]["dec_"+year]
                
                var janExpenseExceptDirect = gObj["Expenses-BSG"]["child"]["Expenses-Operating-BSG"]["jan_"+year]  + gObj["Expenses-BSG"]["child"]["Expenses-Staff-BSG"]["jan_"+year]
                var febExpenseExceptDirect = gObj["Expenses-BSG"]["child"]["Expenses-Operating-BSG"]["feb_"+year]  + gObj["Expenses-BSG"]["child"]["Expenses-Staff-BSG"]["feb_"+year]
                var marExpenseExceptDirect = gObj["Expenses-BSG"]["child"]["Expenses-Operating-BSG"]["mar_"+year]  + gObj["Expenses-BSG"]["child"]["Expenses-Staff-BSG"]["mar_"+year]
                var aprExpenseExceptDirect = gObj["Expenses-BSG"]["child"]["Expenses-Operating-BSG"]["apr_"+year]  + gObj["Expenses-BSG"]["child"]["Expenses-Staff-BSG"]["apr_"+year]
                var mayExpenseExceptDirect = gObj["Expenses-BSG"]["child"]["Expenses-Operating-BSG"]["may_"+year]  + gObj["Expenses-BSG"]["child"]["Expenses-Staff-BSG"]["may_"+year]
                var junExpenseExceptDirect = gObj["Expenses-BSG"]["child"]["Expenses-Operating-BSG"]["jun_"+year]  + gObj["Expenses-BSG"]["child"]["Expenses-Staff-BSG"]["jun_"+year]
                var julExpenseExceptDirect = gObj["Expenses-BSG"]["child"]["Expenses-Operating-BSG"]["jul_"+year]  + gObj["Expenses-BSG"]["child"]["Expenses-Staff-BSG"]["jul_"+year]
                var augExpenseExceptDirect = gObj["Expenses-BSG"]["child"]["Expenses-Operating-BSG"]["aug_"+year]  + gObj["Expenses-BSG"]["child"]["Expenses-Staff-BSG"]["aug_"+year]
                var sepExpenseExceptDirect = gObj["Expenses-BSG"]["child"]["Expenses-Operating-BSG"]["sep_"+year]  + gObj["Expenses-BSG"]["child"]["Expenses-Staff-BSG"]["sep_"+year]
                var octExpenseExceptDirect = gObj["Expenses-BSG"]["child"]["Expenses-Operating-BSG"]["oct_"+year]  + gObj["Expenses-BSG"]["child"]["Expenses-Staff-BSG"]["oct_"+year]
                var novExpenseExceptDirect = gObj["Expenses-BSG"]["child"]["Expenses-Operating-BSG"]["nov_"+year]  + gObj["Expenses-BSG"]["child"]["Expenses-Staff-BSG"]["nov_"+year]
                var decExpenseExceptDirect = gObj["Expenses-BSG"]["child"]["Expenses-Operating-BSG"]["dec_"+year]  + gObj["Expenses-BSG"]["child"]["Expenses-Staff-BSG"]["dec_"+year]
                
                var janNetProfit = gObj["total"]["jan_"+year]
                var febNetProfit = gObj["total"]["feb_"+year]
                var marNetProfit = gObj["total"]["mar_"+year]
                var aprNetProfit = gObj["total"]["apr_"+year]
                var mayNetProfit = gObj["total"]["may_"+year]
                var junNetProfit = gObj["total"]["jun_"+year]
                var julNetProfit = gObj["total"]["jul_"+year]
                var augNetProfit = gObj["total"]["aug_"+year]
                var sepNetProfit = gObj["total"]["sep_"+year]
                var octNetProfit = gObj["total"]["oct_"+year]
                var novNetProfit = gObj["total"]["nov_"+year]
                var decNetProfit = gObj["total"]["dec_"+year]

                janObj = {name : "January",ExpenseDirect : janExpenseDirect,ExpenseExceptDirect : janExpenseExceptDirect, netProfit : 0 }
                febObj = {name : "February",ExpenseDirect : febExpenseDirect,ExpenseExceptDirect : febExpenseExceptDirect, netProfit : febNetProfit }
                marObj = {name : "March",ExpenseDirect : marExpenseDirect,ExpenseExceptDirect : marExpenseExceptDirect, netProfit : marNetProfit }
                aprObj = {name : "April",ExpenseDirect : aprExpenseDirect,ExpenseExceptDirect : aprExpenseExceptDirect, netProfit : aprNetProfit }
                mayObj = {name : "May",ExpenseDirect : mayExpenseDirect,ExpenseExceptDirect : mayExpenseExceptDirect, netProfit : mayNetProfit }
                junObj = {name : "June",ExpenseDirect : junExpenseDirect,ExpenseExceptDirect : junExpenseExceptDirect, netProfit : junNetProfit }
                julObj = {name : "July",ExpenseDirect : julExpenseDirect,ExpenseExceptDirect : julExpenseExceptDirect, netProfit : julNetProfit }
                augObj = {name : "August",ExpenseDirect : augExpenseDirect,ExpenseExceptDirect : augExpenseExceptDirect, netProfit : augNetProfit }
                sepObj = {name : "September",ExpenseDirect : sepExpenseDirect,ExpenseExceptDirect : sepExpenseExceptDirect, netProfit : sepNetProfit }
                octObj = {name : "October",ExpenseDirect : octExpenseDirect,ExpenseExceptDirect : octExpenseExceptDirect, netProfit : octNetProfit }
                novObj = {name : "November",ExpenseDirect : novExpenseDirect,ExpenseExceptDirect : novExpenseExceptDirect, netProfit : novNetProfit }
                decObj = {name : "December",ExpenseDirect : decExpenseDirect,ExpenseExceptDirect : decExpenseExceptDirect, netProfit : decNetProfit }

                chartArry1.push(janObj)
                chartArry1.push(febObj)
                chartArry1.push(marObj)
                chartArry2.push(aprObj)
                chartArry2.push(mayObj)
                chartArry2.push(junObj)
                chartArry3.push(julObj)
                chartArry3.push(augObj)
                chartArry3.push(sepObj)
                chartArry4.push(octObj)
                chartArry4.push(novObj)
                chartArry4.push(decObj)
                
                chartSource1["chartSource1"] = chartArry1
                // console.log("HAI")
                observable.set("info", chartSource1);
                page.bindingContext = observable;

                 chartSource2["chartSource2"] = chartArry2
                // console.log("paul")
                observable.set("source", chartSource2);
                page.bindingContext = observable;

                 chartSource3["chartSource3"] = chartArry3
                // console.log("neoito")
                observable.set("chart3", chartSource3);
                page.bindingContext = observable;

                chartSource4["chartSource4"] = chartArry4
                console.log("sura")
                observable.set("chart4", chartSource4);
                page.bindingContext = observable;
                // observable.set("info", jsonData);
            }, function (e) {
                console.log("Error occurred " + e);
            });
        }, function (e) {
            console.log("Error occurred " + e);
        });
       
    }

    exports.navigatingTo = navigatingTo;


    1. in ios center of this graph scrolling touch is not working but right of this graph scrolling touch is working very well

    2. in center of this graph slide swipe also not working but right of this graph swipe is working very well

    this all problems only in ios android it is working same code

  25. Victor
    Admin
    Victor avatar
    1358 posts

    Posted 11 Jul 2016 Link to this post

    Hi Paulson,

    Can you please clarify which version of the iOS platform you are using? You can see the version of the framework files your project's platforms folder.

    We made some changes to the native chart selection and now nativescript uses these changes. If the run-time can't resolve the new API it means there is a mismatch between the javascript run-time and the native iOS run-time.

    Regards,
    Victor
    Telerik by Progress
    Do you want to have your say when we set our development plans? Do you want to know when a feature you care about is added or when a bug fixed? Explore the Telerik Feedback Portal and vote to affect the priority of the items
  26. Paulson
    Paulson avatar
    54 posts
    Member since:
    Apr 2016

    Posted 11 Jul 2016 Link to this post

    {
      "nativescript": {
        "id": "org.nativescript.bossapp",
        "tns-android": {
          "version": "2.1.1"
        },
        "tns-ios": {
          "version": "2.1.1"
        }
      },
      "dependencies": {
        "nativescript-drop-down": "^1.2.5",
        "nativescript-slides": "^1.7.0",
        "nativescript-telerik-ui-pro": "^1.1.1",
        "tns-core-modules": "2.0.1"
      },
      "devDependencies": {
        "babel-traverse": "6.10.4",
        "babel-types": "6.11.1",
        "babylon": "6.8.4",
        "lazy": "1.0.11"
      }
    }

     

     

    these are the versions... which i am using now

  27. Nikolay Iliev
    Admin
    Nikolay Iliev avatar
    351 posts

    Posted 11 Jul 2016 Link to this post

    Hi Paulson,

    In order to use the latest version of "telerik-ui-pro" controls you can execute the following steps:

    - remove the old version of the plugin with 
    tns plugin removes nativescript-telerik-ui-pro
    - add the latest version with
    tns plugin add nativescript-telerik-ui-pro

    Now after opening your package.json you "telerik-ui-pro"  version should be 1.2.0 which will apply the latest changes and your error regarding TKChartSelection  should be resolved.

    As for your following question regarding the swi[e not working inside the chart graph you can use userInteractionEnabled  to enable.disable the user interaction with the charts so that there would be no conflicts with events that triggered nested controls (in your case the chart and its parent Slides and ScrollView).
    Example solution for this problem is discussed here.
    What you need to do is to get the reference to your chart and set userInteractionEnabled to false.
    myChart.userInteractionEnabled = false;

    However, I noticed some potential problems regarding your code architecture.
    1.) You have several charts with exact same ID.  Each ID in your page should have unique value and use same ID will lead to unexpected behaviour.
    So your chars can not have all id="chart"
    They should have unique IDs (e.g. "chart-one", "chart-two", etc..)

    2.) You have several nested controls using the same gestures.You have wrapped everything in ScrollView (which uses swipe gestures to scroll up and down) then you are using the Slides plugin which creates slides which are also using swipe gestures (left and right0 and finally without myChart.userInteractionEnabled = false; myChart.userInteractionEnabled = false; the charts are also using gestures to interact with users.
    You should think about a simpler structure or to remove your gestures conflict by disabling some of them.


    Regards,
    Nikolay Iliev
    Telerik by Progress
    Do you want to have your say when we set our development plans? Do you want to know when a feature you care about is added or when a bug fixed? Explore the Telerik Feedback Portal and vote to affect the priority of the items
  28. Paulson
    Paulson avatar
    54 posts
    Member since:
    Apr 2016

    Posted 11 Jul 2016 Link to this post

    Hi,

    when clicking on a button, i am adding a component in the page :

    var greeter = builder.load({
            path: 'views/file',
            name: 'pieChart'
        });
        container.addChild(greeter);

    on the component page i am adding  "<StackLayout  
      xmlns:chart="nativescript-telerik-ui-pro/chart"
      xmlns:Slides="nativescript-slides"
      loaded="onLoad">"

    <StackLayout>

    the logic is written in onLoad.The code is working fine in android but is having showing error when deploying to ios.

     

    2016-07-11 20:09:19.384 BossAppDemo[6727:2111331] -[NSNull x]: unrecognized selector sent to instance 0x3b527310
    2016-07-11 20:09:19.431 BossAppDemo[6727:2111331] *** JavaScript call stack:
    (
    0   UIApplicationMain@[native code]
    1   start@file:///app/tns_modules/application/application.js:233:26
    2   @file:///app/app.js:18:30
    3   promiseReactionJob@:1:11
    )
    2016-07-11 20:09:19.432 BossAppDemo[6727:2111331] *** Terminating app due to uncaught exception 'NSInvalidArgumentException', reason: '-[NSNull x]: unrecognized selector sent to instance 0x3b527310'
    *** First throw call stack:
    (0x24cef91b 0x2448ae17 0x24cf52b5 0x24cf2ee1 0x24c1e238 0xb62077 0xbcae47 0xb8aed7 0xb6116f 0xbc8ba1 0xb625c3 0xbc8e29 0x27316101 0x27409771 0x273154d1 0x272f9561 0x272f9221 0x272f86e1 0x272f83b5 0x29267851 0x24cb1dff 0x24cb19ed 0x24cafd5b 0x24bff229 0x24bff015 0x261efac9 0x292d1189 0x91702c 0x913959 0x5034b7 0x7510ab 0x74ee61 0x756c7d 0x756c89 0x756c89 0x751ab1 0x7112d5 0x6fa241 0x7f4143 0x844ab9 0x508f0b 0x53b15b 0x710a1 0x248a7873)
    libc++abi.dylib: terminating with uncaught exception of type NSException

  29. suralal
    suralal avatar
    18 posts
    Member since:
    Mar 2016

    Posted 12 Jul 2016 Link to this post

    Hi,

    Dropdown on change is not working for me.I have tried to copy the angular code for onchange which is also not working for me now.The code :

    XML:

      <dd:DropDown id="dd"  items="{{ items }}" hint="{{ hint }}" selectedIndex="{{ selectedIndex }}" selectedIndexChange="onchange(dd.selectedIndex)" />

     

    JS:

    exports.onchange = function(selectedi){
            console.log("selected index");
        }

  30. Nikolay Iliev
    Admin
    Nikolay Iliev avatar
    351 posts

    Posted 12 Jul 2016 Link to this post

    Hi Paulson,

    We will need a whole project to reproduce and test your scenario.
    However when loading components dynamically  you can follow this article.

    Here are the basic steps

    1.) your custom component
    <!-- app/components/greeter/greeter.xml -->
     
    <StackLayout loaded="onLoad">
        <Label id="fL"/>
        <Label id="nL"/>
    </StackLayout>

    /* app/components/greeter/greeter.js */
     
    exports.onLoad = args => {
        const container = args.object;
     
        const frameworkLabel = container.getViewById('fL');
        const nameLabel = container.getViewById('nL');
     
        frameworkLabel.text = `Hello ${container.framework || 'Nativescript'}`;
        nameLabel.text = `My name is ${container.name.first} ${container.name.last}`;
    };


    2.) in your main page

    <!-- app/main-page.xml -->
    navigatingTo="onNavigatingTo">
        <StackLayout id="container">
        </StackLayout>
    </Page>

    /* app/main-page.js */
     
    const builder = require('ui/builder');
     
    exports.onNavigatingTo = args => {
        const page = args.object;
        const myName = {
            first: 'Akash',
            last: 'Agrawal'
        };
        const container = page.getViewById('container');
     
        const greeter = builder.load({
            path: 'components/greeter',
            name: 'greeter'
        });
     
        container.addChild(greeter);
     
        greeter.framework = 'angular-nativescript';
        greeter.name = myName;
     
    };

    If you need further assistance on loading custom components dynamically please send us sample project and as much information as possible in order to test and reproduce it locally.

    p.p. For your question about NativeScript-drop-down plugin you can log an issue at the author's GitHub repository at the following link: https://github.com/PeterStaev/NativeScript-Drop-Down as this is a third party plugin developed by a community member and besst infomration can be retreived from the author.
    .
    However, there are few tips you should consider and check for your app.
    1.) The namespace declaration should be present for the plugin
    <Page xmlns="http://schemas.nativescript.org/tns.xsd" loaded="pageLoaded" xmlns:dd="nativescript-drop-down">

    2.) In the sample used a view model is passed here (TypeScript code)
    import observable = require("data/observable");
    import observableArray = require("data/observable-array");
    import pages = require("ui/page");
     
    var viewModel: observable.Observable;
     
    export function pageLoaded(args: observable.EventData) {
        var page = <pages.Page>args.object;
        var items = new observableArray.ObservableArray();
     
        viewModel = new observable.Observable();
     
        for (var loop = 0; loop < 200; loop++) {
            items.push("Item " + loop.toString());
        }
     
        viewModel.set("items", items);
        viewModel.set("hint", "My Hint");
        viewModel.set("selectedIndex", 15);
     
        page.bindingContext = viewModel;
    }

    Still, I can not find implementation of selectedIndexChange
    in the authors code.

    Regards,
    Nikolay Iliev
    Telerik by Progress
    Do you want to have your say when we set our development plans? Do you want to know when a feature you care about is added or when a bug fixed? Explore the Telerik Feedback Portal and vote to affect the priority of the items
Back to Top