To many items in DateTimeCategoricalAxis

2 posts, 1 answers
  1. Matjaž
    Matjaž avatar
    82 posts
    Member since:
    Jul 2015

    Posted 18 Nov 2016 Link to this post

    I want to display some sensor data for the past 24 hours, but there are to many data (200 records) and I get ugly CategoricalAxis (attach files).

    Is it possible to tell graph that it shouldn't render categorical label for every record? This should make sense, when using DateTime for categorical axis. Can I somehow set only first, middle and last label for categorical axis? Or maybe set some property how many labels I want on DateTime categorical axis?

    I want to show all data for the past 24 hours.

    <RadCartesianChart row="2">
        <DateTimeCategoricalAxis tkCartesianHorizontalAxis labelFitMode="Rotate" dateFormat="dd.MMM H:mm" labelRotationAngle="1.3"></DateTimeCategoricalAxis>
        <LinearAxis tkCartesianVerticalAxis></LinearAxis>
        <SplineSeries tkCartesianSeries [items]="temperaturesSource" categoryProperty="datetime" valueProperty="value"></SplineSeries>
    </RadCartesianChart>
  2. Answer
    Nikolay Iliev
    Admin
    Nikolay Iliev avatar
    204 posts

    Posted 21 Nov 2016 Link to this post

    Hello Matjaz Cot,

    You can use DateTimeContinuousAxis  and set some additional rules for your axis with minimum, maximum, and majorStep  among with plotMode.  More about this options can found in this documentation article
    Using major step you can choose what value to divide the different steps in the axis.For better reference, you can follow this example. (where the majorStep is set with value Month). Respectively you can use the minimum and maximum attributes for the initial and the last values of your axis.

    Example (based on this sample application)
    <RadCartesianChart tkExampleTitle tkToggleNavButton>
        <DateTimeContinuousAxis tkCartesianHorizontalAxis minimum="01/02/2015" maximum="02/02/2015" majorStep="Hour" dateFormat="HH:mm"
            labelFitMode="Rotate" labelRotationAngle="1.2"></DateTimeContinuousAxis>
        <LinearAxis tkCartesianVerticalAxis></LinearAxis>
     
        <LineSeries tkCartesianSeries [items]="dateTimeSource" categoryProperty="TimeStamp" valueProperty="Amount"></LineSeries>
    </RadCartesianChart>

    Here you can find the values that can be set as a majorStep. You can set it to show Hour  and use dateFormat accordingly to visualize your axis items. The example above will render the axis with 24 steps for each hour.
    I hope this will be applicable for you case - please do not hesitate to contact us if you need further assistance.

    Regards,
    Nikolay Iliev
    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