CategoricalAxis Label Steps

5 posts, 0 answers
  1. Hk
    Hk avatar
    10 posts
    Member since:
    Jul 2017

    Posted 18 Jul Link to this post

    Hello,

     I want to plot 7 bars but in CategoricalAxis only 1 label(week view). I can find solution for Javascript/Jquery from "http://docs.telerik.com/kendo-ui/api/javascript/dataviz/ui/chart#configuration-categoryAxis.labels.step".

    How can i get same output using Native Script + Angular2.

    Kindly refer desired output looks like "BarChar_Step.png"

    Thank You.

  2. Nikolay Iliev
    Admin
    Nikolay Iliev avatar
    294 posts

    Posted 18 Jul Link to this post

    Hello Harsh,

    The answer for this ticket was provided in your previously posted ticket with the same question.
    For your convenience, I am quoting the answer here as well.

    Quoted answer:

    To create your axis with week step use DateTimeContinuousAxis (different from DateTimeCategoricalAxis). This axis allows you to set dateFormat and also majorStep as done in this example. For the majorStep property, you can set Week as a value and this way achieve the week view.

    Note: When working with DateTimeContinuousAxis it is important to also set limits (minimum and maximum) for your date range.

    Regards,
    Nikolay Iliev
    Progress Telerik
    Did you know that you can open private support tickets which are reviewed and answered within 24h by the same team who built the components? This is available in our UI for NativeScript Pro + Support offering.
  3. Hk
    Hk avatar
    10 posts
    Member since:
    Jul 2017

    Posted 18 Jul in reply to Nikolay Iliev Link to this post

    Hello Nikolay Iliev,

    I followed your instructions but unfortunately i didn't get desired output.

    i am giving my code so you can inform me exact solution.here you can see 3 buttons on top.on click of any i  want to change view.

    Here my Html File:

    <GridLayout columns="20, auto" rows="20,50,auto,20,50" backgroundColor="#103F69">
        <Label text="Test Line Chart" row="0" colspan="2" color="#ffffff"></Label>
        <FlexboxLayout row="1" colspan="2" textAlignment="center">
            <Button id="button" text="Day" (tap)="dayClick()" row="3" colspan="2" width="80"></Button>
            <Button id="button" text="Week" (tap)="weekClick()" row="3" colspan="2" width="80"></Button>
            <Button id="button" text="Month" (tap)="monthClick()" row="3" colspan="2" width="80"></Button>
        </FlexboxLayout>
        <RadCartesianChart tkExampleTitle tkToggleNavButton col="1" row="2" height="450" width="400">
             <BarSeries tkCartesianSeries [items]="chartData" categoryProperty="{{categoryAxisField}}" valueProperty="{{valueAxisField}}"
                seriesName="barSeries" > </BarSeries>
            <DateTimeContinuousAxis tkCartesianHorizontalAxis dateFormat="{{dateFormat}}" labelFitMode="Rotate" labelRotationAngle="-1.2"
                verticalLocation="Bottom" labelTextColor="White" lineColor="White" plotData="OnTicks" lineThickness="1"
                majorStep="{{majorTicksInterval}}" minimum="{{minDate}}" maximum="{{maxDate}}" plotMode="BetweenTicks"></DateTimeContinuousAxis>
     <LinearAxis tkCartesianVerticalAxis majorStep="1" labelTextColor="White" lineColor="White" labelFormat="%.0f"></LinearAxis>
        </RadCartesianChart>
        <Label text="{{majorStep}}" row="3" colspan="2" color="#ffffff" textAlignment="center"></Label>
     </GridLayout>

     

    And My TS page is :

    import { Component, OnInit } from "@angular/core"
    @Component({
    moduleId: module.id,
    templateUrl: "LineChart.component.html",
    styleUrls: ["LineChart.component.css"]
    })
    export class LineChartComponent implements OnInit {
    public chartData: Array<any>;
    public targetData: number = 12;
    public categoryAxisField: string = "MeasurementDate";
    public valueAxisField: string = "DistanceKM";
    public targetValueAxisField: string = "Duration";
    public dateFormat: string = "MM/dd/YYYY";
    public majorStep: string = "Day";
    public minDate: string = "01/06/2017";
    public maxDate: string = "30/06/2017";
    ngOnInit(): void {
    this.dayClick();
    }
    dayClick() {
    this.dateFormat = "MM/dd/YYYY";
    this.majorStep = "Day";
    this.minDate = "10/06/2017";
    this.maxDate = "24/06/2017";
    this.chartData = [
    { MeasurementDate: "2017-06-10T00:00:00.000Z", Duration: 7, DistanceKM: 1.83, DistanceMiles: 1.6 },
    { MeasurementDate: "2017-06-11T00:00:00.000Z", Duration: 7, DistanceKM: 5.83, DistanceMiles: 1.6 },
    { MeasurementDate: "2017-06-12T00:00:00.000Z", Duration: 7, DistanceKM: 3.83, DistanceMiles: 1.6 },
    { MeasurementDate: "2017-06-13T00:00:00.000Z", Duration: 7, DistanceKM: 9.83, DistanceMiles: 2.6 },
    { MeasurementDate: "2017-06-14T00:00:00.000Z", Duration: 7, DistanceKM: 1.83, DistanceMiles: 3.6 },
    { MeasurementDate: "2017-06-15T00:00:00.000Z", Duration: 7, DistanceKM: 3.83, DistanceMiles: 1.6 },
    { MeasurementDate: "2017-06-16T00:00:00.000Z", Duration: 7, DistanceKM: 9.83, DistanceMiles: 3.6 },
    { MeasurementDate: "2017-06-17T00:00:00.000Z", Duration: 7, DistanceKM: 4.83, DistanceMiles: 2.6 },
    { MeasurementDate: "2017-06-18T00:00:00.000Z", Duration: 7, DistanceKM: 1.83, DistanceMiles: 5.6 },
    { MeasurementDate: "2017-06-19T00:00:00.000Z", Duration: 7, DistanceKM: 0.83, DistanceMiles: 9.6 },
    { MeasurementDate: "2017-06-20T00:00:00.000Z", Duration: 7, DistanceKM: 0.83, DistanceMiles: 9.6 },
    { MeasurementDate: "2017-06-21T00:00:00.000Z", Duration: 7, DistanceKM: 0.83, DistanceMiles: 9.6 },
    { MeasurementDate: "2017-06-22T00:00:00.000Z", Duration: 7, DistanceKM: 0.83, DistanceMiles: 9.6 },
    { MeasurementDate: "2017-06-23T00:00:00.000Z", Duration: 7, DistanceKM: 0.83, DistanceMiles: 9.6 },
    { MeasurementDate: "2017-06-24T00:00:00.000Z", Duration: 7, DistanceKM: 0.83, DistanceMiles: 9.6 },
    ];
    }
    weekClick() {
    this.dateFormat = "MM/dd";
    this.majorStep = "Week";
    this.minDate = "09/06/2017";
    this.maxDate = "25/06/2017";
    this.chartData = [
    { MeasurementDate: "2017-06-10T00:00:00.000Z", Duration: 7, DistanceKM: 1.83, DistanceMiles: 1.6 },
    { MeasurementDate: "2017-06-11T00:00:00.000Z", Duration: 7, DistanceKM: 5.83, DistanceMiles: 1.6 },
    { MeasurementDate: "2017-06-12T00:00:00.000Z", Duration: 7, DistanceKM: 3.83, DistanceMiles: 1.6 },
    { MeasurementDate: "2017-06-13T00:00:00.000Z", Duration: 7, DistanceKM: 9.83, DistanceMiles: 2.6 },
    { MeasurementDate: "2017-06-14T00:00:00.000Z", Duration: 7, DistanceKM: 1.83, DistanceMiles: 3.6 },
    { MeasurementDate: "2017-06-15T00:00:00.000Z", Duration: 7, DistanceKM: 3.83, DistanceMiles: 1.6 },
    { MeasurementDate: "2017-06-16T00:00:00.000Z", Duration: 7, DistanceKM: 9.83, DistanceMiles: 3.6 },
    { MeasurementDate: "2017-06-17T00:00:00.000Z", Duration: 7, DistanceKM: 4.83, DistanceMiles: 2.6 },
    { MeasurementDate: "2017-06-18T00:00:00.000Z", Duration: 7, DistanceKM: 1.83, DistanceMiles: 5.6 },
    { MeasurementDate: "2017-06-19T00:00:00.000Z", Duration: 7, DistanceKM: 0.83, DistanceMiles: 9.6 },
    { MeasurementDate: "2017-06-20T00:00:00.000Z", Duration: 7, DistanceKM: 0.83, DistanceMiles: 9.6 },
    { MeasurementDate: "2017-06-21T00:00:00.000Z", Duration: 7, DistanceKM: 0.83, DistanceMiles: 9.6 },
    { MeasurementDate: "2017-06-22T00:00:00.000Z", Duration: 7, DistanceKM: 0.83, DistanceMiles: 9.6 },
    { MeasurementDate: "2017-06-23T00:00:00.000Z", Duration: 7, DistanceKM: 0.83, DistanceMiles: 9.6 },
    { MeasurementDate: "2017-06-24T00:00:00.000Z", Duration: 7, DistanceKM: 0.83, DistanceMiles: 9.6 },
    ];
    }
    monthClick() {
    this.dateFormat = "MM/YYYY";
    this.majorStep = "Month";
    this.minDate = "10/06/2017";
    this.maxDate = "10/10/2017";
    this.chartData = [
    { MeasurementDate: "2017-06-01T00:00:00.000Z", Duration: 7, DistanceKM: 1.83, DistanceMiles: 1.6 },
    { MeasurementDate: "2017-07-01T00:00:00.000Z", Duration: 7, DistanceKM: 2.83, DistanceMiles: 1.6 },
    { MeasurementDate: "2017-08-01T00:00:00.000Z", Duration: 7, DistanceKM: 4.83, DistanceMiles: 1.6 },
    { MeasurementDate: "2017-09-01T00:00:00.000Z", Duration: 7, DistanceKM: 3.83, DistanceMiles: 1.6 },
    { MeasurementDate: "2017-10-01T00:00:00.000Z", Duration: 7, DistanceKM: 0.83, DistanceMiles: 1.6 },
    ];
    }
    }

     

     

     

    Thank You

     

  4. Nikolay Iliev
    Admin
    Nikolay Iliev avatar
    294 posts

    Posted 18 Jul Link to this post

    Hello Harsh,

    There are few things that need a bit of correction in your code samples.
    - the first thing I've noticed that the majorStep property is bound to majorStepInterval which does not exist in your code-behind (the actual property in your code-behind is called majorStep)
    - you can also use the Angular one-way binding and prioritize the properties in your HTML as their values will be updated respectively to this order. So you might want to set the dateFormat, minimum and maximum properties and only then the majorStep property..
    Below follows the modified code in working state

    HTML file
    <GridLayout columns="20, auto" rows="20,50,auto,20,50" backgroundColor="#103F69">
        <Label text="Test Line Chart" row="0" colspan="2" color="#ffffff"></Label>
        <FlexboxLayout row="1" colspan="2" textAlignment="center">
            <Button id="button" text="Day" (tap)="dayClick()" row="3" colspan="2" width="80"></Button>
            <Button id="button" text="Week" (tap)="weekClick()" row="3" colspan="2" width="80"></Button>
            <Button id="button" text="Month" (tap)="monthClick()" row="3" colspan="2" width="80"></Button>
        </FlexboxLayout>
     
        <RadCartesianChart tkExampleTitle tkToggleNavButton col="1" row="2" height="450" width="400">
            <BarSeries tkCartesianSeries [items]="chartData" categoryProperty="{{categoryAxisField}}" valueProperty="{{valueAxisField}}"
                seriesName="barSeries"> </BarSeries>
     
            <DateTimeContinuousAxis tkCartesianHorizontalAxis labelFitMode="Rotate" labelRotationAngle="-1.2"
                verticalLocation="Bottom" labelTextColor="White" lineColor="White" plotData="OnTicks" lineThickness="1"
                [dateFormat]="dateFormat" [minimum]="minDate" [maximum]="maxDate" [majorStep]="majorStep"  plotMode="BetweenTicks"></DateTimeContinuousAxis>
     
            <LinearAxis tkCartesianVerticalAxis majorStep="1" labelTextColor="White" lineColor="White" labelFormat="%.0f"></LinearAxis>
        </RadCartesianChart>
     
        <Label text="{{majorStep}}" row="3" colspan="2" color="#ffffff" textAlignment="center"></Label>
    </GridLayout>
    Note the order of the properties and the one-way binding used in this line
    [dateFormat]="dateFormat" [minimum]="minDate" [maximum]="maxDate" [majorStep]="majorStep"


    And the content of component file
    import { Component, OnInit } from "@angular/core"
    @Component({
        moduleId: module.id,
        templateUrl: "items.component.html"
    })
    export class ItemsComponent implements OnInit {
        public chartData: Array<any>;
        public targetData: number = 12;
        public categoryAxisField: string = "MeasurementDate";
        public valueAxisField: string = "DistanceKM";
        public targetValueAxisField: string = "Duration";
        public dateFormat: string = "MM/dd/YYYY";
        public majorStep: string = "Day";
        public minDate: string = "01/06/2017";
        public maxDate: string = "30/06/2017";
     
        ngOnInit(): void {
            this.dayClick();
        }
     
        dayClick() {
            this.majorStep = "Day";
            this.dateFormat = "dd/MM";
            this.minDate = "09/06/2017";
            this.maxDate = "25/06/2017";
     
            this.chartData = [
                { MeasurementDate: "2017-06-10T00:00:00.000Z", Duration: 7, DistanceKM: 1.83, DistanceMiles: 1.6 },
                { MeasurementDate: "2017-06-11T00:00:00.000Z", Duration: 7, DistanceKM: 5.83, DistanceMiles: 1.6 },
                { MeasurementDate: "2017-06-12T00:00:00.000Z", Duration: 7, DistanceKM: 3.83, DistanceMiles: 1.6 },
                { MeasurementDate: "2017-06-13T00:00:00.000Z", Duration: 7, DistanceKM: 9.83, DistanceMiles: 2.6 },
                { MeasurementDate: "2017-06-14T00:00:00.000Z", Duration: 7, DistanceKM: 1.83, DistanceMiles: 3.6 },
                { MeasurementDate: "2017-06-15T00:00:00.000Z", Duration: 7, DistanceKM: 3.83, DistanceMiles: 1.6 },
                { MeasurementDate: "2017-06-16T00:00:00.000Z", Duration: 7, DistanceKM: 9.83, DistanceMiles: 3.6 },
                { MeasurementDate: "2017-06-17T00:00:00.000Z", Duration: 7, DistanceKM: 4.83, DistanceMiles: 2.6 },
                { MeasurementDate: "2017-06-18T00:00:00.000Z", Duration: 7, DistanceKM: 1.83, DistanceMiles: 5.6 },
                { MeasurementDate: "2017-06-19T00:00:00.000Z", Duration: 7, DistanceKM: 0.83, DistanceMiles: 9.6 },
                { MeasurementDate: "2017-06-20T00:00:00.000Z", Duration: 7, DistanceKM: 0.83, DistanceMiles: 9.6 },
                { MeasurementDate: "2017-06-21T00:00:00.000Z", Duration: 7, DistanceKM: 0.83, DistanceMiles: 9.6 },
                { MeasurementDate: "2017-06-22T00:00:00.000Z", Duration: 7, DistanceKM: 0.83, DistanceMiles: 9.6 },
                { MeasurementDate: "2017-06-23T00:00:00.000Z", Duration: 7, DistanceKM: 0.83, DistanceMiles: 9.6 },
                { MeasurementDate: "2017-06-24T00:00:00.000Z", Duration: 7, DistanceKM: 0.83, DistanceMiles: 9.6 },
            ];
             
        }
     
        weekClick() {
            this.majorStep = "Week";
            this.dateFormat = "dd/MM/YY";
            this.minDate = "09/06/2017";
            this.maxDate = "25/06/2017";
     
     
            this.chartData = [
                { MeasurementDate: "2017-06-10T00:00:00.000Z", Duration: 7, DistanceKM: 1.83, DistanceMiles: 1.6 },
                { MeasurementDate: "2017-06-11T00:00:00.000Z", Duration: 7, DistanceKM: 5.83, DistanceMiles: 1.6 },
                { MeasurementDate: "2017-06-12T00:00:00.000Z", Duration: 7, DistanceKM: 3.83, DistanceMiles: 1.6 },
                { MeasurementDate: "2017-06-13T00:00:00.000Z", Duration: 7, DistanceKM: 9.83, DistanceMiles: 2.6 },
                { MeasurementDate: "2017-06-14T00:00:00.000Z", Duration: 7, DistanceKM: 1.83, DistanceMiles: 3.6 },
                { MeasurementDate: "2017-06-15T00:00:00.000Z", Duration: 7, DistanceKM: 3.83, DistanceMiles: 1.6 },
                { MeasurementDate: "2017-06-16T00:00:00.000Z", Duration: 7, DistanceKM: 9.83, DistanceMiles: 3.6 },
                { MeasurementDate: "2017-06-17T00:00:00.000Z", Duration: 7, DistanceKM: 4.83, DistanceMiles: 2.6 },
                { MeasurementDate: "2017-06-18T00:00:00.000Z", Duration: 7, DistanceKM: 1.83, DistanceMiles: 5.6 },
                { MeasurementDate: "2017-06-19T00:00:00.000Z", Duration: 7, DistanceKM: 0.83, DistanceMiles: 9.6 },
                { MeasurementDate: "2017-06-20T00:00:00.000Z", Duration: 7, DistanceKM: 0.83, DistanceMiles: 9.6 },
                { MeasurementDate: "2017-06-21T00:00:00.000Z", Duration: 7, DistanceKM: 0.83, DistanceMiles: 9.6 },
                { MeasurementDate: "2017-06-22T00:00:00.000Z", Duration: 7, DistanceKM: 0.83, DistanceMiles: 9.6 },
                { MeasurementDate: "2017-06-23T00:00:00.000Z", Duration: 7, DistanceKM: 0.83, DistanceMiles: 9.6 },
                { MeasurementDate: "2017-06-24T00:00:00.000Z", Duration: 7, DistanceKM: 0.83, DistanceMiles: 9.6 },
            ];
     
        }
     
        monthClick() {
            this.majorStep = "Month";
            this.dateFormat = "dd/MM/YY";
            this.minDate = "01/06/2017";
            this.maxDate = "01/11/2017";
             
            this.chartData = [
                { MeasurementDate: "2017-06-01T00:00:00.000Z", Duration: 7, DistanceKM: 1.83, DistanceMiles: 1.6 },
                { MeasurementDate: "2017-07-01T00:00:00.000Z", Duration: 7, DistanceKM: 2.83, DistanceMiles: 1.6 },
                { MeasurementDate: "2017-08-01T00:00:00.000Z", Duration: 7, DistanceKM: 4.83, DistanceMiles: 1.6 },
                { MeasurementDate: "2017-09-01T00:00:00.000Z", Duration: 7, DistanceKM: 3.83, DistanceMiles: 1.6 },
                { MeasurementDate: "2017-10-01T00:00:00.000Z", Duration: 7, DistanceKM: 0.83, DistanceMiles: 1.6 },
            ];
     
        }
    }



    Regards,
    Nikolay Iliev
    Progress Telerik
    Did you know that you can open private support tickets which are reviewed and answered within 24h by the same team who built the components? This is available in our UI for NativeScript Pro + Support offering.
  5. Hk
    Hk avatar
    10 posts
    Member since:
    Jul 2017

    Posted 19 Jul in reply to Nikolay Iliev Link to this post

    Hello Nikolay,

    I followed steps given by you and my problem solved.

    Thank You.

Back to Top