7 Answers, 1 is accepted
I am closing this ticket ni favor of your previous one where the same question was answered with a simple example.
Regards,
Nikolay Iliev
Telerik
Hi,
Chart dialogue is not working in IOS but in Android the same code is working perfectly code i have given below
XML:-
<chart:RadCartesianChart id="pieChart chart" pointSelected="selectedIndex" selectionMode="Single" height="350" showLabels="false">
<chart:RadCartesianChart.series>
<chart:BarSeries
seriesName="Bar1"
categoryProperty="name"
items="{{ info.chartSource1 }}"
valueProperty="ExpenseOther"
stackMode="Stack"
showLabels="true"
selectionMode="DataPoint">
<chart:LineSeries.labelStyle>
<chart:PointLabelStyle margin="10" fillColor="#FF9900" textSize="10" textColor="#fff" />
</chart:LineSeries.labelStyle>
</chart:BarSeries>
<chart:BarSeries
seriesName="Bar"
items="{{ info.chartSource1 }}"
valueProperty="Expenses-Direct - BSG"
selectionMode="DataPoint"
stackMode="Stack"
categoryProperty="name"
showLabels="true">
<chart:LineSeries.labelStyle>
<chart:PointLabelStyle margin="10" fillColor="#FF2200" textSize="10" textColor="#fff" />
</chart:LineSeries.labelStyle>
</chart:BarSeries>
<chart:BarSeries
seriesName="Bar2"
valueProperty="Direct Income - BSG"
items="{{ info.chartSource1 }}"
selectionMode="DataPoint"
stackMode="Stack"
categoryProperty="name"
showLabels="true">
<chart:LineSeries.labelStyle>
<chart:PointLabelStyle margin="10" fillColor="#34C511" textSize="10" textColor="#fff" />
</chart:LineSeries.labelStyle>
</chart:BarSeries>
<chart:LineSeries seriesName="Line" items="{{ info.chartSource1 }}" categoryProperty="name" valueProperty="netProfit" selectionMode="Series" showLabels="true">
</chart:LineSeries>
<chart:LineSeries seriesName="Line1" items="{{ info.chartSource1 }}" categoryProperty="name" valueProperty="demo" selectionMode="Series" showLabels="true">
</chart:LineSeries>
</chart:RadCartesianChart.series>
<chart:RadCartesianChart.horizontalAxis>
<chart:CategoricalAxis
labelTextColor="#cb4b16" />
</chart:RadCartesianChart.horizontalAxis>
<chart:RadCartesianChart.verticalAxis>
<chart:LinearAxis lineHidden="true"/>
</chart:RadCartesianChart.verticalAxis>
</chart:RadCartesianChart>
JS:-
function selectedIndex(args) {
console.log(chartSource1)
popupArr = []
var barAttributes = chartSource1["chartSource1"].getItem(args.pointIndex);
var monthName = barAttributes.name
objKeys = Object.keys(barAttributes);
objKeys.forEach(function (item) {
if(item == "name" || item == "netProfit" || item == "demo" ){
console.log("no need of the value")
}
else{
popupArr.push(item);
}
})
var options = {
title: monthName,
message: "Choose your race",
actions:popupArr,
cancelButtonText: "Cancel"
};
dialogs.action(options).then((result) => {
if(result != "Cancel") {
var navigationOptions={
moduleName:'views/profit/popupProfit',
context:{param1: result,
param2: monthName,
param3: allDatArr
}
}
frameModule.topmost().navigate(navigationOptions);
}
});
// console.log("selectedIndex "+JSON.stringify(navigationOptions));
}
exports.selectedIndex = selectedIndex;
thank you for contacting us.
I reviewed your sample code and found that there is an existing issue white the returned pointIndex for iOS. The value will alway be undefined and this could cause the problem with the dialogs. The fix will be available in the next version of --. As a temporary you could replace file in the node_modules/---pro/chart folder with the attached one.
Another problem that I found the attached code is that you should use pointSelection attribute RadCartesianChart open tag instead of selectionMode. You could review the attached sample code.
main-page.xml
<
Page
xmlns
=
"http://schemas.nativescript.org/tns.xsd"
navigatingTo
=
"navigatingTo"
xmlns:chart
=
"nativescript-telerik-ui-pro/chart"
>
<
StackLayout
>
<
chart:RadCartesianChart
id
=
"pieChart chart"
pointSelected
=
"selectedIndex"
pointSelection
=
"Single"
height
=
"350"
showLabels
=
"false"
>
<
chart:RadCartesianChart.series
>
<
chart:BarSeries
selectionMode
=
"DataPoint"
items
=
"{{ categoricalSource }}"
categoryProperty
=
"Country"
valueProperty
=
"Amount"
>
<
chart:BarSeries.horizontalAxis
>
<
chart:CategoricalAxis
/>
</
chart:BarSeries.horizontalAxis
>
<
chart:BarSeries.verticalAxis
>
<
chart:LinearAxis
/>
</
chart:BarSeries.verticalAxis
>
</
chart:BarSeries
>
</
chart:RadCartesianChart.series
>
</
chart:RadCartesianChart
>
</
StackLayout
>
</
Page
>
main-page.ts
import { EventData } from "data/observable";
import { Page } from "ui/page";
import { HelloWorldModel } from "./main-view-model";
import {ChartEventData} from "nativescript-telerik-ui-pro/chart"
import {ObservableArray} from "data/observable-array";
import {action} from "ui/dialogs"
// Event handler for Page "navigatingTo" event attached in main-page.xml
var array=new ObservableArray([
{ 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 }
]);
export function navigatingTo(args: EventData) {
// Get the event sender
var page = <
Page
>args.object;
page.bindingContext = {categoricalSource : array};
}
export function selectedIndex(args:ChartEventData){
console.log(args.series.pointIndex);
var options:any = {
title: "Selected index "+args.pointIndex,
message: "Choose your race",
actions:["Button1", "Button2", "Button3"],
cancelButtonText: "Cancel"
};
action(options).then((result) => {
console.log("s")
})
}
main-page.js
"use strict";
var observable_array_1 = require("data/observable-array");
var dialogs_1 = require("ui/dialogs");
// Event handler for Page "navigatingTo" event attached in main-page.xml
var array = new observable_array_1.ObservableArray([
{ 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 }
]);
function navigatingTo(args) {
// Get the event sender
var page = args.object;
page.bindingContext = { categoricalSource: array };
}
exports.navigatingTo = navigatingTo;
function selectedIndex(args) {
console.log(args.series.pointIndex);
var options = {
title: "Selected index " + args.pointIndex,
message: "Choose your race",
actions: ["Button1", "Button2", "Button3"],
cancelButtonText: "Cancel"
};
dialogs_1.action(options).then(function (result) {
console.log("s");
});
}
exports.selectedIndex = selectedIndex;
//# sourceMappingURL=main-page.js.map
I hope this will help
Regards,
nikolay.tsonev
Telerik by Progress
Hi.
It is possible to show the label for a know value point (only one value not the entire series values)?
I'm getting the Y value of a line series chart...
JS
var chart = page.getViewById("chart");
chart.on("pointSelected", function (args) {
console.log(args.pointData.dataYValue);
});
I'm trying to achieve this behavior because my series handle hundred of values and using the showLabels="true" is not possible
so launching the chart not displaying labels and tap in a specific value and that value show up it would be great.
Thank you.
Thank you for interest in NativeScript.
I reviewed your problem and found that perhaps for your case you could use the new chart component called `Trackball`, which will allow you to display label while you select point from the Charts. You could review this component here. For further I am attaching sample code. You could create project and to reuse the given code, where you will find how TrackBall works.
main-page.xml
<
Page
xmlns
=
"http://schemas.nativescript.org/tns.xsd"
navigatingTo
=
"navigatingTo"
xmlns:chart
=
"nativescript-telerik-ui-pro/chart"
>
<
GridLayout
rows
=
""
>
<!--Trackball test-->
<
StackLayout
>
<
Label
text
=
"Trackball test"
/>
<
Button
text
=
"Disable Trackball"
/>
<
chart:RadCartesianChart
id
=
"chart"
height
=
"300"
>
<
chart:RadCartesianChart.series
>
<
chart:AreaSeries
items
=
"{{ categoricalSource }}"
stackMode
=
"Stack"
categoryProperty
=
"Country"
valueProperty
=
"Amount"
>
</
chart:AreaSeries
>
<
chart:AreaSeries
items
=
"{{ categoricalSource }}"
stackMode
=
"Stack"
categoryProperty
=
"Country"
valueProperty
=
"Amount"
>
</
chart:AreaSeries
>
<
chart:AreaSeries
items
=
"{{ categoricalSource }}"
stackMode
=
"Stack"
categoryProperty
=
"Country"
valueProperty
=
"Amount"
>
</
chart:AreaSeries
>
</
chart:RadCartesianChart.series
>
<
chart:RadCartesianChart.horizontalAxis
>
<
chart:CategoricalAxis
/>
</
chart:RadCartesianChart.horizontalAxis
>
<
chart:RadCartesianChart.verticalAxis
>
<
chart:LinearAxis
/>
</
chart:RadCartesianChart.verticalAxis
>
<
chart:RadCartesianChart.trackball
>
<
chart:Trackball
snapMode
=
"AllClosestPoints"
showIntersectionPoints
=
"true"
/>
</
chart:RadCartesianChart.trackball
>
</
chart:RadCartesianChart
>
</
StackLayout
>
</
GridLayout
>
</
Page
>
main-page.ts
import { EventData, Observable } from 'data/observable';
import { Page } from 'ui/page';
import {ObservableArray} from "data/observable-array";
// Event handler for Page "navigatingTo" event attached in main-page.xml
var observable;
export function navigatingTo(args: EventData) {
// Get the event sender
let page = <
Page
>args.object;
var array=new ObservableArray([
{ 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 }
]);
observable = new Observable();
observable.set("categoricalSource", array)
page.bindingContext = observable;
}
In case this is not your case could you provide more info or sample project, where has been shown the problem.
Regards,
nikolay.tsonev
Telerik by Progress
That helped me!
Thanks great support.
Regards,
nikolay.tsonev
Telerik by Progress