|
| 1 | +--- |
| 2 | +title: DrillDown |
| 3 | +page_title: DrillDown |
| 4 | +description: The DrillDown feature of the Telerik Chart for Blazor allows users to explore hierarchical data by initially displaying summarized information and to drill down into specific categories or data points for more detailed insights. |
| 5 | +slug: chart-drilldown |
| 6 | +tags: telerik,blazor,chart,drill,down,drilldown |
| 7 | +published: true |
| 8 | +position: 55 |
| 9 | +--- |
| 10 | + |
| 11 | +# DrillDown Charts |
| 12 | + |
| 13 | +The Telerik UI for Blazor Chart supports drilldown functionality for exploring data. |
| 14 | + |
| 15 | +The drill-down feature allows the users to click on a data point (for example, bar, column, pie segment, etc.) to navigate to a different view that contains finer-grained data like breakdown by product of the selected category. The view hierarchy can be displayed in a [Breadcrumb]({%slug breadcrumb-overview%}) for easy navigation back to previous views. |
| 16 | + |
| 17 | +## Configuring DrillDown Charts |
| 18 | + |
| 19 | +To configure Chart series for drill-down: |
| 20 | + |
| 21 | +1. Prepare the data in the appropriate format. Each series data that will be drilled-down must contain a property of type `ChartSeriesDescriptor`. The descriptor includes all the parameters of the `ChartSeries` tag and acts as a container holding information about the series displayed upon user-initiated drill-down. |
| 22 | +1. Specify the drilldown field (the `ChartSeriesDescriptor` field) of the series data by using the `ChartSeries.DrilldownField` or `ChartSeriesDescriptor.DrilldownField` property. |
| 23 | + |
| 24 | +>caption Chart DrillDown |
| 25 | +
|
| 26 | +````CSHTML |
| 27 | +<TelerikChart> |
| 28 | + <ChartSeriesItems> |
| 29 | + <ChartSeries Type="ChartSeriesType.Column" |
| 30 | + Name="Total Sales By Company" |
| 31 | + Data="@Data" |
| 32 | + Field="@nameof(CompanyModel.Sales)" |
| 33 | + CategoryField="@nameof(CompanyModel.Name)" |
| 34 | + DrilldownField="@nameof(CompanyModel.Details)"> |
| 35 | + </ChartSeries> |
| 36 | + </ChartSeriesItems> |
| 37 | +</TelerikChart> |
| 38 | +
|
| 39 | +@code { |
| 40 | + private List<CompanyModel> Data { get; set; } = new List<CompanyModel>(); |
| 41 | +
|
| 42 | + private static List<CompanyModel> GetSeriesData() |
| 43 | + { |
| 44 | + var data = new List<CompanyModel>() |
| 45 | + { |
| 46 | + new CompanyModel() |
| 47 | + { |
| 48 | + Name = "Company A", |
| 49 | + Sales = 100M, |
| 50 | + Details = new ChartSeriesDescriptor() |
| 51 | + { |
| 52 | + Name = "Company A Sales By Product", |
| 53 | + Type = ChartSeriesType.Column, |
| 54 | + Field = nameof(ProductModel.Sales), |
| 55 | + CategoryField = nameof(ProductModel.Name), |
| 56 | + Data = new List<ProductModel>() |
| 57 | + { |
| 58 | + new ProductModel() { Name = "Product 1", Sales = 10M }, |
| 59 | + new ProductModel() { Name = "Product 2", Sales = 20M }, |
| 60 | + new ProductModel() { Name = "Product 3", Sales = 30M }, |
| 61 | + } |
| 62 | + } |
| 63 | + }, |
| 64 | + new CompanyModel() |
| 65 | + { |
| 66 | + Name = "Company B" , |
| 67 | + Sales = 200M, |
| 68 | + Details = new ChartSeriesDescriptor() |
| 69 | + { |
| 70 | + Name = "Company B Sales By Product", |
| 71 | + Type = ChartSeriesType.Column, |
| 72 | + Field = nameof(ProductModel.Sales), |
| 73 | + CategoryField = nameof(ProductModel.Name), |
| 74 | + Data = new List<ProductModel>() |
| 75 | + { |
| 76 | + new ProductModel() { Name = "Product 1", Sales = 30M }, |
| 77 | + new ProductModel() { Name = "Product 2", Sales = 20M }, |
| 78 | + new ProductModel() { Name = "Product 3", Sales = 10M }, |
| 79 | + } |
| 80 | + } |
| 81 | + } |
| 82 | + }; |
| 83 | + return data; |
| 84 | + } |
| 85 | +
|
| 86 | + protected override Task OnInitializedAsync() |
| 87 | + { |
| 88 | + Data = GetSeriesData(); |
| 89 | + return base.OnInitializedAsync(); |
| 90 | + } |
| 91 | +
|
| 92 | + public class CompanyModel |
| 93 | + { |
| 94 | + public string Name { get; set; } |
| 95 | + public decimal Sales { get; set; } |
| 96 | + public ChartSeriesDescriptor Details { get; set; } |
| 97 | + } |
| 98 | +
|
| 99 | + public class ProductModel |
| 100 | + { |
| 101 | + public string Name { get; set; } |
| 102 | + public decimal Sales { get; set; } |
| 103 | + } |
| 104 | +} |
| 105 | +```` |
| 106 | + |
| 107 | +## Configuring Breadcrumb Navigation |
| 108 | + |
| 109 | +Optionally, you can display a Breadcrumb component to show the drill-down levels. |
| 110 | + |
| 111 | +1. Declare a `TelerikChartBreadcrumb` component. |
| 112 | +1. Set the `ChartId` parameter of the Breadcrumb. It must match the `Id` of the Chart that will be associated with the Breadcrumb. |
| 113 | + |
| 114 | +>caption Configuring Breadcrumb for Chart Drilldown |
| 115 | +
|
| 116 | +````CSHTML |
| 117 | +<TelerikChartBreadcrumb ChartId="@ChartId"></TelerikChartBreadcrumb> |
| 118 | +
|
| 119 | +<TelerikChart Id="@ChartId"> |
| 120 | + <ChartSeriesItems> |
| 121 | + <ChartSeries Type="ChartSeriesType.Column" |
| 122 | + Name="Total Sales By Company" |
| 123 | + Data="@Data" |
| 124 | + Field="@nameof(CompanyModel.Sales)" |
| 125 | + CategoryField="@nameof(CompanyModel.Name)" |
| 126 | + DrilldownField="@nameof(CompanyModel.Details)"> |
| 127 | + </ChartSeries> |
| 128 | + </ChartSeriesItems> |
| 129 | +</TelerikChart> |
| 130 | +
|
| 131 | +@code { |
| 132 | + private const string ChartId = "chart1"; |
| 133 | +
|
| 134 | + private List<CompanyModel> Data { get; set; } = new List<CompanyModel>(); |
| 135 | +
|
| 136 | + private static List<CompanyModel> GetSeriesData() |
| 137 | + { |
| 138 | + var data = new List<CompanyModel>() |
| 139 | + { |
| 140 | + new CompanyModel() |
| 141 | + { |
| 142 | + Name = "Company A", |
| 143 | + Sales = 100M, |
| 144 | + Details = new ChartSeriesDescriptor() |
| 145 | + { |
| 146 | + Name = "Company A Sales By Product", |
| 147 | + Type = ChartSeriesType.Column, |
| 148 | + Field = nameof(ProductModel.Sales), |
| 149 | + CategoryField = nameof(ProductModel.Name), |
| 150 | + Data = new List<ProductModel>() |
| 151 | + { |
| 152 | + new ProductModel() { Name = "Product 1", Sales = 10M }, |
| 153 | + new ProductModel() { Name = "Product 2", Sales = 20M }, |
| 154 | + new ProductModel() { Name = "Product 3", Sales = 30M }, |
| 155 | + } |
| 156 | + } |
| 157 | + }, |
| 158 | + new CompanyModel() |
| 159 | + { |
| 160 | + Name = "Company B" , |
| 161 | + Sales = 200M, |
| 162 | + Details = new ChartSeriesDescriptor() |
| 163 | + { |
| 164 | + Name = "Company B Sales By Product", |
| 165 | + Type = ChartSeriesType.Column, |
| 166 | + Field = nameof(ProductModel.Sales), |
| 167 | + CategoryField = nameof(ProductModel.Name), |
| 168 | + Data = new List<ProductModel>() |
| 169 | + { |
| 170 | + new ProductModel() { Name = "Product 1", Sales = 30M }, |
| 171 | + new ProductModel() { Name = "Product 2", Sales = 20M }, |
| 172 | + new ProductModel() { Name = "Product 3", Sales = 10M }, |
| 173 | + } |
| 174 | + } |
| 175 | + } |
| 176 | + }; |
| 177 | +
|
| 178 | + return data; |
| 179 | + } |
| 180 | +
|
| 181 | + protected override Task OnInitializedAsync() |
| 182 | + { |
| 183 | + Data = GetSeriesData(); |
| 184 | + return base.OnInitializedAsync(); |
| 185 | + } |
| 186 | +
|
| 187 | + public class CompanyModel |
| 188 | + { |
| 189 | + public string Name { get; set; } |
| 190 | + public decimal Sales { get; set; } |
| 191 | + public ChartSeriesDescriptor Details { get; set; } |
| 192 | + } |
| 193 | +
|
| 194 | + public class ProductModel |
| 195 | + { |
| 196 | + public string Name { get; set; } |
| 197 | + public decimal Sales { get; set; } |
| 198 | + } |
| 199 | +} |
| 200 | +```` |
| 201 | + |
| 202 | +## Reset Drilldown Level |
| 203 | + |
| 204 | +To reset the drilldown level programmatically, use the `ResetDrilldownLevel` method of the Chart. To invoke the method, obtain a reference to the Chart instance with the `@ref` directive. |
| 205 | + |
| 206 | +>caption Reset Chart Drilldown Level Programmatically |
| 207 | +
|
| 208 | +````CSHTML |
| 209 | +<TelerikButton OnClick="@ResetDrilldownLevel">Reset Drilldown level the Chart</TelerikButton> |
| 210 | +
|
| 211 | +<TelerikChartBreadcrumb ChartId="@ChartId"></TelerikChartBreadcrumb> |
| 212 | +
|
| 213 | +<TelerikChart Id="@ChartId" |
| 214 | + @ref="ChartRef"> |
| 215 | + <ChartSeriesItems> |
| 216 | + <ChartSeries Type="ChartSeriesType.Column" |
| 217 | + Name="Total Sales By Company" |
| 218 | + Data="@Data" |
| 219 | + Field="@nameof(CompanyModel.Sales)" |
| 220 | + CategoryField="@nameof(CompanyModel.Name)" |
| 221 | + DrilldownField="@nameof(CompanyModel.Details)"> |
| 222 | + </ChartSeries> |
| 223 | + </ChartSeriesItems> |
| 224 | +</TelerikChart> |
| 225 | +
|
| 226 | +@code { |
| 227 | + private TelerikChart ChartRef { get; set; } = null!; |
| 228 | +
|
| 229 | + private void ResetDrilldownLevel() |
| 230 | + { |
| 231 | + ChartRef.ResetDrilldownLevel(0); |
| 232 | + } |
| 233 | +
|
| 234 | + private const string ChartId = "chart1"; |
| 235 | +
|
| 236 | + private List<CompanyModel> Data { get; set; } = new List<CompanyModel>(); |
| 237 | +
|
| 238 | + protected override Task OnInitializedAsync() |
| 239 | + { |
| 240 | + Data = GetSeriesData(); |
| 241 | + return base.OnInitializedAsync(); |
| 242 | + } |
| 243 | +
|
| 244 | + private static List<CompanyModel> GetSeriesData() |
| 245 | + { |
| 246 | + var data = new List<CompanyModel>() |
| 247 | + { |
| 248 | + new CompanyModel() |
| 249 | + { |
| 250 | + Name = "Company A", |
| 251 | + Sales = 100M, |
| 252 | + Details = new ChartSeriesDescriptor() |
| 253 | + { |
| 254 | + Name = "Company A Sales By Product", |
| 255 | + Type = ChartSeriesType.Column, |
| 256 | + Field = nameof(ProductModel.Sales), |
| 257 | + CategoryField = nameof(ProductModel.Name), |
| 258 | + Data = new List<ProductModel>() |
| 259 | + { |
| 260 | + new ProductModel() { Name = "Product 1", Sales = 10M }, |
| 261 | + new ProductModel() { Name = "Product 2", Sales = 20M }, |
| 262 | + new ProductModel() { Name = "Product 3", Sales = 30M }, |
| 263 | + } |
| 264 | + } |
| 265 | + }, |
| 266 | + new CompanyModel() |
| 267 | + { |
| 268 | + Name = "Company B" , |
| 269 | + Sales = 200M, |
| 270 | + Details = new ChartSeriesDescriptor() |
| 271 | + { |
| 272 | + Name = "Company B Sales By Product", |
| 273 | + Type = ChartSeriesType.Column, |
| 274 | + Field = nameof(ProductModel.Sales), |
| 275 | + CategoryField = nameof(ProductModel.Name), |
| 276 | + Data = new List<ProductModel>() |
| 277 | + { |
| 278 | + new ProductModel() { Name = "Product 1", Sales = 30M }, |
| 279 | + new ProductModel() { Name = "Product 2", Sales = 20M }, |
| 280 | + new ProductModel() { Name = "Product 3", Sales = 10M }, |
| 281 | + } |
| 282 | + } |
| 283 | + } |
| 284 | + }; |
| 285 | +
|
| 286 | + return data; |
| 287 | + } |
| 288 | +
|
| 289 | + public class CompanyModel |
| 290 | + { |
| 291 | + public string Name { get; set; } |
| 292 | + public decimal Sales { get; set; } |
| 293 | + public ChartSeriesDescriptor Details { get; set; } |
| 294 | + } |
| 295 | +
|
| 296 | + public class ProductModel |
| 297 | + { |
| 298 | + public string Name { get; set; } |
| 299 | + public decimal Sales { get; set; } |
| 300 | + } |
| 301 | +} |
| 302 | +```` |
| 303 | + |
| 304 | +## See Also |
| 305 | + |
| 306 | +* [Live Demo: DrillDown Charts](https://demos.telerik.com/blazor-ui/chart/drilldown) |
0 commit comments