Hide category axis labels for items with no data

5 posts, 0 answers
  1. Mark
    Mark avatar
    90 posts
    Member since:
    Jul 2014

    Posted 01 Nov Link to this post

    Hi,

    I want to be able to hide the category axis on a line chart that doesn't have any data. Please see the attached; as you can see, there are a lot of dates in the middle that don't have any data as there isn't a point plotted, yet the date is still shown in the category axis and there is space reserved for it in the actual graph.

    This looks untidy so we need to be able to hide all of the dates that don't have any data/a point. So for example anything from the 9th of July to the 19th of August should be completely hidden from the chart. How can we achieve this?

    The current code:

    <code>

    Html.Kendo().Chart(Model.OutletColdTemperatures)
                    .Name("OutletTemperatureMonitoringCold") // The name/ID.
                    .ChartArea(chartArea => chartArea.Background("#ADD8E6")) // Background colour.
                    .Title(title => title
                        .Text("Cold Temperatures") // Control the title at the top of the graph.
                        .Color("#2E5A78")
                        .Font("bold 24px Arial, Helvetica, sans-serif")
                        .Position(ChartTitlePosition.Top)
                    )
                    .DataSource(ds => ds
                        .Group(g => g.Add(d => d.SystemRef)) // This tells it to create a new/group each line by the System Ref.
                        .Sort(g => g.Add(d => d.SystemRef))
                    )
                    .SeriesDefaults(seriesDefaults => seriesDefaults
                        .Line().Style(ChartLineStyle.Smooth) // This controls the type of line shown.
                    )
                    .Series(series => series
                        .Line(value => value.Temp, date => date.Recorded) // This controls the line written out.
                        .Name("#: group.value #") // Control the value shown in the Key/Legend.
                        .Labels(labels => labels.Visible(false)) // Hide temperatures on the graph.
                        .MissingValues(ChartLineMissingValues.Interpolate) // Control how missing values are shown.
                    )
                    .CategoryAxis(axis => axis // This controls the category at the bottom. Currently shows the date.
                        .Title("Date")
                        .Type(ChartCategoryAxisType.Date)
                        .Categories(c => c.Recorded)
                        .Labels(labels => labels
                            .Rotation(-65) // Rotate the text around.
                            .Template("#: value.toLocaleDateString() #") // Format the date shown.
                        )
                    )
                    .ValueAxis(axis => axis // This controls the value at the left side. Currently shows the temperature.
                        .Numeric()
                        .Title("Temperature &deg;C")
                        .PlotBands(p => p
                            .Add(10, 10.2, "#FF0000")
                        )
                        .Max(20) // Set the maximum value shown at the top of the graph.
                    )
                    .Legend(legend => legend // This controls the Key/Legend. Currently shows the Outlet System Ref.
                        .Visible(false)
                        .Position(ChartLegendPosition.Bottom)
                        .Labels(x => x.Font(font: "9px Arial, Helvetica, sans-serif").Template("#: text #"))
                    )
                    .Tooltip(tooltip => tooltip // Add a tooltip showing the Outlet details.
                        .Visible(true)
                        .Template(tooltipTemplate)
                    )
                    .Events(events => events
                        .DataBound("OnDataBound_OutletTemperatureMonitoring")
                    )

    </code>

    Any help would be appreciated. I think the same question has been answered here, however the response was a couple years ago: www.telerik.com/forums/hide-labels-on-date-axis-that-have-no-data#BFCuWHL3s0i8c7DX1uPcdw

    Thanks

  2. Stamo Gochev
    Admin
    Stamo Gochev avatar
    157 posts

    Posted 03 Nov Link to this post

    Hello Mark,

    The described functionality is still not supported by the chart.

    As a workaround, you can remove some of the labels by using the Step and Skip properties:

    http://docs.telerik.com/kendo-ui/api/javascript/dataviz/ui/chart#configuration-categoryAxis.labels.step

    http://docs.telerik.com/kendo-ui/api/javascript/dataviz/ui/chart#configuration-categoryAxis.labels.skip

    Alternatively, you can use a category type axis (instead of date) and manually populate the categories:

    http://docs.telerik.com/kendo-ui/api/javascript/dataviz/ui/chart#configuration-categoryAxis.type

    However, note that switching to a category axis will not provide you with all the functionalities of a date axis.

    Regards,
    Stamo Gochev
    Telerik by Progress
    Check out the new UI for ASP.NET Core, the most complete UI suite for ASP.NET Core development on the market, with 60+ tried-and-tested widgets, based on Kendo UI.
  3. UI for ASP.NET MVC is VS 2017 Ready
  4. Mark
    Mark avatar
    90 posts
    Member since:
    Jul 2014

    Posted 17 Nov in reply to Stamo Gochev Link to this post

    Hi Stamo

    Thanks for the suggestion; I've updated the code to change the CategoryAxisType to Category. However, the dates now appear in the wrong order (June dates should be first and August last). Screenshot attached.

    I tried putting this in the DataBound function, however it doesn't have any affect:

    var axis = e.sender.options.categoryAxis;
        axis.categories = axis.categories.sort();

    Here is the updated code (FYI the 'Recorded' property is a DateTime):

    Html.Kendo().Chart(Model.OutletColdTemperatures)
                    .Name("OutletTemperatureMonitoringCold") // The name/ID.
                    .ChartArea(chartArea => chartArea.Background("#ADD8E6")) // Background colour.
                    .Title(title => title
                        .Text("Cold Temperatures") // Control the title at the top of the graph.
                        .Color("#2E5A78")
                        .Font("bold 24px Arial, Helvetica, sans-serif")
                        .Position(ChartTitlePosition.Top)
                    )
                    .DataSource(ds => ds
                        .Group(g => g.Add(d => d.SystemRef)) // This tells it to create a new/group each line by the System Ref.
                        .Sort(g => g.Add(d => d.SystemRef))
                    )
                    .SeriesDefaults(seriesDefaults => seriesDefaults
                        .Line().Style(ChartLineStyle.Smooth) // This controls the type of line shown.
                    )
                    .Series(series => series
                        .Line(value => value.Temp, date => date.Recorded) // This controls the line written out.
                        .Name("#: group.value #") // Control the value shown in the Key/Legend.
                        .Labels(labels => labels.Visible(false)) // Hide temperatures on the graph.
                        .MissingValues(ChartLineMissingValues.Interpolate) // Control how missing values are shown.
                    )
                    .CategoryAxis(axis => axis // This controls the category at the bottom. Currently shows the date.
                        .Title("Date")
                        .Type(ChartCategoryAxisType.Category)
                        .Categories(c => c.Recorded)
                        .Labels(labels => labels
                            .Rotation(-65) // Rotate the text around.
                            .Template("#: FormatTeamsDate(value, 1) #") // Format the date shown.
                        )
                    )
                    .ValueAxis(axis => axis // This controls the value at the left side. Currently shows the temperature.
                        .Numeric()
                        .Title("Temperature &deg;C")
                        .PlotBands(p => p.Add(Model.MinColdBoundary, Model.MinColdBoundary + 0.3, "#FF0000"))
                        .PlotBands(p => p.Add(Model.MaxColdBoundary, Model.MaxColdBoundary + 0.3, "#FF0000"))
                        .PlotBands(p => p.Add(Model.MinColdBoundary + 0.3, Model.MaxColdBoundary, "#CBF7C7").Opacity(0.4))
                        .Min(Model.MinColdAxis) // Set the minimum/maximum value shown at the top of the graph.
                        .Max(Model.MaxColdAxis)
                    )
                    .Legend(legend => legend // This controls the Key/Legend. Currently shows the Outlet System Ref.
                        .Visible(false)
                        .Position(ChartLegendPosition.Bottom)
                        .Labels(x => x.Font(font: "9px Arial, Helvetica, sans-serif").Template("#: text #"))
                    )
                    .Tooltip(tooltip => tooltip // Add a tooltip showing the Outlet details.
                        .Visible(true)
                        .Template(tooltipTemplate)
                    )
                    .Events(events => events
                        .DataBound("OnDataBound_OutletTemperatureMonitoring")
                    )

    Thanks,

  5. Mark
    Mark avatar
    90 posts
    Member since:
    Jul 2014

    Posted 17 Nov in reply to Mark Link to this post

    Screenshot attached.
  6. Stamo Gochev
    Admin
    Stamo Gochev avatar
    157 posts

    Posted 21 Nov Link to this post

    Hello Mark,

    Sorting the categories of a X axis of type "category" after a data source grouping is an unsupported scenario (it only works if the type is set to "date"). In addition, I cannot provide you with a workaround in this case.

    This being said, you can try one of the following ideas:
    • manually group the data source beforehand
    • use the Step and Skip properties with a date axis (the sorting will be applied)

    Regards,
    Stamo Gochev
    Telerik by Progress
    Telerik UI for ASP.NET MVC is ready for Visual Studio 2017 RC! Learn more.
Back to Top
UI for ASP.NET MVC is VS 2017 Ready