From eda84f4cea67baad2cf19567226379550b7f416a Mon Sep 17 00:00:00 2001 From: NansiYancheva <106161782+NansiYancheva@users.noreply.github.com> Date: Wed, 22 May 2024 17:58:34 +0300 Subject: [PATCH] docs(chart):update KB for responsive Chart (#2094) * docs(chart):update KB for responsive Chart * Update components/chart/overview.md Co-authored-by: Dimo Dimov <961014+dimodi@users.noreply.github.com> * Update knowledge-base/chart-responsive.md Co-authored-by: Dimo Dimov <961014+dimodi@users.noreply.github.com> * Update knowledge-base/chart-responsive.md Co-authored-by: Dimo Dimov <961014+dimodi@users.noreply.github.com> * Update knowledge-base/chart-responsive.md Co-authored-by: Dimo Dimov <961014+dimodi@users.noreply.github.com> * Update knowledge-base/chart-responsive.md Co-authored-by: Dimo Dimov <961014+dimodi@users.noreply.github.com> * Update knowledge-base/chart-responsive.md Co-authored-by: Dimo Dimov <961014+dimodi@users.noreply.github.com> * docs(chart):update after review * docs(chart):update KB for print Chart * Update knowledge-base/chart-responsive.md Co-authored-by: Iva Stefanova Koevska-Atanasova * Update knowledge-base/chart-responsive.md Co-authored-by: Iva Stefanova Koevska-Atanasova * simplify the example * update example * consolidate the sample for responsive chart into a single Razor file * Update knowledge-base/chart-responsive.md Co-authored-by: Nadezhda Tacheva <73842592+ntacheva@users.noreply.github.com> * Update knowledge-base/chart-responsive.md Co-authored-by: Nadezhda Tacheva <73842592+ntacheva@users.noreply.github.com> * update description --------- Co-authored-by: Dimo Dimov <961014+dimodi@users.noreply.github.com> Co-authored-by: Iva Stefanova Koevska-Atanasova Co-authored-by: Nadezhda Tacheva <73842592+ntacheva@users.noreply.github.com> --- components/chart/overview.md | 2 +- knowledge-base/chart-print-chart-only.md | 77 +++++++++++++- knowledge-base/chart-responsive.md | 122 +++++++++++++++++++++-- 3 files changed, 192 insertions(+), 9 deletions(-) diff --git a/components/chart/overview.md b/components/chart/overview.md index 122348226..f77795649 100644 --- a/components/chart/overview.md +++ b/components/chart/overview.md @@ -94,7 +94,7 @@ You can add a descriptive text that enriches the [Title](#title) by adding the ` To control the chart size, use its `Width` and `Height` properties. You can read more on how they work in the [Dimensions]({%slug common-features/dimensions%}) article. -You can also set the chart size in percentage values so it occupies its container when it renders. If the parent container size changes, you must call the chart's `Refresh()` C# method after the DOM has been redrawn and the new container dimensions are rendered. You can do this when you explicitly change container sizes (like in the example below), or from code that gets called by events like `window.resize`. You can find an example of making charts redraw on `window.resize` in the [Responsive Chart](https://github.com/telerik/blazor-ui/tree/master/chart/responsive-chart) sample. +You can also set the chart size in percentage values so it occupies its container when it renders. If the parent container size changes, you must call the chart's `Refresh()` C# method after the DOM has been redrawn and the new container dimensions are rendered. You can do this when you explicitly change container sizes (like in the example below), or from code that gets called by events like `window.resize`. You can find an example and guidelines for making Charts refresh on `window.resize` in the knowledge base article for [responsive Chart]({%slug chart-kb-responsive%}). >caption Change the 100% chart size dynamically to have a responsive chart diff --git a/knowledge-base/chart-print-chart-only.md b/knowledge-base/chart-print-chart-only.md index 251698912..3922ae55a 100644 --- a/knowledge-base/chart-print-chart-only.md +++ b/knowledge-base/chart-print-chart-only.md @@ -23,9 +23,82 @@ res_type: kb ## Description -How to print the rendered Blazor Chart? +* How to print the rendered Blazor Chart? +* How to print the Chart? +* How to print only the Chart and hide everything else on the page so only the Chart will show up when printing? ## Solution -An example is available in the following project: [https://github.com/telerik/blazor-ui/tree/master/chart/print-chart-only](https://github.com/telerik/blazor-ui/tree/master/chart/print-chart-only). \ No newline at end of file +By using the browser printing engine and some custom CSS while printing you can hide everything else on the page and print only the Chart: + +1. Add the `media="print"` attribute in the ` + + +@code { + private List SimpleData = new List() { 10, 2, 7, 5 }; + + private string[] XAxisItems = new string[] { "Q1", "Q2", "Q3", "Q4" }; + + private List ModelData = new List() + { + new MyDataModel() { SecondSeriesValue = 1, ExtraData = "first" }, + new MyDataModel() { SecondSeriesValue = 5, ExtraData = "second" }, + new MyDataModel() { SecondSeriesValue = 3, ExtraData = "third" }, + new MyDataModel() { SecondSeriesValue = 2, ExtraData = "fourth" }, + }; + + private async Task Print() + { + await InvokeAsync(StateHasChanged); + await Task.Delay(20); + await JSRuntime.InvokeVoidAsync("print"); + } + + public class MyDataModel + { + public int SecondSeriesValue { get; set; } + public string ExtraData { get; set; } + } +} +```` \ No newline at end of file diff --git a/knowledge-base/chart-responsive.md b/knowledge-base/chart-responsive.md index 4739dbffb..c313d2035 100644 --- a/knowledge-base/chart-responsive.md +++ b/knowledge-base/chart-responsive.md @@ -1,8 +1,8 @@ --- title: Responsive Chart -description: How to adjust the size of a chart when its container or the browser window size changes. +description: How to adjust the size of a Chart when its container or the browser window size changes. type: how-to -page_title: How to make a responsive chart +page_title: How to make a responsive Chart slug: chart-kb-responsive position: tags: @@ -22,12 +22,122 @@ res_type: kb ## Description -When the user resizes the browser window or some layout change happens (for example, a navigation panel is expanded or collapsed), you may want to have the charts redraw with the new dimensions. +When the user resizes the browser window or some layout change happens (for example, a navigation panel is expanded or collapsed), you may want to have the Chart redraw with the new dimensions. ## Solution -Generally, the `Width` and `Height` parameters of the chart can take values in `%`, and the chart will render according to the dimensions of its parent element. +Generally, the `Width` and `Height` parameters of the Chart can take values in `%`, and the Chart will render according to the dimensions of its parent element. -This works well for the initial rendering and the chart will be "responsive" immediately according to your layout, regardless of the display (desktop, tablet, phone). +This works well for the initial rendering and the Chart will be "responsive" immediately according to your layout, regardless of the display (desktop, tablet, phone). -When the layout changes dynamically at runtime, you have to call its `.Refresh()` method. You can find an example in the following sample project: [https://github.com/telerik/blazor-ui/tree/master/chart/responsive-chart](https://github.com/telerik/blazor-ui/tree/master/chart/responsive-chart) +When the window resizes, you have to resize the Chart dynamically at runtime: + +1. Add a JS function that listens for the [window resize event](https://developer.mozilla.org/en-US/docs/Web/API/Window/resize_event) and invokes a C# method. Ensure that the method name in the JS function matches the one in your C# code. +1. In the C# method call the [Chart `.Refresh()` method]({%slug components/chart/overview%}#chart-reference-and-methods) to re-render the Chart so it matches the new window size. + + +````CSHTML +@inject IJSRuntime js + + + + + +
+
+ +Resize the browser window to see the Charts respond to the size change + +
+
+ + + + + + + + + + + + + + + + + + + + + + + + +@code { + private TelerikChart ChartRef { get; set; } // you need references to the Charts you need to resize + + // Replace <__Main> with your Razor class name. + private DotNetObjectReference<__Main>? DotNetRef { get; set; } + + private List SimpleData = new List() { 10, 2, 7, 5 }; + + private List ModelData = new List() { + new MyDataModel() { SecondSeriesValue = 1, ExtraData = "first" }, + new MyDataModel() { SecondSeriesValue = 5, ExtraData = "second" }, + new MyDataModel() { SecondSeriesValue = 3, ExtraData = "third" }, + new MyDataModel() { SecondSeriesValue = 2, ExtraData = "fourth" }, + }; + + private string[] XAxisItems = new string[] { "Q1", "Q2", "Q3", "Q4" }; + + [JSInvokable] + public void RaiseWindowResizeEvent() + { + ChartRef.Refresh(); + } + + protected override void OnInitialized() + { + DotNetRef = DotNetObjectReference.Create(this); + } + + protected override async Task OnAfterRenderAsync(bool firstRender) + { + if (firstRender) + { + // Ensure the HTML is ready. + await Task.Delay(1); + await js.InvokeVoidAsync("saveDotNetRef", DotNetRef); + } + await base.OnAfterRenderAsync(firstRender); + } + + public class MyDataModel + { + public int SecondSeriesValue { get; set; } + public string ExtraData { get; set; } + } +} +```` \ No newline at end of file