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 .

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

Nikolay Iliev

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:

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

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

Paulson

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.

Nikolay Iliev

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

Nikolay Iliev

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:

// 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

Nikolay Iliev

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

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.tsI 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 runtns create myAppor if you prefer TypeScripttns create myApp --template tsc which will create very basic app with basic MVVM used as main-view-model.js and HelloWorldModel()

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

Nikolay Iliev

In order to execute GET, POST, PUT or other network related operation you can use the NativeScript modules httpor 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.

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

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

Nikolay Iliev

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.

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

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

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)

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

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?

Nikolay Iliev

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.

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

Paulson

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..?

Nikolay Iliev

In my understanding at your own project you are runningtns 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

Progress, Telerik, and certain product names used herein are trademarks or registered trademarks of Progress Software Corporation and/or one of its subsidiaries or affiliates in the U.S. and/or other countries. See Trademarks for appropriate markings.