diff --git a/components/chart/events.md b/components/chart/events.md new file mode 100644 index 0000000000..297d3dc76b --- /dev/null +++ b/components/chart/events.md @@ -0,0 +1,280 @@ +--- +title: Events +page_title: Chart for Blazor | Events +description: Events in the Charts for Blazor +slug: chart-events +tags: telerik,blazor,chart,events,event +published: true +position: 32 +--- + +# Chart Events + +This article explains the available events for the Telerik Chart for Blazor: + +* [OnSeriesClick](#onseriesclick) + + +## OnSeriesClick + +The `OnSeriesClick` event fires as a response to the user click on a ``. + +Below you can find: + +* [Event Arguments](#event-arguments) +* Examples: + * [Basic Click Handler](#basic-click-handler) + * [Get The Data Model For The Clicked Series](#get-the-data-model-for-the-clicked-series) + * [Load Data On Demand Based On Series Click](#load-data-on-demand-based-on-series-click) + + +### Event Arguments + +The event handler receives a `ChartSeriesClickEventArgs` object which provides the following data: + +* `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. + + * 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. + + +* `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). + + * 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. + + +* `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. + +* `SeriesIndex` - provides the index of the `` the data point belongs to. + +* `SeriesName` - bound to the Name parameter of the `` the data point belongs to. + +* `SeriesColor` - shows the RGB color of the Series the data point belongs to. + +* `CategoryIndex` - shows the index of the data point's x-axis category. + +### Examples + +These examples showcase the different applications of the `OnSeriesClick` event. + +* [Basic Click Handler](#basic-click-handler) +* [Get The Data Model For The Clicked Series](#get-the-data-model-for-the-clicked-series) +* [Load Data On Demand Based On Series Click](#load-data-on-demand-based-on-series-click) + +### Basic Click Handler + +````CSHTML +@* Get the Category from which the user clicked. *@ + + + + + + + + + + + + + + + + + + + + + + + + +
+ Clicked from: @logger +
+ +@code { + public List series1Data = new List() { 10, 2, 5, 6 }; + public List series2Data = new List() { 5, 8, 2, 7 }; + public string[] xAxisItems = new string[] { "Q1", "Q2", "Q3", "Q4" }; + + string logger = String.Empty; + + void OnSeriesClickHandler(ChartSeriesClickEventArgs args) + { + var category = args.Category.ToString(); + logger = category; + } +} +```` + +>caption The result from the code snippet above + +![onseriesclick basic example](images/onseries-click-basic-example.gif) + + +### Get The Data Model For The Clicked Series + +````CSHTML +@* Receive the data model based on the series the user clicked on *@ + + + + + + + + + + + + + +@if (!String.IsNullOrEmpty(logger)) +{ +
+ @logger +
+} + +@code { + + string logger = String.Empty; + + void OnSeriesClickHandler(ChartSeriesClickEventArgs args) + { + //Get the data model for the clicked series + string item = (args.DataItem as MyPieChartModel).SegmentName; + MyPieChartModel dataModel = pieData.Where(x => x.SegmentName == item).FirstOrDefault(); + + logger = $"Clicked from {dataModel.SegmentName} with value {dataModel.SegmentValue}"; + } + + public class MyPieChartModel + { + public string SegmentName { get; set; } + public double SegmentValue { get; set; } + } + + public List pieData = new List + { + new MyPieChartModel + { + SegmentName = "Product 1", + SegmentValue = 2 + }, + new MyPieChartModel + { + SegmentName = "Product 2", + SegmentValue = 3 + }, + new MyPieChartModel + { + SegmentName = "Product 3", + SegmentValue = 4 + } + }; +} +```` + +>caption The result from the code snippet above + +![onseriesclick get data model example](images/onseries-click-get-model-example.gif) + + +### Load Data On Demand Based On Series Click + +````CSHTML +@* Load data on demand based on series click *@ + + + + + + + + + + + + + +@if (GridData.Any()) +{ +
+ + +
+} + +@code { + public List GridData { get; set; } = new List(); + + async Task OnSeriesClickHandler(ChartSeriesClickEventArgs args) + { + int clickedId = (args.DataItem as MyPieChartModel).SegmentId; + + GridData = await GenerateGridData(clickedId); + } + + async Task> GenerateGridData(int id) + { + GridData = new List() + { + new MyGridModel() + { + Id = id, + ProductManager = $"Product manager {id}", + ProductLaunchDate = DateTime.Today.AddDays(-id), + isActive = id % 2 == 0 ? true : false + } + }; + return await Task.FromResult(GridData); + } + + public List pieData = new List + { + new MyPieChartModel + { + SegmentId = 1, + SegmentName = "Product 1", + SegmentValue = 2 + }, + new MyPieChartModel + { + SegmentId = 2, + SegmentName = "Product 2", + SegmentValue = 3 + }, + new MyPieChartModel + { + SegmentId = 3, + SegmentName = "Product 3", + SegmentValue = 4 + } + }; + + public class MyPieChartModel + { + public int SegmentId { get; set; } + public string SegmentName { get; set; } + public double SegmentValue { get; set; } + } + + public class MyGridModel + { + public int Id { get; set; } + public string ProductManager { get; set; } + public DateTime ProductLaunchDate { get; set; } + public bool isActive { get; set; } + } +} +```` + + + +## See Also + +* [Live Demo: Chart Events](https://demos.telerik.com/blazor-ui/chart/events) diff --git a/components/chart/images/onseries-click-basic-example.gif b/components/chart/images/onseries-click-basic-example.gif new file mode 100644 index 0000000000..dacf3e47df Binary files /dev/null and b/components/chart/images/onseries-click-basic-example.gif differ diff --git a/components/chart/images/onseries-click-get-model-example.gif b/components/chart/images/onseries-click-get-model-example.gif new file mode 100644 index 0000000000..28a8c61768 Binary files /dev/null and b/components/chart/images/onseries-click-get-model-example.gif differ