NativeScript ui pro Chart...

8 posts, 0 answers
  1. Paulson
    Paulson avatar
    50 posts
    Member since:
    Apr 2016

    Posted 01 Jun Link to this post

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

    can i do that?

     
  2. Nikolay Iliev
    Admin
    Nikolay Iliev avatar
    92 posts

    Posted 01 Jun Link to this post

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

    Posted 09 Sep Link to this post

    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;

  4. nikolay.tsonev
    Admin
    nikolay.tsonev avatar
    66 posts

    Posted 09 Sep Link to this post

    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 nativescript-telerik-ui. As a temporary solution you could replace chart.ios.js file in the node_modules/nativescript-telerik-ui-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
  5. Karlo
    Karlo avatar
    2 posts
    Member since:
    Sep 2016

    Posted 04 Oct Link to this post

    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.

  6. nikolay.tsonev
    Admin
    nikolay.tsonev avatar
    66 posts

    Posted 05 Oct Link to this post

    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 specific point from the Charts. You could review this component here. For further help I am attaching sample code. You could create new 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
  7. Karlo
    Karlo avatar
    2 posts
    Member since:
    Sep 2016

    Posted 05 Oct in reply to nikolay.tsonev Link to this post

    That helped me!

    Thanks great support.

  8. nikolay.tsonev
    Admin
    nikolay.tsonev avatar
    66 posts

    Posted 06 Oct Link to this post

    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
Back to Top