Skip to content

Commit

Permalink
docs(chart):update KB for responsive Chart (#2094)
Browse files Browse the repository at this point in the history 
* 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 <koevska@progress.com>

* Update knowledge-base/chart-responsive.md

Co-authored-by: Iva Stefanova Koevska-Atanasova <koevska@progress.com>

* 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 <koevska@progress.com>
Co-authored-by: Nadezhda Tacheva <73842592+ntacheva@users.noreply.github.com>
  • Loading branch information
@NansiYancheva @dimodi
@ikoevska @ntacheva
4 people committed May 22, 2024
1 parent 6d6b029 commit eda84f4
Show file tree
Hide file tree
Showing 3 changed files with 192 additions and 9 deletions.
2 changes: 1 addition & 1 deletion components/chart/overview.md
View file
Original file line number Diff line number Diff line change
Expand Up @@ -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
Expand Down
77 changes: 75 additions & 2 deletions knowledge-base/chart-print-chart-only.md
View file
Original file line number Diff line number Diff line change
Expand Up @@ -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; }
}
}
````
122 changes: 116 additions & 6 deletions knowledge-base/chart-responsive.md
View file
Original file line number Diff line number Diff line change
@@ -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:
Expand All @@ -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; }
}
}
````

0 comments on commit eda84f4

Please sign in to comment.