Display label and line every 3 elements.

Thread is closed for posting
6 posts, 0 answers
  1. Raúl
    Raúl avatar
    7 posts
    Member since:
    Jan 2017

    Posted 30 Mar 2017 Link to this post

    Hello I'm creating a graph like the attached image.

    The problem is that x axis is really close to each other and label information cant be displayed well.

     

    I wonder if its possible to keep the graph as it is, but only display the label and vertical line every 3 elements,  one important thing is that I can not only remove the information, I just want to hide the label and vertical line but keep the information (the pink in the attached image).

    Here is the code to display the graph:

                                        <RadCartesianChart
                                            row             = "0"
                                            height          = "150px"
                                            backgroundColor = "transparent"
                                            class           = "center-graph android-heat"
                                            showLabels      = "false">
                                            <SplineAreaSeries
                                                tkCartesianSeries
                                                selectionMode    = "None"
                                                seriesName       = "Area"
                                                [items]          = "stats.heatHours[0]"
                                                categoryProperty = "hour"
                                                valueProperty    = "popular"
                                                stackMode        = "None">
                                            </SplineAreaSeries>
                                            <RadCartesianChartGrid
                                                tkCartesianGrid
                                                horizontalLinesVisible      = "false"
                                                horizontalStripLinesVisible = "false"
                                                horizontalStrokeWidth       = "1"
                                                horizontalStrokeColor       = "#000"
                                                verticalLinesVisible        = "true"
                                                verticalStripLinesVisible   = "false"
                                                verticalStrokeColor         = "#a0a0a0" 
                                                verticalStrokeWidth         = "1">
                                            </RadCartesianChartGrid>
                                            <CategoricalAxis
                                                tkCartesianHorizontalAxis
                                                labelTextColor = "#000"
                                                labelSize      = "10"
                                                lineThickness  = "1"
                                                lineColor      = "#a0a0a0">
                                            </CategoricalAxis>
                                            <LinearAxis
                                                tkCartesianVerticalAxis
                                                [maximum]          = "getBiggestHeat(0)"
                                                lineThickness      = "1"
                                                hidden             = "true"
                                                horizontalLocation = "Right"
                                                lineHidden         = "false">
                                            </LinearAxis>
                                            <Palette
                                                tkCartesianPalette
                                                showLabels = "false"
                                                seriesName = "Area">
                                                <PaletteEntry
                                                    tkCartesianPaletteEntry
                                                    fillColor   = "#FF007F"
                                                    strokeColor = "#FF0049">
                                                </PaletteEntry>
                                            </Palette>
                                        </RadCartesianChart>

     

     

  2. Nikolay Iliev
    Admin
    Nikolay Iliev avatar
    351 posts

    Posted 31 Mar 2017 Link to this post

    Hello Raul,

    Yes, you can show each third tick label on your horizontal axis and meanwhile preserve all the information the graph is visualizing as in the initial state. To achieve that you need to use majorTickInterval with a number value that shows how often your want your ticks visualized on the Axis.
    E.g., set the majorTickInterval with a value of 3 to show each third tick.

    <CategoricalAxis tkCartesianHorizontalAxis majorTickInterval="3"></CategoricalAxis>

    Now your horizontal categorical axis will show only each third label. More about this feature cah be found in this documentation article.

    Regards,
    Nikolay Iliev
    Telerik by Progress
    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. Raúl
    Raúl avatar
    7 posts
    Member since:
    Jan 2017

    Posted 31 Mar 2017 Link to this post

    Hello, and thank you for your answer.

    I tried you solution and works fine on android, but IOS is not working.

    In the attached image you can see the result in IOS.

     

  4. Nikolay Iliev
    Admin
    Nikolay Iliev avatar
    351 posts

    Posted 03 Apr 2017 Link to this post

    Hello Raul,

    Thank you for reporting this issue! I've tested it on my side and indeed at this moment, the majorTickInterval does not work for iOS. I have created a bug report and logged it here. The reason for this is because currently the majorTickPoprety for TKChartCategoricalAxis is a read-only property and can not assign custom values. This was done about two years ago to prevent some possible performance issue related to setting big value for this property.
    However, our developers will discuss the possibilities for implementing this property for iOS and will log the information in the bug report issue posted above. You can track the issue for updates and information - I am also awarding you 1000 Telerik points for posting this bug to us.

    Regards,
    Nikolay Iliev
    Telerik by Progress
    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. Dipanjan
    Dipanjan avatar
    2 posts
    Member since:
    Jan 2017

    Posted 03 Apr 2017 in reply to Nikolay Iliev Link to this post

    Hi there.

    Thank you so much for your answer.

    Is there any workaround to display the information as I mentioned at the top of this post?

    Regards.

     

  6. Nikolay Iliev
    Admin
    Nikolay Iliev avatar
    351 posts

    Posted 03 Apr 2017 Link to this post

    Hi Raul,

    At this very moment, the only thing you can do is to apply styling to your Labels, and this way create an acceptable iOS design for your horizontal axis values. (e.g. creating rotated labels with labelRotationAngle)

    The proper way to reduce the number of the values that are showing would be majorTickProperty but as this property is currently read-only assigning custom values is not possible.Currently, I can't think of any other scenario (except for reducing the passed data for iOS, however, this would change the whole chart which I guess is not the main idea).

    Once again I am sorry for any inconvenience this issue might caused - we are looking actively into solving it and once our developers have stable solution or workaround it will be posted in the bug report issue.

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