Stackchart with Time on LinearAxis

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

    Posted 18 Jul Link to this post

    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.

  2. Nikolay Iliev
    Admin
    Nikolay Iliev avatar
    294 posts

    Posted 18 Jul Link to this post

    Hi Harsh,

    You can set minimum and maximum range of single day (for your LinearAxis) and the set the majorStep to 1 (meaning show every hour) along with dateFormat 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
    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,

    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.

  4. Nikolay Iliev
    Admin
    Nikolay Iliev avatar
    294 posts

    Posted 18 Jul Link to this post

    Hi Harsh,

    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
    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,

    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.

  6. Nikolay Iliev
    Admin
    Nikolay Iliev avatar
    294 posts

    Posted 19 Jul Link to this post

    Hi Harsh,

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