Hello,
I want to draw Stack chart with Time on Linear Axis and date on DateTimeCategoricalAxis.So how can i achieve the output(refer output StackChart+TimeonYAxis.png). Kindly provide Document/Demo/Code for same.
Here on "DateTimeCategoricalAxis " i can plot date.But can not plot time on Linear Axis.
I am using Native Script with Angular2.
Thank You.
5 Answers, 1 is accepted
You can set minimum and maximum range of single day (for your LinearAxis) and the set the to 1 (meaning show every hour) along with property set to Hour
e.g. modified code based on this example
<RadCartesianChart tkExampleTitle tkToggleNavButton> <DateTimeContinuousAxis tkCartesianHorizontalAxis minimum="01/02/2015" maximum="01/04/2015" majorStep="Week" dateFormat="MMM-dd" labelFitMode="Rotate" labelRotationAngle="1.2"></DateTimeContinuousAxis>
<LinearAxis tkCartesianVerticalAxis minimum="01/02/2015" maximum="01/02/2015" dateFormat="hh" majorStep="1"></LinearAxis> <LineSeries tkCartesianSeries [items]="dateTimeSource" categoryProperty="TimeStamp" valueProperty="Amount"></LineSeries></RadCartesianChart>Regards,
Nikolay Iliev
Progress Telerik
Rank 1
Hello Nikolay Iliev,
Thank you for reply.here i am able to plot time on Axis but i can see time format as 'hh.mm' but i want format like 'hh:mm'.
My Html Code:
<GridLayout columns="20, auto" rows="20,auto,20,50" backgroundColor="#103F69">
<Label text="Sleep Chart" height="150" row="0" colspan="2"></Label>
<Label text="Left" col="0" row="1" color="#ffffff" textAlignment="center" class="rotateLabel"></Label>
<RadCartesianChart tkExampleTitle tkToggleNavButton col="1" row="1" height="500" width="400">
<DateTimeCategoricalAxis tkCartesianHorizontalAxis dateFormat="MM/dd/YYYY" labelFitMode="Rotate" labelRotationAngle="-1.2"
labelTextColor="White" lineColor="White"></DateTimeCategoricalAxis>
<LinearAxis tkCartesianVerticalAxis majorStep="1" labelTextColor="White" lineColor="White" minimum="{{defaultDateMin}}"
maximum={{defaultDateMax}} dateFormat="Hour"></LinearAxis>
<BarSeries tkCartesianSeries [items]="chartData" stackMode="Stack" categoryProperty="MeasurementDate" valueProperty="DeepSleep"
seriesName="DeepSleepBar" ></BarSeries>
<BarSeries tkCartesianSeries [items]="chartData" stackMode="Stack" categoryProperty="MeasurementDate" valueProperty="LightSleep"
seriesName="LightSleepBar"></BarSeries>
<BarSeries tkCartesianSeries [items]="chartData" stackMode="Stack" categoryProperty="MeasurementDate" valueProperty="Awake"
seriesName="AwakeBar"></BarSeries>
<Palette tkCartesianPalette seriesName="DeepSleepBar">
<PaletteEntry tkCartesianPaletteEntry fillColor="White" strokeColor="White" strokeWidth="3"></PaletteEntry>
</Palette>
<Palette tkCartesianPalette seriesName="LightSleepBar">
<PaletteEntry tkCartesianPaletteEntry fillColor="SkyBlue" strokeColor="SkyBlue" strokeWidth="3"></PaletteEntry>
</Palette>
<Palette tkCartesianPalette seriesName="AwakeBar">
<PaletteEntry tkCartesianPaletteEntry fillColor="Red" strokeColor="Red" strokeWidth="3"></PaletteEntry>
</Palette>
</RadCartesianChart>
<Label text="date" row="2" colspan="2" color="#ffffff" textAlignment="center"></Label>
<Button id="button" text="Next" height="150" [nsRouterLink]="[ '/rangeBarChartComponent'] " row="3" colspan="2" width="200"></Button>
</GridLayout>
TS Code:
import {Component,OnInit} from "@angular/core"
@Component({
moduleId: module.id,
templateUrl: "Chart.component.html"
})
export class ChartComponent implements OnInit{
public chartData: Array<any>;
public targetData: number = 12;
public categoryAxisField:string="MeasurementDate";
public valueAxisField:string="DeepSleep";
public targetValueAxisField:string="Awake";
public dateFormat:string="MM/dd/YYYY";
public defaultDateMin:string="01/07/2017 00:00";
public defaultDateMax:string="01/07/2017 23:59";
ngOnInit(): void {
this.chartData = [
{ MeasurementDate: "2017-07-01T01:00:00", Awake: 5, DeepSleep: 5, LightSleep: 0 },
{ MeasurementDate: "2017-07-02T02:00:00", Awake: 6, DeepSleep: 5, LightSleep: 0 },
{ MeasurementDate: "2017-07-03T03:00:00", Awake: 7, DeepSleep: 5, LightSleep: 0 },
{ MeasurementDate: "2017-07-04T04:00:00", Awake: 1, DeepSleep: 6, LightSleep: 0 },
{ MeasurementDate: "2017-07-05T05:00:00", Awake: 3, DeepSleep: 7, LightSleep: 2 },
{ MeasurementDate: "2017-07-03T06:00:00", Awake: 5, DeepSleep: 5, LightSleep: 0 },
{ MeasurementDate: "2017-07-07T07:00:00", Awake: 4, DeepSleep: 8, LightSleep: 0 },
{ MeasurementDate: "2017-07-08T08:00:00", Awake: 2, DeepSleep: 7, LightSleep: 2 },
{ MeasurementDate: "2017-07-09T09:00:00", Awake: 1, DeepSleep: 2, LightSleep: 5 },
{ MeasurementDate: "2017-07-10T10:00:00", Awake: 7, DeepSleep: 8, LightSleep: 0 },
];
}
}
Thank You.
The shown workaround is actually rendering just the number provided by the hour and not using date or hours to visualize the linear axis. At this very moment, the vertical axis does not support time values out-of-the-box.
However, what I can suggest is to parse your date/hour and pass it as a string or float value (depending on what you prefer). This way you can use CategoricalAxis for your vertical just as in the basic example.
Regards,
Nikolay Iliev
Progress Telerik
Rank 1
Hello Nikolay,
Thank You for replying.But unfortunately i am unable to understand last reply and how to do actual implementation.
I also tried to see example link but i can't find relevant information there.
Can you help me by doing change in code which i have posted earlier.So better i can understand.
Thank You.
Setting custom values can be only applied to the value axis.
Giving values to the Value axis different from comparing number value is not applicable as this would make rendering the values obsolete due to the fact the values from your source would not have respective values to be compared a with and rendered on the exact place. So Bas basically, you can only set custom values for your Categorical axis (no matter vertical or horizontal depending on the structure of your chart).
The only possibility to have hour-like value for your value axis is to render the number from 0 to 24 (or for your specific hour range) but still this would mean that the value source should be passed as a numerical values so that your chart series would "know" where and how to render the actual chart graph.
For example, if you have a horizontal categorical axis with some products (e.g. Milk, Eggs, Bread) and your value property is bound to the Amount of those products and the same time, the vertical axis will have to render the range of values. If we provide a mechanism to render dates instead of number values it is not very clear how the actual lines will be rendered (e.g. if we have 5 pieces of Bread as Amount it will not be clear where they would have to render in a time line).
Following that logic in your source, the value property is bound to DeepSleep
{ MeasurementDate: "2017-07-01T01:00:00", Awake: 5, DeepSleep: 5, LightSleep: 0 },So if your value axis is not showing the range of numbers to visualize the DeepSleep actual values but instead is showing hours it won't be clear where to situate the DeepSleep: 5.
The solution is to simply provide numerical values as hours and continue to use the source structure you are using at this very moment.
Regards,
Nikolay Iliev
Progress Telerik