Skip to content

Commit 9b54708

Browse files
yanisslavmihaela-lukanovaStamo-Gochevdimodi
authored
docs(chart): drilldown chart documentation (#1592)
* docs(chart): drilldown chart documentation * Update components/chart/overview.md Co-authored-by: Mihaela Lukanova <[email protected]> * Update components/chart/events.md Co-authored-by: Mihaela Lukanova <[email protected]> * Update components/chart/drilldown.md Co-authored-by: Mihaela Lukanova <[email protected]> * Update components/chart/drilldown.md Co-authored-by: Mihaela Lukanova <[email protected]> * Update components/chart/drilldown.md Co-authored-by: Mihaela Lukanova <[email protected]> * Update components/chart/drilldown.md Co-authored-by: Mihaela Lukanova <[email protected]> * Update components/chart/drilldown.md Co-authored-by: Mihaela Lukanova <[email protected]> * Update components/chart/drilldown.md Co-authored-by: Mihaela Lukanova <[email protected]> * Update components/chart/drilldown.md Co-authored-by: Mihaela Lukanova <[email protected]> * Update components/chart/drilldown.md Co-authored-by: Mihaela Lukanova <[email protected]> * Update components/chart/overview.md Co-authored-by: Mihaela Lukanova <[email protected]> * Update components/chart/drilldown.md Co-authored-by: Mihaela Lukanova <[email protected]> * Update components/chart/drilldown.md Co-authored-by: Mihaela Lukanova <[email protected]> * Update components/chart/drilldown.md Co-authored-by: Mihaela Lukanova <[email protected]> * chore: applying suggested changes * chore: removing unnecessary paragraph * Update components/chart/drilldown.md Co-authored-by: Stamo Gochev <[email protected]> * Update components/chart/drilldown.md Co-authored-by: Dimo Dimov <[email protected]> * chore: applying suggested changes * PR polishing --------- Co-authored-by: Mihaela Lukanova <[email protected]> Co-authored-by: Stamo Gochev <[email protected]> Co-authored-by: Dimo Dimov <[email protected]>
1 parent 38b4b53 commit 9b54708

File tree

3 files changed

+321
-10
lines changed

3 files changed

+321
-10
lines changed

‎components/chart/drilldown.md

Lines changed: 306 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,306 @@
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)

‎components/chart/events.md

Lines changed: 5 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -14,6 +14,7 @@ This article describes the available events for the Telerik Chart for Blazor:
1414

1515
* [OnAxisLabelClick](#onaxislabelclick)
1616
* [OnLegendItemClick](#onlegenditemclick)
17+
* [OnDrilldown](#ondrilldown)
1718
* [OnSeriesClick](#onseriesclick)
1819

1920
## OnAxisLabelClick
@@ -218,6 +219,10 @@ The `OnLegendItemClick` event fires when the user clicks on any item in the Char
218219
}
219220
````
220221

222+
## OnDrilldown
223+
224+
The `OnDrilldown` event is triggered when the [drill-down functionality executes]({%slug chart-drilldown%}). The handler of this event accepts a `ChartDrilldownEventArgs` object as a parameter. You can access the name of the drilled down (clicked) series through the `SeriesName` property of the event arguments object.
225+
221226
## OnSeriesClick
222227

223228
The `OnSeriesClick` event fires as a response to the user click on a `<ChartSeries>`.

‎components/chart/overview.md

Lines changed: 10 additions & 10 deletions
Original file line numberDiff line numberDiff line change
@@ -154,22 +154,22 @@ To execute Chart methods, obtain reference to the component instance via `@ref`.
154154

155155
| Method | Description |
156156
|---------|-------------|
157-
| Refresh | Use the method to programmatically re-render the Chart. |
157+
| `Refresh` | Use the method to programmatically re-render the Chart. |
158+
| `ResetDrilldownLevel` | Use the method to programmatically reset the drilldown level of the Chart. For more information refer to the [DrillDown article]({%slug chart-drilldown%}#reset-drilldown-level). |
158159

159-
````CSHTML
160-
@using Telerik.Blazor.Components
160+
<div class="skip-repl"></div>
161161

162-
<TelerikButton OnClick="@RefreshTheChart">Refresh the Chart</TelerikButton>
162+
````CSHTML
163+
<TelerikButton OnClick="@RefreshChart">Refresh Chart</TelerikButton>
163164
164-
<TelerikChart @ref="myChartRef">
165-
</TelerikChart>
165+
<TelerikChart @ref="ChartRef" />
166166
167167
@code {
168-
public TelerikChart myChartRef;
169-
170-
private void RefreshTheChart()
168+
public TelerikChart ChartRef;
169+
170+
private void RefreshChart()
171171
{
172-
myChartRef.Refresh();
172+
ChartRef.Refresh();
173173
}
174174
}
175175
````

0 commit comments

Comments
 (0)