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

Thread is closed for posting
91 posts, 0 answers
  1. Paulson
    Paulson avatar
    54 posts
    Member since:
    Apr 2016

    Posted 01 Jun 2016 Link to this post

    Can i set a  popup in NativeScript ui pro Chart? When i click on particular value it should show through popup or dialogue?
  2. Nikolay Iliev
    Admin
    Nikolay Iliev avatar
    351 posts

    Posted 01 Jun 2016 Link to this post

    Hello Paulson,

    Yes, you can create custom behavior like popup dialog when user click on selected chart value.
    For example lets assume we are using pie-chart

    pie-char.xml
    <chart:RadPieChart id="pieChart" height="300" allowAnimation="true" row="0">
        <chart:RadPieChart.series>
            <chart:PieSeries selectionMode="DataPoint" expandRadius="1.3" outerRadiusFactor="0.7" items="{{ pieSource }}" valueProperty="Amount" legendLabelProperty="Brand">
            </chart:PieSeries>
        </chart:RadPieChart.series>
        <chart:RadPieChart.legend>
            <chart:RadLegendView position="Floating" offsetOrigin="TopRight"  width="150"/>
        </chart:RadPieChart.legend>
    </chart:RadPieChart>

    pie-char.js
    "use strict";
    // >> export your own binding-context-pie-series
    var pieModelModule = require("../../data-models/pie-data-model");
    var dialogs = require("ui/dialogs");
    function onPageLoaded(args) {
        var page = args.object;
        page.bindingContext = new pieModelModule.PieDataModel();
        var pieChart = page.getViewById("pieChart");
        pieChart.on("pointSelected", function (args) {
            dialogs.alert({
                title: "Your title",
                message: "Your messsage",
                okButtonText: "Your button text"
            }).then(function () {
                console.log("Dialog closed!");
            });
        });
    }
    exports.onPageLoaded = onPageLoaded;

    What the above example do is the following:
    - get a reference to you pie-char via getViewById("pieChart")
    - create an eventListener - in this case on pointSelected which will fire when the user interacts with a pie point.
    - use the callback function to introduce your own behavior on what should happen when the event is fired. In this case the function will use the NativeScript dialogs module and will show an alert dialog box.
    More about dialogs you can find here .

    I am also recommending the great documentation about telerik-ui-pro components where you can find very good information about all functionalities for charts.
    Direct link to telerik-ui-pro chart : http://docs.telerik.com/devtools/nativescript-ui/Controls/NativeScript/Chart/overview


    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
  3. Paulson
    Paulson avatar
    54 posts
    Member since:
    Apr 2016

    Posted 01 Jun 2016 in reply to Nikolay Iliev Link to this post

    Hello Nikolay Iliev,

     Thanks your reply, Then how can show my  var pieModelModule = require("../../data-models/pie-data-model"); data into my dialog box this is the issue i am facing now.

  4. Nikolay Iliev
    Admin
    Nikolay Iliev avatar
    351 posts

    Posted 01 Jun 2016 Link to this post

    Hi Paulson,

    I must have missed this information in my previous answer!
    You should create or use your own view-model which is passing the data to present in the chart.
    In the example provided the file was two directories above your current file (../../) in folder data-models ​and in file pie-data-model.js and looks like this:
    "use strict";
    var dependencyObservableModule = require("ui/core/dependency-observable");
    var PieDataModel = (function (_super) {
        __extends(PieDataModel, _super);
        function PieDataModel() {
            _super.call(this);
            this.initData();
        }
        PieDataModel.prototype.initData = function () {
            this.set("pieSource", [
                { Brand: "Audi", Amount: 10 },
                { Brand: "Mercedes", Amount: 76 },
                { Brand: "Fiat", Amount: 60 },
                { Brand: "BMW", Amount: 24 },
                { Brand: "Crysler", Amount: 40 }
            ]);
        };
        return PieDataModel;
    }(dependencyObservableModule.DependencyObservable));
    exports.PieDataModel = PieDataModel;

    This example is good representation of the models in MVVM design pattern which is great concept for structuring your application so you can re-use your code without creating unwanted dependencies and with clear separation of your Models, Views and View-Models.

    Of course the simpler solution (no MVVM but easier for testing purposes) is to directly feed your chart values with code in your pie-chart.js like this
    var observableArrayModule = require("data/observable-array");
    var brandsArray = new observableArrayModule.ObservableArray([          
        { Brand: "Audi", Amount: 10 },
        { Brand: "Mercedes", Amount: 76 },
        { Brand: "Fiat", Amount: 60 },
        { Brand: "BMW", Amount: 24 },
        { Brand: "Crysler", Amount: 40 }
    ]);
    var pieData = new observableArrayModule.Observable();
    and in the samee file where you create your page.bindingContext to pass it like this

    pieData.set("pieSource", brandsArray );
    page.bindingContext = pieData;



    The whole scenario with examples for all telerik-ui-pro components can be found at the following link:
    https://github.com/telerik/nativescript-ui-samples

    All you need to do is to clone this repository, navigate to sdk folder and run the app. In the code for pi-chart you will find the example that we have discussed and you will also find a nice samples for each other chart that you can create.

    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. Paulson
    Paulson avatar
    54 posts
    Member since:
    Apr 2016

    Posted 01 Jun 2016 in reply to Nikolay Iliev Link to this post

    Hello  Nikolay Iliev 

     I think you did't get my question my question was In a chart i have displayed values form view-model.js  but now i want to do in that data i want to show in a dialog box when i click on that particular bar details.

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

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

    My Code:

    chart.xml

    <Page xmlns:navigation="navigation/example-page" loaded="onPageLoaded" xmlns:chart="nativescript-telerik-ui-pro/chart" xmlns="http://www.nativescript.org/tns.xsd">

    <GridLayout orientation="vertical" rows="*, *">

        <chart:RadCartesianChart row="1" id="pieChart">
       <chart:RadCartesianChart.grid>
                   <chart:RadCartesianChartGrid
                       horizontalLinesVisible="true"
                       verticalLinesVisible="true"
                       horizontalStripLinesVisible="true"
                       verticalStripLinesVisible="true"
                       verticalStrokeColor="#804d0026"
                       horizontalStrokeColor="#ffffcc80"
                       horizontalStrokeWidth="2"
                       verticalStrokeWidth="3"      
                       horizontalStripLineColor="#8059005c, #804d0026"
                       />
              </chart:RadCartesianChart.grid>           

           <chart:RadCartesianChart.series>
               <chart:BarSeries items="{{ categoricalSource }}" categoryProperty="Country" valueProperty="Amount" selectionMode="DataPoint">

               </chart:BarSeries>
               <chart:RadCartesianChart.horizontalAxis>
               <chart:CategoricalAxis />
               </chart:RadCartesianChart.horizontalAxis>
               <chart:RadCartesianChart.verticalAxis>
                   <chart:LinearAxis />
               </chart:RadCartesianChart.verticalAxis>
           </chart:RadCartesianChart.series>
       </chart:RadCartesianChart>
        </GridLayout>
    </Page>

    chart.js

    var frameModule = require("ui/frame");
    var dialogs = require("ui/dialogs");
    var dataModelModule = require("./chart-view-model");


    function onPageLoaded(args) {
        var page = args.object;
        page.bindingContext = new dataModelModule.CategoricalDataModel();
        var pieChart = page.getViewById("pieChart");
        pieChart.on("pointSelected", function (args) {
            dialogs.alert({
                title: "Country",
                message: "Amount",
                okButtonText: "OK"
            }).then(function () {
                console.log("Dialog closed!");
            });
        });
    };
    exports.onPageLoaded = onPageLoaded;

    chart-view-model.js

    var PieDataModel = (function () {

    function PieDataModel() {
    }
    Object.defineProperty(PieDataModel.prototype, "categoricalSource", {
        // >> categorical-source
        get: function () {

            return [
                { Country: "Germany", Amount: 25 },
                { Country: "France", Amount: 13 },
                { Country: "Bulgaria", Amount: 24 },
                { Country: "Spain", Amount: 11 },
                { Country: "India", Amount: 20 },
                { Country: "China", Amount: 13 },
                { Country: "Nepal", Amount: 12 },
                { Country: "Europe", Amount: 11 },
                { Country: "Russia", Amount: 5 }
            ]

        }
        ,
        enumerable: true,
        configurable: true
    });
    return PieDataModel;
    }());
    exports.PieDataModel = PieDataModel;

     

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

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


    var frameModule = require("ui/frame");
    var dialogs = require("ui/dialogs");
    var dataModelModule = require("./chart-view-model");


    function onPageLoaded(args) {
        var page = args.object;
        page.bindingContext = new dataModelModule.CategoricalDataModel();
        var pieChart = page.getViewById("pieChart");
        pieChart.on("pointSelected", function (args) {
            dialogs.alert({
                title: "Country",
                message: "Amount",
                okButtonText: "OK"
            }).then(function () {
                console.log("Dialog closed!");
            });
        });
    };
    exports.onPageLoaded = onPageLoaded;

     

     

     

    see in this dialog box i want to show this data

      return [
                { Country: "Germany", Amount: 25 },
                { Country: "France", Amount: 13 },
                { Country: "Bulgaria", Amount: 24 },
                { Country: "Spain", Amount: 11 },
                { Country: "India", Amount: 20 },
                { Country: "China", Amount: 13 },
                { Country: "Nepal", Amount: 12 },
                { Country: "Europe", Amount: 11 },
                { Country: "Russia", Amount: 5 }
            ]

  8. Nikolay Iliev
    Admin
    Nikolay Iliev avatar
    351 posts

    Posted 01 Jun 2016 Link to this post

    I will give you an example with observable-array (which is very useful when your are going to load data that changes dynamically and for example your clients will see the changes in the charts in real-time)

    Here is the deal - when you are creating an event listener with pointSelected you are going to receive in your callback function arguments passed from that entity (the selected point that triggered the event)
    In this case you have several arguments one of which is pointIndex  which you can use to get the specific item from your model.

    For example:
    "use strict";
    var observable_1 = require("data/observable");
    var observable_array_1 = require("data/observable-array");
    var dialogs = require("ui/dialogs");

    var pieData = new observable_1.Observable();
    var countries = new observable_array_1.ObservableArray([
        { Country: "Germany", Amount: 25 },
        { Country: "France", Amount: 13 },
        { Country: "Bulgaria", Amount: 24 },
        { Country: "Spain", Amount: 11 },
        { Country: "India", Amount: 20 },
        { Country: "China", Amount: 13 },
        { Country: "Nepal", Amount: 12 },
        { Country: "Europe", Amount: 11 },
        { Country: "Russia", Amount: 5 }
    ]);
    pieData.set("pieSource", countries);

    function onPageLoaded(args) {
        var page = args.object;
        page.bindingContext = pieData;
        var pieChart = page.getViewById("pieChart");
        pieChart.on("pointSelected", function (args) {
            console.log("index of the selected point: " + args.pointIndex);
            var selectedCountry = countries.getItem(args.pointIndex);
            dialogs.alert({
                title: "Country: " + selectedCountry.Country,
                message: "Amount: " + selectedCountry.Amount,
                okButtonText: "Your button text"
            }).then(function () {
                console.log("Dialog closed!");
            });
        });
    }
    exports.onPageLoaded = onPageLoaded;

    What I want to point out about observable-array that in order to return an element with index you should use yourObservableArray.getItem(yourIndex);
    If you don't need observable-array then you can just use the standard JavaScript array indexing like yourArray[yourndex];

    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
  9. Paulson
    Paulson avatar
    54 posts
    Member since:
    Apr 2016

    Posted 01 Jun 2016 in reply to Nikolay Iliev Link to this post

    Thanks now its working...

     

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

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

    Hello Nikolay Iliev,

     I have another doubt concerning local json data calling

    See i have a local json like this,

    {
      "employees": [
        {
          "firstName": "John",
          "lastName": "Doe"
        },
        {
          "firstName": "Anna",
          "lastName": "Smith"
        },
        {
          "firstName": "Peter",
          "lastName": "Jones"
        }
      ]
    }

    this local data i want to show on my ui label or where i want to be. How will be the code?

     

    var fs = require('file-system');
    var observableArrayModule = require("data/observable-array");
    var array = new observableArrayModule.ObservableArray();
    var array;

    var documents = fs.knownFolders.currentApp();
    var jsonFile = documents.getFile('shared/demo.json');

    var jsonData;

    jsonFile.readText()
    .then(function (content) {
        try {
            jsonData = JSON.parse(content);
            array = new observableArrayModule.ObservableArray(jsonData);
        } catch (err) {
            throw new Error('Could not parse JSON file');
        }
    }, function (error) {
        throw new Error('Could not read JSON file');
    });

    data is coming but i need this data in a particular field..

     

  11. Nikolay Iliev
    Admin
    Nikolay Iliev avatar
    351 posts

    Posted 02 Jun 2016 Link to this post

    Hi Paulson,

    To resolve your issue you need to parse your JSON and pass it to your view-model in way that suits uyour needs. I will show you how to parse the data from the JSON file and pass it to a list-view so you can have a list of all employees with fisrt and last names.
    For example:

    main-page.xml
    <Page xmlns="http://schemas.nativescript.org/tns.xsd" navigatingTo="navigatingTo">
      <StackLayout>
        <Label text="All Employees" />
        <ListView items="{{ employees }}" loaded="onLoaded" itemTap="onItemTap">
            <ListView.itemTemplate>
                <StackLayout>
                    <Label text="{{ firstName }}" textWrap="true" />
                    <Label text="{{ lastName }}" textWrap="true" /> 
                </StackLayout>
            </ListView.itemTemplate>
        </ListView>
      </StackLayout>
    </Page>


    main-page.js
    "use strict";
    var observable_1 = require("data/observable");
    var observable_array_1 = require("data/observable-array");
     
    var fs = require("file-system");
    var mainViewModel = new observable_1.Observable();
    var documents = fs.knownFolders.currentApp();
    var jsonFile = documents.getFile('shared/demo.json');
     
    var employeesArray = new observable_array_1.ObservableArray();
     
    function navigatingTo(args) {
        var page = args.object;
     
        jsonFile.readText()
            .then(function (content) {
            try {
                var jsonData = JSON.parse(content);
                for (var key in jsonData) {
                    // as your json has specific structure we have to parse it as needed
                    // in this case we are looking for the key with value "employees"
                    // and then we are goind level down to push all employees into our array
                    if (jsonData.hasOwnProperty(key) && key.toString() === "employees") {
                        var employees = new Array(jsonData[key]);
                        employees.forEach(function (element) {
                            employeesArray.push(element);
                        });
                    }
                }
            }
            catch (err) {
                throw new Error('Could not parse JSON file');
            }
        }, function (error) {
            throw new Error('Could not read JSON file');
        });
     
        // here we set our created employeesArray to the property 'employees'
        // which we use for the list-view items in our xml
        mainViewModel.set("employees", employeesArray);
     
        // bind the mainViewModel to our page
        page.bindingContext = mainViewModel;
    }
    exports.navigatingTo = navigatingTo;

    You can find more infomration about list-view with observable-array here
    Based on the same principal you can bind your models to other elements as well but loading an array
    of elements is usually done with list-view creation.


    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. Nikolay Iliev
    Admin
    Nikolay Iliev avatar
    351 posts

    Posted 02 Jun 2016 Link to this post

    Hi Paulson,

    1)  What you need in order to have nice application architecture and in the same time easy code re-use is 
    the MVVM architectural patten
    The idea behind it is that handles the separation of concerns in you application.
    Organizing you application with MVVM means that you will have
     - Models (your model data e.g. in your case the file that will handle the jsonData)
     - Views : the UI xml files that handles how your application really looks
     - View-Models : the code files that handles your logic and the binding within the Models and Views

    I recommend the out Groceries application tutorial where in Chapter 3 the usage of MVVM pattern is covered.

    Another very simple example of how to use a model in several files you can find at my sample app here
    What is actually happening is that I have a model in app/shared/full-catalog-view-model.ts
    which is re-used in /views/categories/  (where you will see many different categories)  like this:

    var full_catalog_view_model_1 = require("../../shared/full-catalog-view-model");

    And from the you can bind your view-model to the page binding context.
    The great thing about using MVVM pattern is that if I decide some day to change the way that the data is passed in full-catalog-view-model.ts I will have to change only this file! All other files in my apps wont have to be changed (separation of concerns)

    Another thing you may want to check out is how to pass the binding context.
    For example if you have a page that list multiple options and from there with tap on specific item the users is redirected to details-page for that specific item you can pass you context like shown here.

    The simplest way to see how MVVM works is to run
    tns create myApp
    or if you prefer TypeScript
    tns create myApp --template tsc 
    which will create very basic app with basic MVVM used as main-view-model.js and HelloWorldModel()


    2.) Just set your view-model to you page bindingContext

    For example:

    main-page.js
    var myViewModel = new Observable();

    myViewModel.set("lbl-title", "MY Own TITLE");
    myViewModel.set("lbl-name", "SOME NAME");
    myViewModel.set("btn-text", "TAP The Button");
    myViewModel.set("current-minutes", 45);
    myViewModel.set("current-hour", 9);

    page.bindingContext = myViewModel;

    main-page.xml
    <Page xmlns="http://www.nativescript.org/tns.xsd" loaded="onLoaded" navigatedTo="onNavigatedTo">
     <StackLayout>
      <Label text="{{ lbl-title }}" textWrap="true" />
      <Label text="{{ lbl-name }}" textWrap="true" />
           <StackLayout>
      <Button text="{{ btn-text }}" tap="" />   
                              <TimePicker hour="{{ current-hour }}" minute="{{ current-minutes }}"></TimePicker>
      </StackLayout>
        </StackLayout>
    </Page>

    More about binding: http://docs.nativescript.org/core-concepts/bindings#binding-in-xml

    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
  13. Paulson
    Paulson avatar
    54 posts
    Member since:
    Apr 2016

    Posted 03 Jun 2016 in reply to Nikolay Iliev Link to this post

    Hello Nikolay Iliev,

    thanks for your support, see i have another local josn like this

    {  
        "Title": "The Cuckoo's Calling",  
        "Author": "Robert Galbraith",  
        "Genre": "classic crime novel",  
        "Detail": {  
            "Publisher": "Little Brown",  
            "Publication_Year": 2013,  
            "ISBN-13": 9781408704004,  
            "Language": "English",  
            "Pages": 494  
        },  
        "StudentName": {  
            "name": "Little Brown",  
            "DateOf Birth": 2013,  
            "phoneNo": 9781408704004,  
            "Language": "English",  
            "address": 494  
        }, 
        "Price": [  
            {  
                "type": "Hardcover",  
                "price": 16.65  
            },  
            {  
                "type": "Kidle Edition",  
                "price": 7.03  
            }  
        ]  
    }  

     

    i need to call this data into more than one page how can do that? another one question is i need to call this all data in one page different place how i do that?

    eg xml:

    <StackLayout cssClass="drawerMenuContent" id="bg-green" orientation="vertical"> 
                          <GridLayout cssClass="field-group" columns="auto, 50, *" rows="auto, auto, auto"  tap="dailyReport">
                             <!-- Name -->
                            <Image src="res://boy" cssClass="slide-out-img1" stretch="aspectFill" />
                              <StackLayout col="1" colSpan="2" orientation="vertical">
                                <Label class="textName" text="Lekshmikath Deshpande" horizontalAlignment="stretch" />
                                <Label class="className" text="LKG A" horizontalAlignment="stretch" />
                                <HtmlView class="repDet"  html="NativeScript provides a best-of-both-worlds development experience. Our cross-platform JavaScript modules give you the convenience of writing iOS and Android apps from a single JavaScript codebase, while our runtimes give you the power of accessing native APIs." />
                              </StackLayout>
                          </GridLayout> 

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

    Posted 06 Jun 2016 Link to this post

    Hi, I want to know how to connect http api and how to call api data in ui label.. 

    For example: when I write in postman http//local host:8081/api

    I will get message: hai I am Paulson 

     

    Tis value I need to show in front went ui... How?

  15. Nikolay Iliev
    Admin
    Nikolay Iliev avatar
    351 posts

    Posted 07 Jun 2016 Link to this post

    Hello Paulson,

    In order to execute GET, POST, PUT or other network related operation you can use the NativeScript modules http or fetch. They support getting different kind of data (string, JSON, image, ect.) and which one to use is depending entirely on your server and business logic in the application.

    For example:
    var observable = require("data/observable");
    var
    http = require("http");
    var result;
     
    var viewModel = new observable.Observable();;
     
    function onLoaded(args) {
     
        var page = args.object;
     
        http.getJSON("https://httpbin.org/get").then(function (r) {
            // on success Argument (r) is JSON!
            result = r;

            console.log(JSON.stringify(r));
            console.log(result.url.toString()); // httpbin json has propery url
            console.log(result.origin.toString()); // httpbinjson has property origin
        }, function (e) {
            // no failure Argument (e) is Error!
            console.log(e);
        });
        viewModel.set("my-url", result.url);
        viewModel.set("my-origin", result.origin);

        page.bindingContext = viewModel;
    }

    and in your xml the labels to bind the data from your viewModel
    <Label text="{{ my-url }}" textWrap="true" />
    <Label text="{{ my-origin }}" textWrap="true" />

    p.p. httpbin is third party test http request response service which you can use to test your application will string, json, images and GET, POST, PUT,, ect..

    If your server response is string you can use
    http.getString("your-server-address").then(function(r) {
        // Argument (r) is string!
    }, function (e) {
       /// Argument (e) is Error!
    })

    Hope that will help you out - for more advanced usage you can go thruogh Chapter-4 of our NativeScript tutorial.


    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
  16. Paulson
    Paulson avatar
    54 posts
    Member since:
    Apr 2016

    Posted 07 Jun 2016 in reply to Nikolay Iliev Link to this post

    Hi Nikolay Iliev

     Thanks for your reply now i need to know how to add or show ui data in server means twoway binding 

    for example:

    <TextField id="name" hint="User Name" keyboardType="email" class="textBox" text="{{ username }}" />
      <TextField id="email" hint="Password" secure="true" class="textBox" />

    this filed data how to show in server. when i add here some data that should be show in my backend.. how will do that?

     

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

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

    var observableModule = require("data/observable");
    var frameModule = require("ui/frame");

    var http = require("http");

    http.getJSON("http://192.168.0.12:8080/api").then(function (r) {
       console.log(r.message)
       labelMessage = r.message

    }, function (e) {
       // Argument (e) is Error!
       console.log(e);
    });

    var labelMessage = new observableModule.Observable();
    var pageData = new observableModule.Observable();
    function pageLoaded(args) {
        var page = args.object;
        pageData.set("labelMessage", labelMessage);
        page.bindingContext = pageData;
    }
    exports.pageLoaded = pageLoaded;

    i am getting data from server using this code 

    XML: <label text="{{ labelMessage }}" tap="resetPassword" />

    see next

    i need the same way when i add data in  text field how i will get data on backend that is my question

    my XML:

    <TextField id="name" hint="User Name" keyboardType="email" class="textBox" text=" here" />
       <TextField id="email" hint="Password" secure="true" class="textBox" text=" here />

     

     

  18. Nikolay Iliev
    Admin
    Nikolay Iliev avatar
    351 posts

    Posted 07 Jun 2016 Link to this post

    H Paulsoni

    Few remarks:
    - In your code you are creating multiple obsevable models which is not necessary.
    All you need to do is
    var pageData = new observableModule.Observable();
    pageData.set("labelMessage", labelMessage);

    <label text="{{ labelMessage }}" />
    ,And this will make two-way binding. You don't have to use labelMessage = new Observable(); as it will override any previous data saved in labelMessage.

    - to send data to your server (for example: username & password) you can again use http or fetch modules with your own specific server API settings;
    For example: 
    var fetch = require("fetch");
     
        method: "POST",
        headers: { "Content-Type": "application/json" },
        body: JSON.stringify({ username: "myUsernameValue", password: "myPassValue" })
    }).then(r => { return r.json(); }).then(function (r) {
        // console.log(result);
    }, function (e) {
        // console.log("Error occurred " + e);
    });

    Or in your case get the value from labelMessage and POST it to the server like that
        method: "POST",
        headers: { "Content-Type": "application/json" },
        body: JSON.stringify({ username: pageData.get("labelMessage") })
    }).then(r => { return r.json(); }).then(function (r) {
        // console.log(result);
    }, function (e) {
        // console.log("Error occurred " + e);
    });


    Of course user management is more complex theme and you should check what headers your server-API is requiring.. for example grant_type is one of the headers that are often required.
    At this link you can find a sample tutorial that covers a basic login functionality.

    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
  19. Nikolay Iliev
    Admin
    Nikolay Iliev avatar
    351 posts

    Posted 07 Jun 2016 Link to this post

    Hi Paulson,

    This error is usually caused because you need to secure the directory before install.
    This is usually related to not set or broken disk permissions.
    Its not NativeScript issue but more likely OS-permissions related issue.

    To solve this run the following:

    chmod o-w /usr/local

    If it fails or return an error then probably you will need to run the command as a root.
    sudo chmod o-w /usr/local

    If you however are still experiencing this issue please relate to the solutions described by the SO community in the following discussion : http://stackoverflow.com/questions/5380671/getting-the-warning-insecure-world-writable-dir-home-chance-in-path-mode-04


    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
  20. Paulson
    Paulson avatar
    54 posts
    Member since:
    Apr 2016

    Posted 08 Jun 2016 Link to this post

    IOS running error what can i do for fixxing this error?

     

    Processing node_modules failed. Error: Command failed: /bin/sh -c ruby -e "require 'xcodeproj'; xcproj = Xcodeproj::Project.open('catalogApp.xcodeproj'); xcproj.recreate_user_schemes; xcproj.save"
    /System/Library/Frameworks/Ruby.framework/Versions/2.0/usr/lib/ruby/2.0.0/universal-darwin13/rbconfig.rb:213: warning: Insecure world writable dir /usr/local in PATH, mode 040777
    /System/Library/Frameworks/Ruby.framework/Versions/2.0/usr/lib/ruby/2.0.0/rubygems/core_ext/kernel_require.rb:55:in `require': cannot load such file -- xcodeproj (LoadError)
    from /System/Library/Frameworks/Ruby.framework/Versions/2.0/usr/lib/ruby/2.0.0/rubygems/core_ext/kernel_require.rb:55:in `require'
    from -e:1:in `<main>'

     

     

     

     

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

    Posted 08 Jun 2016 Link to this post

    Nativescript telerik ui pro chart

    Advanced Capabilities,Multiple Data Sources,2-D and 3-D Charts

    i need examples to do this chart..

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

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

    https://lh5.googleusercontent.com/5SctNEO2cyUDMA5EuEk3gM9al_43N8ue5InuGPgiEsqXTXj1MOShd-UNdNrGIANofU33KA=w1342-h401

    https://lh5.googleusercontent.com/gdpKd96hZnrg4EyEBId9OvkgHx5y2EllhS6SSOPA5EuH-GIrf0x442iw8mSIHU5Ffr4HNw=w1342-h401

    i want like this type of charts

    can i do using nativescript telerik ui pro chart plugin?

     

  23. Nikolay Iliev
    Admin
    Nikolay Iliev avatar
    351 posts

    Posted 08 Jun 2016 Link to this post

    Hi Paulson,

    I recommend the Getting started tutorial for telerik-ui-pro Chart - in its first article the multiple data sources are covered with the following example.

    Let say you have the following model:
    get categoricalSource() {
        return [
            { Country: "Germany", Amount: 15, SecondVal: 14, ThirdVal: 24 },
            { Country: "France", Amount: 13, SecondVal: 23, ThirdVal: 25 },
            { Country: "Bulgaria", Amount: 24, SecondVal: 17, ThirdVal: 23 },
            { Country: "Spain", Amount: 11, SecondVal: 19, ThirdVal: 24 },
            { Country: "USA", Amount: 18, SecondVal: 8, ThirdVal: 21 }
        ]
    }

    Using the data from this model you can create the following chart
    <navigation:ExamplePage xmlns:navigation="navigation/example-page" loaded="onPageLoaded" xmlns:chart="nativescript-telerik-ui-pro/chart" xmlns="http://www.nativescript.org/tns.xsd">
        <chart:RadCartesianChart id="cartesianChart">
            <chart:RadCartesianChart.series>
                <chart:LineSeries items="{{ categoricalSource }}" categoryProperty="Country" valueProperty="Amount">
     
                    <chart:LineSeries.horizontalAxis>
                        <chart:CategoricalAxis/>
                    </chart:LineSeries.horizontalAxis>
                    <chart:LineSeries.verticalAxis>
                        <chart:LinearAxis/>
                    </chart:LineSeries.verticalAxis>
                </chart:LineSeries>
            </chart:RadCartesianChart.series>
        </chart:RadCartesianChart>
    </navigation:ExamplePage>

    Which will generate this 2-D charts respectively for Android and iOS

    3-D charts are currently not available for NativeScript telerik-ui-pro.
    Here is the list of functionalities that NativeScript telerik-ui-pro chart is providing:
    • 13 chart types
    • Numeric, categorical, date-time axes
    • Styling customizations
    • Interaction: pan & zoom, selection
    • Annotations: line, plot
    • Trackball

    In our chart documentation you will find a lot of extended code-samples and examples of how to create, bind and use the different functionalities of telerik-ui charts

    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
  24. Paulson
    Paulson avatar
    54 posts
    Member since:
    Apr 2016

    Posted 08 Jun 2016 Link to this post

    can i set -10 amount under the x acces line in native script chart and i need more explanation in multi data bar how to do in chart.

    ex:

    imge1

    https://lh5.googleusercontent.com/5SctNEO2cyUDMA5EuEk3gM9al_43N8ue5InuGPgiEsqXTXj1MOShd-UNdNrGIANofU33KA=w1342-h401

    imge2
    https://lh5.googleusercontent.com/gdpKd96hZnrg4EyEBId9OvkgHx5y2EllhS6SSOPA5EuH-GIrf0x442iw8mSIHU5Ffr4HNw=w1342-h401

  25. Nikolay Iliev
    Admin
    Nikolay Iliev avatar
    351 posts

    Posted 08 Jun 2016 Link to this post

    Hi Paulson,

    1.) About using negative values in charts
    Yes you can set negative values on our charts
    Nice documentation article about this you can find at telerik-ui-pro documentation under
    Controls > NativeScript > Chart > Axes > Negatie Values
    Direct link : http://docs.telerik.com/devtools/nativescript-ui/Controls/NativeScript/Chart/Axes/negative-values

    What is actually happening here is taht you should check if the axis you are using is supporting 
    minim and maximum values and add the range like this : 
    <chart:LinearAxis  allowZoom="true" minimum="-50" maximum="50"/>

    The chart axis that supports minimum and maximum values in telerik-ui-pro are the following:


    The best source to check what properties, fields and methods the telerik-ui-pro component is supporting is 
    using the API reference

    2.) About multiple data in chart bars
    Here is a basic example for usage of multi-data and creating bar chart with line chart
    page.xml
          navigatingTo="navigatingTo"
          loaded="onPageLoaded"
          xmlns:chart="nativescript-telerik-ui-pro/chart">
        <chart:RadCartesianChart 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>
    </Page>

    page.js
    "use strict";
    var observable_1 = require("data/observable");
     
    // our first data model
    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 }
    ];
     
    // our second data model
    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();
     
    // bind both models to the properties that we will use in xml
    viewModel.set("countriesSource", countriesItems);
    viewModel.set("yearSource", countriesItems);
     
    function navigatingTo(args) {
        var page = args.object;
        page.bindingContext = viewModel; // bnid the whole model to the chart page
    }
    exports.navigatingTo = navigatingTo;

    Note the following line in our xml file
    <chart:BarSeries items="{{ countriesSource }}"
                     categoryProperty="Country"
                     valueProperty="Amount" />

    What is happening here is that we re saying :
    - from our page.bindingContext take the model for countriesSource 
    - from items in countriesSource (the binded countriesItems) use the values for "Country" key to generate our categories
    - from items in countriesSource (the binded countriesItems) use the values for "Amount" key to generate the bar values

    Same applies to the next line chart (notice that there we are also using "country" key for categories so our
    two charts will share a common categories - of course yu can create totally different business logic)

    I hope that will give you some insight of what you can do with charts - there are multiple variations that can be created and used. If you are interested here is another basic example with buble-charts and three different source : http://docs.telerik.com/devtools/nativescript-ui/Controls/NativeScript/Chart/Series/bubble

    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
  26. Paulson
    Paulson avatar
    54 posts
    Member since:
    Apr 2016

    Posted 09 Jun 2016 Link to this post

    When i try to run my app on ios 

    sh-3.2# tns run ios --device 7ac469275096a086b208d9408bff51aad65d47a5
    Your application will be deployed only on the device specified by the provided index or identifier.
    Project successfully prepared
    Build settings from command line:
        ARCHS = armv7
        CONFIGURATION_BUILD_DIR = /Users/neoito/Desktop/NativeScriptStudy/TestIos/platforms/ios/build/device
        SDKROOT = iphoneos8.2
        SHARED_PRECOMPS_DIR = /Users/neoito/Desktop/NativeScriptStudy/TestIos/platforms/ios/build/sharedpch
        VALID_ARCHS = armv7


    === BUILD TARGET TestIos OF PROJECT TestIos WITH CONFIGURATION Debug ===


    Check dependencies
    Code Sign error: No code signing identities found: No valid signing identities (i.e. certificate and private key pair) matching the team ID “(null)” were found.
    CodeSign error: code signing is required for product type 'Application' in SDK 'iOS 8.2'


    ** BUILD FAILED **




    The following build commands failed:
    Check dependencies
    (1 failure)
    Command xcodebuild failed with exit code 65
    # 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)......

     

    how can i fix this error?

     

     

  27. Nikolay Iliev
    Admin
    Nikolay Iliev avatar
    351 posts

    Posted 09 Jun 2016 Link to this post

    Hello Paulson,

    This error is caused because you can only deploy and run apps if you have Developer ID and configured certificates and provisioning profiles associated with your account and Apple device. Otherwise you can only build apps on the simulator.

    To build your app for an iOS device, you must configure a valid certificate and provisioning profile pair, and have that pair present on your system for code signing your application package.

    A full walktrhough on that matter can be found here : http://seventhsoulmountain.kripajay.com/2013/09/ios-code-sign-in-complete-walkthrough.html

    Note that the Apple Developer Program is paid service and the price for individuals started at 99 US dollars (for one-year membership).

    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
  28. Paulson
    Paulson avatar
    54 posts
    Member since:
    Apr 2016

    Posted 11 Jun 2016 Link to this post

    Hai, 

    Now i am started working on ios when i create a new project it is runing nicely in ios but i have a another my own project but that one is not running ios... when i add ios platform in command promt no error but when i come on platform ios not copying all xml,css,js one way i can say like this my total project is not copying Why it happening can you help me..?   

  29. Nikolay Iliev
    Admin
    Nikolay Iliev avatar
    351 posts

    Posted 13 Jun 2016 Link to this post

    Hello Paulson,

    In my understanding at your own project you are running
    tns platform add ios and from that point your project is not running..
    Based on the  information about how you are coping your project keep in mind
    that if you try to copy/paste content from Windows PC to MAC computer the differences in the way their
    text redactor work may cause unreadable files. 
    To avoid that use source control system like https://github.com/

    However can you please provide more information about this line from your original message "not copying all xml,css,js one way i can say like this my total project is not copying ". Platform add will not copy any file - it will add ios platform folder in your app structure ( under app/platforms/ios ) and will allow tns run ios to prepare, build and start your app under iOS simulator (or device). The files in your ./app will remain the same and will be used to generate your app content and logic for both Android and iOS.

    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
  30. Paulson
    Paulson avatar
    54 posts
    Member since:
    Apr 2016

    Posted 22 Jun 2016 Link to this post

    Hi, Nikolay Iliev

    Thanks for your support  i am still working on Nativescript chart now i am facing some problem,

    1. In chart page i need to add ScrollView 

    2. In a xml full page after a chart i need to write some contents and need to add slider arrows (that means in footer position)

    3. My page style like this

    Fisrt part header, second i need to write sone sentence after chart next like footer part some contents and slider arrow.

    how will i do this?

     

Back to Top