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 <[email protected]> * Update knowledge-base/chart-responsive.md Co-authored-by: Dimo Dimov <[email protected]> * Update knowledge-base/chart-responsive.md Co-authored-by: Dimo Dimov <[email protected]> * Update knowledge-base/chart-responsive.md Co-authored-by: Dimo Dimov <[email protected]> * Update knowledge-base/chart-responsive.md Co-authored-by: Dimo Dimov <[email protected]> * Update knowledge-base/chart-responsive.md Co-authored-by: Dimo Dimov <[email protected]> * 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 <[email protected]> * Update knowledge-base/chart-responsive.md Co-authored-by: Iva Stefanova Koevska-Atanasova <[email protected]> * 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 <[email protected]> * Update knowledge-base/chart-responsive.md Co-authored-by: Nadezhda Tacheva <[email protected]> * update description --------- Co-authored-by: Dimo Dimov <[email protected]> Co-authored-by: Iva Stefanova Koevska-Atanasova <[email protected]> Co-authored-by: Nadezhda Tacheva <[email protected]>
telerik · May 22, 2024 · eda84f4 · eda84f4
1 parent 6d6b029
commit eda84f4
Show file tree

Hide file tree

Showing 3 changed files with 192 additions and 9 deletions.
diff --git 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
@@ -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).
+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 `<style>` tag to ensure that the defined styles are applied only when printing the page.
+1. Set a `Class` parameter to the elements that will not be printed and apply the CSS `display:none` rule to hide them.
+1. Set the Chart `Width` and `Height` parameters to fit the printing page.
+1. Use JS Interop to call the browser print method that does the actual printing. Ensure that the browser is printing background graphics (this is a checkbox on the browser's Print dialog) so that you can get the proper colors on the chart and/or other elements.
+
+````CSHTML
+@inject IJSRuntime JSRuntime
+
+<TelerikButton OnClick="@Print" Icon="@SvgIcon.Print" Class="non-printable-element">Print this chart</TelerikButton>
+
+    <TelerikChart Width="700px" Height="400px">
+    <ChartSeriesItems>
+        <ChartSeries Type="@ChartSeriesType.Line" Name="Product 1 (bound to simple data)" Data="@SimpleData">
+        </ChartSeries>
+        <ChartSeries Type="@ChartSeriesType.Line" Name="Product 2 (bound to model)" Data="@ModelData" Field="@nameof(MyDataModel.SecondSeriesValue)">
+            <ChartSeriesLabels Template="#=value# in #=dataItem.ExtraData# quarter" Visible="true"></ChartSeriesLabels>
+        </ChartSeries>
+    </ChartSeriesItems>
+
+    <ChartValueAxes>
+        <ChartValueAxis Color="red"></ChartValueAxis>
+    </ChartValueAxes>
+
+    <ChartCategoryAxes>
+        <ChartCategoryAxis Categories="@XAxisItems"></ChartCategoryAxis>
+    </ChartCategoryAxes>
+
+    <ChartTitle Text="Quarterly sales trend"></ChartTitle>
+
+    <ChartLegend Position="@ChartLegendPosition.Bottom">
+    </ChartLegend>
+</TelerikChart>
+
+
+<style media="print">
+    .top-row,
+    .sidebar,
+    .non-printable-element {
+        display: none;
+    }
+</style>
+
+
+@code {
+    private List<object> SimpleData = new List<object>() { 10, 2, 7, 5 };
+
+    private string[] XAxisItems = new string[] { "Q1", "Q2", "Q3", "Q4" };
+
+    private List<MyDataModel> ModelData = new List<MyDataModel>()
+    {
+        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; }
+    }
+}
+````
diff --git 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
+
+<!-- suppress-error allows the script tag to be in the Razor file for this example -->
+<!-- move this script to a JS file in a production app -->
+<script suppress-error="BL9992">
+
+    var dotNet;
+
+    var timeoutId;
+    var resizeDebounceDelay = 300;
+
+    function saveDotNetRef(dotNetRef) {
+        dotNet = dotNetRef;
+
+        window.addEventListener("resize", onWindowResize);
+    }
+
+    function onWindowResize() {
+        clearTimeout(timeoutId);
+
+        timeoutId = window.setTimeout(function () {
+            dotNet.invokeMethodAsync("RaiseWindowResizeEvent"); // the method name, you may have to change this for your app
+        }, resizeDebounceDelay);
+    }
+
+</script>
+
+<br />
+<br />
+
+Resize the browser window to see the Charts respond to the size change
+
+<br />
+<br />
+
+<TelerikChart @ref="@ChartRef">
+    <ChartSeriesItems>
+        <ChartSeries Type="@ChartSeriesType.Line" Name="Product 1 (bound to simple data)" Data="@SimpleData">
+        </ChartSeries>
+        <ChartSeries Type="@ChartSeriesType.Line" Name="Product 2 (bound to model)" Data="@ModelData" Field="@nameof(MyDataModel.SecondSeriesValue)">
+            <ChartSeriesLabels Template="#=value# in #=dataItem.ExtraData# quarter" Visible="true"></ChartSeriesLabels>
+        </ChartSeries>
+    </ChartSeriesItems>
+
+    <ChartValueAxes>
+        <ChartValueAxis Color="red"></ChartValueAxis>
+    </ChartValueAxes>
+
+    <ChartCategoryAxes>
+        <ChartCategoryAxis Categories="@XAxisItems"></ChartCategoryAxis>
+    </ChartCategoryAxes>
+
+    <ChartTitle Text="Quarterly sales trend"></ChartTitle>
+
+    <ChartLegend Position="@ChartLegendPosition.Bottom">
+    </ChartLegend>
+</TelerikChart>
+
+@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<object> SimpleData = new List<object>() { 10, 2, 7, 5 };
+
+    private List<MyDataModel> ModelData = new List<MyDataModel>() {
+        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; }
+    }
+}
+````