Hide category axis labels for items with no data

[Mark]

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

[Christian]

Hi is there a way to just show the first and last labels on a char?

[Ivan Danchev]

Hi,

You can do that by setting the Labels Step option. Its value should be the number of labels minus 1. So for example, if you have 10 labels set Step to 9:

.CategoryAxis(axis => axis
    .Categories("2002", "2003", "2004", "2005", "2006", "2007", "2008", "2009", "2010", "2011")
    .MajorGridLines(lines => lines.Visible(false))
    .Labels(l => l.Step(9))
)

 

[Christian]

Hi Ivan, thank you so much, it was really helpful

[Anton Mironov]

Hi Christian,

I will let Ivan that the recommended approach is a working solution as per the needs of your application.

If any further assistance is needed, do not hesitate to contact the team.

Kind Regards,
Anton Mironov

[Stamo Gochev]

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

[Mark]

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,

[Mark]

Screenshot attached.

[Stamo Gochev]

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

[Alex Hajigeorgieva]

Hello,

Here is a way to sort the categories in a grouped chart:

https://docs.telerik.com/kendo-ui/controls/charts/how-to/sorting/sort-category-groups

Regards,
Alex Hajigeorgieva
Progress Telerik