Skip to content

Commit 72e9e6e

Browse files
svdimitrmarin-bratanov
svdimitr
and
marin-bratanov
authored
Chart - OnSeriesClick event documentation (#84)
* docs(chart): initial commit of the events article * chore(chart): improvements on the chart click event docs * chore(chart): fixes on the chart click event article * chore(chart): minor improvements on events article Co-authored-by: Marin Bratanov <m.bratanov@gmail.com>
1 parent 2cf793b commit 72e9e6e

File tree

3 files changed

+280
-0
lines changed

3 files changed

+280
-0
lines changed

‎components/chart/events.md‎

Lines changed: 280 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,280 @@
1+
---
2+
title: Events
3+
page_title: Chart for Blazor | Events
4+
description: Events in the Charts for Blazor
5+
slug: chart-events
6+
tags: telerik,blazor,chart,events,event
7+
published: true
8+
position: 32
9+
---
10+
11+
# Chart Events
12+
13+
This article explains the available events for the Telerik Chart for Blazor:
14+
15+
* [OnSeriesClick](#onseriesclick)
16+
17+
18+
## OnSeriesClick
19+
20+
The `OnSeriesClick` event fires as a response to the user click on a `<ChartSeries>`.
21+
22+
Below you can find:
23+
24+
* [Event Arguments](#event-arguments)
25+
* Examples:
26+
* [Basic Click Handler](#basic-click-handler)
27+
* [Get The Data Model For The Clicked Series](#get-the-data-model-for-the-clicked-series)
28+
* [Load Data On Demand Based On Series Click](#load-data-on-demand-based-on-series-click)
29+
30+
31+
### Event Arguments
32+
33+
The event handler receives a `ChartSeriesClickEventArgs` object which provides the following data:
34+
35+
* `DataItem` - provides the data model of the current series item. You need to cast it to the type from your datasource, which needs to be serializable.
36+
37+
* If you are using a [Date Axis]({%slug components/chart/date-axis%}), the `DataItem` will contain the only the aggregated value in the corresponding y-value field, because it is a collection of more than one items. See the `Category` below for details.
38+
39+
40+
* `Category` - provides information on the category the data point is located in. You need to cast it to the type in your data source, for example `DateTime`, `string`, `int` or another type. The Category parameter is applicable to [Categorical Charts]({%slug components/chart/databind%}#series-types).
41+
42+
* When using a [Date Axis]({%slug components/chart/date-axis%}), you can use it, together with the `BaseUnit` value of the axis, to filter the data source and obtain the actual data items from the data source in case you want to provide extra information about them.
43+
44+
45+
* `Percentage` - applicable to [Donut]({%slug components/chart/types/donut%}), [Pie]({%slug components/chart/types/pie%}) and [Stacked 100%]({%slug components/chart/stack%}#stack-100) Charts - the percentage value of the current data point from the whole.
46+
47+
* `SeriesIndex` - provides the index of the `<ChartSeries>` the data point belongs to.
48+
49+
* `SeriesName` - bound to the Name parameter of the `<ChartSeries>` the data point belongs to.
50+
51+
* `SeriesColor` - shows the RGB color of the Series the data point belongs to.
52+
53+
* `CategoryIndex` - shows the index of the data point's x-axis category.
54+
55+
### Examples
56+
57+
These examples showcase the different applications of the `OnSeriesClick` event.
58+
59+
* [Basic Click Handler](#basic-click-handler)
60+
* [Get The Data Model For The Clicked Series](#get-the-data-model-for-the-clicked-series)
61+
* [Load Data On Demand Based On Series Click](#load-data-on-demand-based-on-series-click)
62+
63+
### Basic Click Handler
64+
65+
````CSHTML
66+
@* Get the Category from which the user clicked. *@
67+
68+
<TelerikChart OnSeriesClick="@OnSeriesClickHandler">
69+
70+
<ChartTooltip Visible="true">
71+
</ChartTooltip>
72+
73+
<ChartSeriesItems>
74+
<ChartSeries Type="ChartSeriesType.Bar" Name="Product 1" Data="@series1Data">
75+
</ChartSeries>
76+
<ChartSeries Type="ChartSeriesType.Bar" Name="Product 2" Data="@series2Data">
77+
</ChartSeries>
78+
</ChartSeriesItems>
79+
80+
<ChartCategoryAxes>
81+
<ChartCategoryAxis Categories="@xAxisItems"></ChartCategoryAxis>
82+
</ChartCategoryAxes>
83+
84+
<ChartTitle Text="Quarterly revenue per product"></ChartTitle>
85+
86+
<ChartLegend Position="ChartLegendPosition.Right">
87+
</ChartLegend>
88+
</TelerikChart>
89+
90+
91+
<div>
92+
Clicked from: @logger
93+
</div>
94+
95+
@code {
96+
public List<object> series1Data = new List<object>() { 10, 2, 5, 6 };
97+
public List<object> series2Data = new List<object>() { 5, 8, 2, 7 };
98+
public string[] xAxisItems = new string[] { "Q1", "Q2", "Q3", "Q4" };
99+
100+
string logger = String.Empty;
101+
102+
void OnSeriesClickHandler(ChartSeriesClickEventArgs args)
103+
{
104+
var category = args.Category.ToString();
105+
logger = category;
106+
}
107+
}
108+
````
109+
110+
>caption The result from the code snippet above
111+
112+
![onseriesclick basic example](images/onseries-click-basic-example.gif)
113+
114+
115+
### Get The Data Model For The Clicked Series
116+
117+
````CSHTML
118+
@* Receive the data model based on the series the user clicked on *@
119+
120+
<TelerikChart OnSeriesClick="@OnSeriesClickHandler">
121+
<ChartSeriesItems>
122+
<ChartSeries Type="ChartSeriesType.Pie" Data="@pieData"
123+
Field="@nameof(MyPieChartModel.SegmentValue)" CategoryField="@nameof(MyPieChartModel.SegmentName)">
124+
</ChartSeries>
125+
</ChartSeriesItems>
126+
127+
<ChartTitle Text="Revenue per product"></ChartTitle>
128+
129+
<ChartLegend Position="ChartLegendPosition.Bottom">
130+
</ChartLegend>
131+
</TelerikChart>
132+
133+
@if (!String.IsNullOrEmpty(logger))
134+
{
135+
<div class="text-center">
136+
@logger
137+
</div>
138+
}
139+
140+
@code {
141+
142+
string logger = String.Empty;
143+
144+
void OnSeriesClickHandler(ChartSeriesClickEventArgs args)
145+
{
146+
//Get the data model for the clicked series
147+
string item = (args.DataItem as MyPieChartModel).SegmentName;
148+
MyPieChartModel dataModel = pieData.Where(x => x.SegmentName == item).FirstOrDefault();
149+
150+
logger = $"Clicked from {dataModel.SegmentName} with value {dataModel.SegmentValue}";
151+
}
152+
153+
public class MyPieChartModel
154+
{
155+
public string SegmentName { get; set; }
156+
public double SegmentValue { get; set; }
157+
}
158+
159+
public List<MyPieChartModel> pieData = new List<MyPieChartModel>
160+
{
161+
new MyPieChartModel
162+
{
163+
SegmentName = "Product 1",
164+
SegmentValue = 2
165+
},
166+
new MyPieChartModel
167+
{
168+
SegmentName = "Product 2",
169+
SegmentValue = 3
170+
},
171+
new MyPieChartModel
172+
{
173+
SegmentName = "Product 3",
174+
SegmentValue = 4
175+
}
176+
};
177+
}
178+
````
179+
180+
>caption The result from the code snippet above
181+
182+
![onseriesclick get data model example](images/onseries-click-get-model-example.gif)
183+
184+
185+
### Load Data On Demand Based On Series Click
186+
187+
````CSHTML
188+
@* Load data on demand based on series click *@
189+
190+
<TelerikChart OnSeriesClick="@OnSeriesClickHandler">
191+
<ChartSeriesItems>
192+
<ChartSeries Type="ChartSeriesType.Pie" Data="@pieData"
193+
Field="@nameof(MyPieChartModel.SegmentValue)" CategoryField="@nameof(MyPieChartModel.SegmentName)">
194+
</ChartSeries>
195+
</ChartSeriesItems>
196+
197+
<ChartTitle Text="Revenue per product"></ChartTitle>
198+
199+
<ChartLegend Position="ChartLegendPosition.Bottom">
200+
</ChartLegend>
201+
</TelerikChart>
202+
203+
@if (GridData.Any())
204+
{
205+
<div class="text-center">
206+
<TelerikGrid Data="@GridData" AutoGenerateColumns="true"
207+
Pageable="true" PageSize="4" Width="650px">
208+
</TelerikGrid>
209+
</div>
210+
}
211+
212+
@code {
213+
public List<MyGridModel> GridData { get; set; } = new List<MyGridModel>();
214+
215+
async Task OnSeriesClickHandler(ChartSeriesClickEventArgs args)
216+
{
217+
int clickedId = (args.DataItem as MyPieChartModel).SegmentId;
218+
219+
GridData = await GenerateGridData(clickedId);
220+
}
221+
222+
async Task<List<MyGridModel>> GenerateGridData(int id)
223+
{
224+
GridData = new List<MyGridModel>()
225+
{
226+
new MyGridModel()
227+
{
228+
Id = id,
229+
ProductManager = $"Product manager {id}",
230+
ProductLaunchDate = DateTime.Today.AddDays(-id),
231+
isActive = id % 2 == 0 ? true : false
232+
}
233+
};
234+
return await Task.FromResult(GridData);
235+
}
236+
237+
public List<MyPieChartModel> pieData = new List<MyPieChartModel>
238+
{
239+
new MyPieChartModel
240+
{
241+
SegmentId = 1,
242+
SegmentName = "Product 1",
243+
SegmentValue = 2
244+
},
245+
new MyPieChartModel
246+
{
247+
SegmentId = 2,
248+
SegmentName = "Product 2",
249+
SegmentValue = 3
250+
},
251+
new MyPieChartModel
252+
{
253+
SegmentId = 3,
254+
SegmentName = "Product 3",
255+
SegmentValue = 4
256+
}
257+
};
258+
259+
public class MyPieChartModel
260+
{
261+
public int SegmentId { get; set; }
262+
public string SegmentName { get; set; }
263+
public double SegmentValue { get; set; }
264+
}
265+
266+
public class MyGridModel
267+
{
268+
public int Id { get; set; }
269+
public string ProductManager { get; set; }
270+
public DateTime ProductLaunchDate { get; set; }
271+
public bool isActive { get; set; }
272+
}
273+
}
274+
````
275+
276+
277+
278+
## See Also
279+
280+
* [Live Demo: Chart Events](https://demos.telerik.com/blazor-ui/chart/events)

‎components/chart/images/onseries-click-basic-example.gif‎

39.9 KB
Loading

‎components/chart/images/onseries-click-get-model-example.gif‎

40.4 KB
Loading

0 commit comments

Comments
 (0)