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

CategoricalAxis Label Steps

4 Answers 97 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.

4 Answers, 1 is accepted

answered on 18 Jul 2017, 11:39 AM

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.

answered on 18 Jul 2017, 01:51 PM

week_chart.png

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:

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

answered on 18 Jul 2017, 03:03 PM

Hello Harsh,

There are few things that need a bit of correction in your code samples.
- the first thing I've noticed that the property is bound to which does not exist in your code-behind (the actual property in your code-behind is called )
- 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 , minimum and maximum properties and only then the 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";