This is a migrated thread and some comments may be shown as answers.

NativeScript ui pro Chart...

7 Answers 179 Views
Chart
This is a migrated thread and some comments may be shown as answers.
This question is locked. New answers and comments are not allowed.
Paulson
Top achievements
Rank 1
Paulson asked on 01 Jun 2016, 06:19 AM

When i click on a particular chart value it should show Like popup or simple dialogue..?

can i do that?

 

7 Answers, 1 is accepted

Sort by
0
Nick Iliev
Telerik team
answered on 01 Jun 2016, 08:34 AM
Hi Paulson,

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
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
0
Paulson
Top achievements
Rank 1
answered on 09 Sep 2016, 07:01 AM

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;

0
Nikolay Tsonev
Telerik team
answered on 09 Sep 2016, 09:01 AM
Hi,

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
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
0
Karlo
Top achievements
Rank 1
answered on 04 Oct 2016, 08:08 PM

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.

0
Nikolay Tsonev
Telerik team
answered on 05 Oct 2016, 08:35 AM
Hi Karlo,

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
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
0
Karlo
Top achievements
Rank 1
answered on 05 Oct 2016, 06:53 PM

That helped me!

Thanks great support.

0
Nikolay Tsonev
Telerik team
answered on 06 Oct 2016, 05:22 AM
Hi,

Regards,
nikolay.tsonev
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
Tags
Chart
Asked by
Paulson
Top achievements
Rank 1
Answers by
Nick Iliev
Telerik team
Paulson
Top achievements
Rank 1
Nikolay Tsonev
Telerik team
Karlo
Top achievements
Rank 1
Share this question
or