This is a migrated thread and some comments may be shown as answers.
Hide category axis labels for items with no data
5 Answers 154 Views
This is a migrated thread and some comments may be shown as answers.
Mark
Top achievements
Rank 1
Mark asked on 01 Nov 2016, 12:54 PM

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

5 Answers, 1 is accepted

Sort by
0
Stamo Gochev
Telerik team
answered on 03 Nov 2016, 09:41 AM
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.
0
Mark
Top achievements
Rank 1
answered on 17 Nov 2016, 04:19 PM

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,

0
Mark
Top achievements
Rank 1
answered on 17 Nov 2016, 04:22 PM
Screenshot attached.
0
Stamo Gochev
Telerik team
answered on 21 Nov 2016, 06:21 AM
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.
0
Alex Hajigeorgieva
Telerik team
answered on 25 Mar 2020, 03:45 PM

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

Progress is here for your business, like always. Read more about the measures we are taking to ensure business continuity and help fight the COVID-19 pandemic.
Our thoughts here at Progress are with those affected by the outbreak.
Tags
Chart
Asked by
Mark
Top achievements
Rank 1
Answers by
Stamo Gochev
Telerik team
Mark
Top achievements
Rank 1
Alex Hajigeorgieva
Telerik team
Share this question
or