diff --git a/_config.yml b/_config.yml index be82a353a0..912f6db115 100644 --- a/_config.yml +++ b/_config.yml @@ -192,8 +192,8 @@ navigation: title: "TreeList" "*spreadsheet": title: "Spreadsheet" - "*arcgauge": - title: "ArcGauge" + "*gauge-arc": + title: "Gauge - Arc" "*autocomplete": title: "AutoComplete" "*barcode": @@ -256,8 +256,10 @@ navigation: title: "FlatColorPicker" "*gantt": title: "Gantt" - "*lineargauge": - title: "LinearGauge" + "*gauge-linear": + title: "Gauge - Linear" + "*gauge-circular": + title: "Gauge - Circular" "*listbox": title: "ListBox" "*loader": @@ -286,8 +288,8 @@ navigation: title: "QRCode" "*/radiobutton": title: "RadioButton" - "*radialgauge": - title: "RadialGauge" + "*gauge-radial": + title: "Gauge - Radial" "*rangeslider": title: "RangeSlider" "*responsivepanel": @@ -427,6 +429,10 @@ intro_columns: "Radar Column Charts": "chart-types-radarcolumn" "Radar Line Charts": "chart-types-radarline" "Stock Chart": "stockchart-overview" + "Linear Gauge": "linear-gauge-overview" + "Radial Gauge": "radial-gauge-overview" + "Arc Gauge": "arc-gauge-overview" + "Circular Gauge": "circular-gauge-overview" - diff --git a/_contentTemplates/gauges/additional-customization.md b/_contentTemplates/gauges/additional-customization.md new file mode 100644 index 0000000000..36af7caeaf --- /dev/null +++ b/_contentTemplates/gauges/additional-customization.md @@ -0,0 +1,10 @@ +#linear-gauge-additional-customization +To further customize the elements of the linear gauge you can use nested tags. When configuring nested properties and child elements in your Linear Gauge, the inner tags will contain their parent tag name and add specifics to its end. In general the structure of such nested tags will be `` where the **Category** can be one of the following: + +* Scale +* GaugeArea +* Pointers +#end + + + diff --git a/components/gauge-arc/overview.md b/components/gauge-arc/overview.md new file mode 100644 index 0000000000..0a1e96873a --- /dev/null +++ b/components/gauge-arc/overview.md @@ -0,0 +1,147 @@ +--- +title: Overview +page_title: Arc Gauge Overview +description: Overview of the Arc Gauge for Blazor. +slug: arc-gauge-overview +tags: telerik,blazor,chart,overview +published: True +position: 0 +--- + +# Chart Overview + +The Blazor Chart component allows you to visualize data to your users in a meaningful way so they can draw conclusions. You can use a variety of chart types and control all aspects of the chart's appearance - from colors and fonts, to paddings, margins and templates. + +#### To use a Telerik chart for Blazor, add the `TelerikChart` tag. + +>caption Basic chart with series and category axis [data binding](data-bind), and a few commonly used appearance settings + +````CSHTML +Basic chart and common settings/elements + + + + + + + + + + + + + + + + + + + + + + + + +@code { + public class MyDataModel + { + public int SecondSeriesValue { get; set; } + public string ExtraData { get; set; } + + } + + public 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" }, + }; + + public List simpleData = new List() { 10, 2, 7, 5 }; + + public string[] xAxisItems = new string[] { "Q1", "Q2", "Q3", "Q4" }; +} +```` + +>caption The result from the code snippet above + +![](images/overview-chart.png) + + + +@[template](/_contentTemplates/chart/link-to-basics.md#configurable-nested-chart-settings) + +>caption Component namespace and reference + +````CSHTML +@using Telerik.Blazor.Components + + + + +@code { + Telerik.Blazor.Components.TelerikChart myChartRef; +} +```` + +## Chart Size + +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 renderes. 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. + + +>caption Change the 100% chart size dynamically to have a responsive chart + +````CSHTML +You can make a responsive chart + +Resize the container and redraw the chart + +
+ + + + + + + + + + + + + + +
+ +@code { + string ContainerWidth { get; set; } = "400px"; + string ContainerHeight { get; set; } = "300px"; + Telerik.Blazor.Components.TelerikChart theChart { get; set; } + + async Task ResizeChart() + { + //resize the container + ContainerHeight = "500px"; + ContainerWidth = "800px"; + + //give time to the framework and browser to resize the actual DOM so the chart can use the expected size + await Task.Delay(20); + + //redraw the chart + theChart.Refresh(); + } + + public List someData = new List() { 10, 2, 7, 5 }; + + public string[] xAxisItems = new string[] { "Q1", "Q2", "Q3", "Q4" }; +} +```` + +## See Also + + * [Data Binding]({%slug components/chart/databind%}) + * [Live Demos: Chart](https://demos.telerik.com/blazor-ui/chart/index) + * [API Reference](https://docs.telerik.com/blazor-ui/api/Telerik.Blazor.Components.TelerikChart) diff --git a/components/gauge-circular/overview.md b/components/gauge-circular/overview.md new file mode 100644 index 0000000000..3ef11919d3 --- /dev/null +++ b/components/gauge-circular/overview.md @@ -0,0 +1,147 @@ +--- +title: Overview +page_title: Chart Overview +description: Overview of the Chart for Blazor. +slug: circular-gauge-overview +tags: telerik,blazor,chart,overview +published: True +position: 0 +--- + +# Chart Overview + +The Blazor Chart component allows you to visualize data to your users in a meaningful way so they can draw conclusions. You can use a variety of chart types and control all aspects of the chart's appearance - from colors and fonts, to paddings, margins and templates. + +#### To use a Telerik chart for Blazor, add the `TelerikChart` tag. + +>caption Basic chart with series and category axis [data binding](data-bind), and a few commonly used appearance settings + +````CSHTML +Basic chart and common settings/elements + + + + + + + + + + + + + + + + + + + + + + + + +@code { + public class MyDataModel + { + public int SecondSeriesValue { get; set; } + public string ExtraData { get; set; } + + } + + public 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" }, + }; + + public List simpleData = new List() { 10, 2, 7, 5 }; + + public string[] xAxisItems = new string[] { "Q1", "Q2", "Q3", "Q4" }; +} +```` + +>caption The result from the code snippet above + +![](images/overview-chart.png) + + + +@[template](/_contentTemplates/chart/link-to-basics.md#configurable-nested-chart-settings) + +>caption Component namespace and reference + +````CSHTML +@using Telerik.Blazor.Components + + + + +@code { + Telerik.Blazor.Components.TelerikChart myChartRef; +} +```` + +## Chart Size + +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 renderes. 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. + + +>caption Change the 100% chart size dynamically to have a responsive chart + +````CSHTML +You can make a responsive chart + +Resize the container and redraw the chart + +
+ + + + + + + + + + + + + + +
+ +@code { + string ContainerWidth { get; set; } = "400px"; + string ContainerHeight { get; set; } = "300px"; + Telerik.Blazor.Components.TelerikChart theChart { get; set; } + + async Task ResizeChart() + { + //resize the container + ContainerHeight = "500px"; + ContainerWidth = "800px"; + + //give time to the framework and browser to resize the actual DOM so the chart can use the expected size + await Task.Delay(20); + + //redraw the chart + theChart.Refresh(); + } + + public List someData = new List() { 10, 2, 7, 5 }; + + public string[] xAxisItems = new string[] { "Q1", "Q2", "Q3", "Q4" }; +} +```` + +## See Also + + * [Data Binding]({%slug components/chart/databind%}) + * [Live Demos: Chart](https://demos.telerik.com/blazor-ui/chart/index) + * [API Reference](https://docs.telerik.com/blazor-ui/api/Telerik.Blazor.Components.TelerikChart) diff --git a/components/gauge-linear/images/arrow-pointers.png b/components/gauge-linear/images/arrow-pointers.png new file mode 100644 index 0000000000..e9d0cfb62b Binary files /dev/null and b/components/gauge-linear/images/arrow-pointers.png differ diff --git a/components/gauge-linear/images/basic-linear-gauge.png b/components/gauge-linear/images/basic-linear-gauge.png new file mode 100644 index 0000000000..8c5dc167fd Binary files /dev/null and b/components/gauge-linear/images/basic-linear-gauge.png differ diff --git a/components/gauge-linear/images/color-parameter-labels.png b/components/gauge-linear/images/color-parameter-labels.png new file mode 100644 index 0000000000..47d1ce8032 Binary files /dev/null and b/components/gauge-linear/images/color-parameter-labels.png differ diff --git a/components/gauge-linear/images/color-parameter-ranges.png b/components/gauge-linear/images/color-parameter-ranges.png new file mode 100644 index 0000000000..9252765b94 Binary files /dev/null and b/components/gauge-linear/images/color-parameter-ranges.png differ diff --git a/components/gauge-linear/images/color-parameter.png b/components/gauge-linear/images/color-parameter.png new file mode 100644 index 0000000000..104ce3edd4 Binary files /dev/null and b/components/gauge-linear/images/color-parameter.png differ diff --git a/components/gauge-linear/images/custom-pointer-track.png b/components/gauge-linear/images/custom-pointer-track.png new file mode 100644 index 0000000000..bd974ae77d Binary files /dev/null and b/components/gauge-linear/images/custom-pointer-track.png differ diff --git a/components/gauge-linear/images/format-parameter-labels.PNG b/components/gauge-linear/images/format-parameter-labels.PNG new file mode 100644 index 0000000000..ef11013952 Binary files /dev/null and b/components/gauge-linear/images/format-parameter-labels.PNG differ diff --git a/components/gauge-linear/images/from-to-range.png b/components/gauge-linear/images/from-to-range.png new file mode 100644 index 0000000000..1914a5bc5d Binary files /dev/null and b/components/gauge-linear/images/from-to-range.png differ diff --git a/components/gauge-linear/images/horizontal-linear-gauge.png b/components/gauge-linear/images/horizontal-linear-gauge.png new file mode 100644 index 0000000000..5f88da2808 Binary files /dev/null and b/components/gauge-linear/images/horizontal-linear-gauge.png differ diff --git a/components/gauge-linear/images/labels-custom-borders.png b/components/gauge-linear/images/labels-custom-borders.png new file mode 100644 index 0000000000..04f9679bc1 Binary files /dev/null and b/components/gauge-linear/images/labels-custom-borders.png differ diff --git a/components/gauge-linear/images/min-and-max-linear-gauge.png b/components/gauge-linear/images/min-and-max-linear-gauge.png new file mode 100644 index 0000000000..6da8dc3761 Binary files /dev/null and b/components/gauge-linear/images/min-and-max-linear-gauge.png differ diff --git a/components/gauge-linear/images/minor-and-major-units-linear-gauge.png b/components/gauge-linear/images/minor-and-major-units-linear-gauge.png new file mode 100644 index 0000000000..667d72dbea Binary files /dev/null and b/components/gauge-linear/images/minor-and-major-units-linear-gauge.png differ diff --git a/components/gauge-linear/images/mirror-linear-gauge.png b/components/gauge-linear/images/mirror-linear-gauge.png new file mode 100644 index 0000000000..3651282e84 Binary files /dev/null and b/components/gauge-linear/images/mirror-linear-gauge.png differ diff --git a/components/gauge-linear/images/opacity-parameter-ranges.png b/components/gauge-linear/images/opacity-parameter-ranges.png new file mode 100644 index 0000000000..c6920e81bf Binary files /dev/null and b/components/gauge-linear/images/opacity-parameter-ranges.png differ diff --git a/components/gauge-linear/images/remove-minorunit-ticks-linear-gauge.png b/components/gauge-linear/images/remove-minorunit-ticks-linear-gauge.png new file mode 100644 index 0000000000..eef407d270 Binary files /dev/null and b/components/gauge-linear/images/remove-minorunit-ticks-linear-gauge.png differ diff --git a/components/gauge-linear/images/reverse-linear-gauge.png b/components/gauge-linear/images/reverse-linear-gauge.png new file mode 100644 index 0000000000..7041694be8 Binary files /dev/null and b/components/gauge-linear/images/reverse-linear-gauge.png differ diff --git a/components/gauge-linear/images/visible-parameter-labels.png b/components/gauge-linear/images/visible-parameter-labels.png new file mode 100644 index 0000000000..4bfb9200be Binary files /dev/null and b/components/gauge-linear/images/visible-parameter-labels.png differ diff --git a/components/gauge-linear/labels.md b/components/gauge-linear/labels.md new file mode 100644 index 0000000000..b290532899 --- /dev/null +++ b/components/gauge-linear/labels.md @@ -0,0 +1,165 @@ +--- +title: Labels +page_title: Labels +description: Linear Gauge for Blazor - Labels. +slug: linear-gauge-labels +tags: telerik,blazor,linear,gauge,labels +published: True +position: 20 +--- + +## Linear Gauge Labels + +You can customize the appearance of the labels rendered on the [scale]({%slug linear-gauge-scale%}) of the Linear Gauge by using the ``, child tag of the ``, and the parameters it exposes: + +* [Format](#format) + +* [Color](#color) + +* [Visible](#visible) + +* [Additional Customization](#additional-customization) + +## Format + +The `Format` (`string`) parameter allows you to customize the rendering of the labels by using the standard numeric format strings. You can set the values of the labels to showcase, for example, currency, percentage, and so on. + +>caption Use the Format parameter to showcase currency. The result from the code snippet below. + +![Format parameter example](images/format-parameter-labels.png) + +````CSHTML +@* Use the {0:C0} format string to format the values of the labels as currency. *@ + + + + + + + + + + + + + + + + + + + + + + +```` + +## Color + +The `Color` (`string`) parameter controls the color of the labels. It accepts **CSS**, **HEX** and **RGB** colors. + +>caption Change the color of the labels. The result from the code snippet below. + +![Color parameter screenshot](images/color-parameter-labels.png) + +````CSHTML +@* Change the color of the labels to blue *@ + + + + + + + + + + + + + + + + + + + + + + +```` + +## Visible + +The `Visible` (`bool`) parameter controls wether the labels will be rendered. + +>caption Hide the labels by using the Visible parameter. The result from the code snippet below + +![Hide the labels](images/visible-parameter-labels.png) + +````CSHTML +@* Set the Visible parameter to false to hide the labels *@ + + + + + + + + + + + + + + + + + + + + + + +```` + +## Additional Customization + +@[template](/_contentTemplates/gauges/additional-customization.md#linear-gauge-additional-customization) + +>caption Customize the borders of the Labels. The result from the code snippet below. + +![Custom Label borders](images/labels-custom-borders.png) + +````CSHTML +@* Provide color, solid outline and custom width to the label borders *@ + + + + + + + + + + + + + + + + + + + + + + + +```` + +## See Also + +* [Linear Gauge: Overview]({%slug linear-gauge-overview%}) +* [Linear Gauge: Scale]({%slug linear-gauge-scale%}) +* [Linear Gauge: Ranges]({%slug linear-gauge-ranges%}) +* [Linear Gauge: Pointers]({%slug linear-gauge-pointers%}) diff --git a/components/gauge-linear/overview.md b/components/gauge-linear/overview.md new file mode 100644 index 0000000000..4c9bac8d5e --- /dev/null +++ b/components/gauge-linear/overview.md @@ -0,0 +1,108 @@ +--- +title: Overview +page_title: Linear Gauge Overview +description: Overview of the Linear Gauge for Blazor. +slug: linear-gauge-overview +tags: telerik,blazor,linear,gauge,overview +published: True +position: 0 +--- + +# Linear Gauge Overview + +The Telerik Linear Gauge for Blazor represents [numerical values]({%slug linear-gauge-pointers%}) on a [scale]({%slug linear-gauge-scale%}) of ranges in a linear format. + +This article is separated in the following sections: + +* [Basics](#basics) + +* [Features](#features) + +* [Methods](#methods) + +## Basics + +>caption To add a Telerik Linear Gauge for Blazor to your application: + +1. Add the `` tag. + +1. Add one or more instance of the `` to the `` collection. + +1. Provide a `Value` for each ``. + +>caption Basic Telerik Linear Gauge for Blazor. + +![Basic Linear Gauge](images/basic-linear-gauge.png) + +````CSHTML +@* Setup a basic linear gauge *@ + + + + + + +```` + +## Features + +The Telerik Linear Gauge for Blazor exposes the following features: + +#### Linear Gauge Size + +* `Width` - `string` - controls the width of the component. You can read more on how they work in the [Dimensions]({%slug common-features/dimensions%}) article. + +* `Height` - `string` - controls the height of the component. You can read more on how they work in the [Dimensions]({%slug common-features/dimensions%}) article. + +You can also set the Gauge size in percentage values so it occupies its container when it renderes. If the parent container size changes, you must call the gauge's `Refresh()` C# [method](#methods) after the DOM has been redrawn and the new container dimensions are rendered. + +#### Other Feautres + +* `Class` - renders a custom CSS class on the topmost wrapping element of the component. You can use that class to reposition the component on the page. + +* Scale - The scale of the linear gauge renders the values of the [pointers]({%slug linear-gauge-pointers%}), different [ranges]({%slug linear-gauge-ranges%}) and [labels]({%slug linear-gauge-ranges%}). See the [Scale]({%slug linear-gauge-scale%}) article for more information on how to customize the scale of the component. + +* Ranges - The ranges are used to visually distinguish particular values on the scale. See the [Ranges]({%slug linear-gauge-ranges%}) article for more information on how to provide ranges for the scale of the component. + +* Labels - The labels are rendered on the scale of the component to give information to the users. See the [Labels]({%slug linear-gauge-labels%}) article for more information on how to customize the labels on the scale of the component. + +* Pointers - The pointers indicate the values on the scale of the component. See the [Pointers]({%slug linear-gauge-pointers%}) article for more information on how to customize the pointers of the component. + +## Methods + +The Linear Gauge reference exposes the `Refresh` method which allows you to programatically re-render the component. + +>caption Get a component reference and use the Refresh method + +````CSHTML +@* Change the Height of the component *@ + +Change the Height of the component + + + + + + + + + +@code { + Telerik.Blazor.Components.TelerikLinearGauge LinearGaugeRef { get; set; } + + public string Height { get; set; } = "300px"; + + private void ChangeTheHeight() + { + Height = "450px"; + + LinearGaugeRef.Refresh(); + } +} +```` + +## See Also + +* [Linear Gauge: Live Demo](https://demos.telerik.com/blazor-ui/linear-gauge) +* [Linear Gauge: Scale]({%slug linear-gauge-scale%}) +* [Linear Gauge: Pointers]({%slug linear-gauge-pointers%}) \ No newline at end of file diff --git a/components/gauge-linear/pointers.md b/components/gauge-linear/pointers.md new file mode 100644 index 0000000000..959a94a541 --- /dev/null +++ b/components/gauge-linear/pointers.md @@ -0,0 +1,179 @@ +--- +title: Pointers +page_title: Linear Gauge - Pointers +description: Linear Gauge for Blazor - Pointers. +slug: linear-gauge-pointers +tags: telerik,blazor,linear,gauge,overview +published: True +position: 10 +--- + +# Linear Gauge Pointers + +The pointers are the values that will be marked on the scale. You can customize them through the parameters they expose: + +* [Shape](#shape) + +* [Color](#color) + +* [Opacity](#opacity) + +* [Size](#size) + +* [Margin](#margin) + +* [Additional Customization](#additional-customization) + +>note The examples in this article are using the [Arrow shape](#shape) of the Pointers, but you can use BarIndicator too. + +## Shape + +The `Shape` parameter controls the shape of the pointer and takes a member of the `LinearGaugePointerShape` enum: + +* `BarIndicator` - by default a bar indication will be rendered as the pointer shape + +* `Arrow` + +>caption Change the shape of the pointer. The result from the code snippet below. + +![Arrow Pointers](images/arrow-pointers.png) + +````CSHTML +@* Use arrows as pointers in the Linear Gauge *@ + + + + + + + + + + + + + + +```` + +## Color + +The `Color` (`string`) parameter controls the color of the pointers. It accepts **CSS**, **HEX** and **RGB** colors. + +>caption Change the color of the arrow pointers. The result from the code snippet below + +![color parameter example](images/color-parameter.png) + +````CSHTML +@* Change the color of the pointers *@ + + + + + + + + + + + + + + +```` + +## Opacity + +The `Opacity` (`double`) parameter controls the opacity of the pointers. The value passed to it should be between **0** and **1**. + +````CSHML +@* Change the opacity of a pointer *@ + + + + + + + + + + + + + + +```` + +## Size + +The `Size` (`double`) parameter controls the size of the pointers. + +````CSHTML +@* Change the sizes of the pointers *@ + + + + + + + + + + + + + + +```` + +## Margin + +The `Margin` (`double`) parameter controls the margin between the [Scale]({%slug linear-gauge-scale%}) and the pointers. + +````CSHTML +@* Change the margin between the scale and the pointers *@ + + + + + + + + + + + + + + +```` + +## Additional Customization + +@[template](/_contentTemplates/gauges/additional-customization.md#linear-gauge-additional-customization) + +>caption Customize the Pointer Track. The result from the code snippet below. + +![custom pointer track](images/custom-pointer-track.png) + +````CSHTML +@* Customize the pointer track *@ + + + + + + + + + + + + + +```` + +## See Also + +* [Linear Gauge: Overview]({%slug linear-gauge-overview%}) +* [Linear Gauge: Scale]({%slug linear-gauge-scale%}) diff --git a/components/gauge-linear/ranges.md b/components/gauge-linear/ranges.md new file mode 100644 index 0000000000..16f58069a4 --- /dev/null +++ b/components/gauge-linear/ranges.md @@ -0,0 +1,138 @@ +--- +title: Ranges +page_title: Ranges +description: Linear Gauge for Blazor - Ranges. +slug: linear-gauge-ranges +tags: telerik,blazor,linear,gauge,ranges +published: True +position: 10 +--- + +## Linear Gauge Ranges + +You can highlight specific value ranges by providing one or more instances of the `` to the `` collection, child tag of the ``. You can customize them by using the parameters exposed on the ``: + +* [From and To](#from-and-to) + +* [Color](#color) + +* [Opacity](#opacity) + +## From and To + +* The `From` (`double?`) parameter controls the lowest point in the range. + +* The `To` (`double?`) parameter controls the highest point in the range. + +>caption Use the From and To parameters to provide a range. The result from the code snippet below. + +![From and To parameters example](images/from-to-range.png) + +````CSHTML +@* Use the From and To parameters to provide a range on the scale. *@ + + + + + + + + + + + + + + + + + + + + + + + +```` + +## Color + +The `Color` (`string`) parameter controls the color of the range. It accepts **CSS**, **HEX** and **RGB** colors. + +If you do not define the `Color` parameter the range will not be visually rendered. + +>caption Use an RGB colors for the ranges in the linear gauge. The result from the code snippet below. + +![Color parameter screenshot](images/color-parameter-ranges.png) + +````CSHTML +@* Change the color of the ranges *@ + + + + + + + + + + + + + + + + + + + + + + + + + +```` + +## Opacity + +The `Opacity` (`double`) parameter controls the of the range. The value passed to it should be between **0** and **1**. + +>caption Change the opacity of a range. The result from the code snippet below + +![Mirror the linear gauge](images/opacity-parameter-ranges.png) + +````CSHTML +@* Make a range more opaque *@ + + + + + + + + + + + + + + + + + + + + + + + + + +```` + +## See Also + +* [Linear Gauge: Overview]({%slug linear-gauge-overview%}) +* [Linear Gauge: Overview]({%slug linear-gauge-scale%}) +* [Linear Gauge: Pointers]({%slug linear-gauge-pointers%}) diff --git a/components/gauge-linear/scale.md b/components/gauge-linear/scale.md new file mode 100644 index 0000000000..1bc1d8dff8 --- /dev/null +++ b/components/gauge-linear/scale.md @@ -0,0 +1,196 @@ +--- +title: Scale +page_title: Scale +description: Linear Gauge for Blazor - Scale. +slug: linear-gauge-scale +tags: telerik,blazor,linear,gauge,scale +published: True +position: 5 +--- + +## Linear Gauge Scale + +The scale of the linear gauge renders the values, pointers and labels. You can customize it by adding an instance of the `` to the `` collection, child tag of the ``. The `` exposes the following parameters: + +* [Min and Max](#min-and-max) + +* [MinorUnit and MajorUnit](#minorunit-and-majorunit) + +* [Mirror](#mirror) + +* [Reverse](#reverse) + +* [Vertical](#vertical) + +* [Additional Customization](#additional-customization) + + * [Example: Remove the MinorUnit ticks](#example-remove-the-minorunit-ticks) + + +## Min and Max + +* The `Max` (`double`) parameter controls the maximum value that the component can reach. + +* The `Min` (`double`) parameter controls the lowest value of the component. + +>caption Change the lowest and the highest values for the scale. The result from the code snippet below. + +![Min and max parameters example](images/min-and-max-linear-gauge.png) + +````CSHTML +@* Use the Min and Max parameters to change the lowest and highest values for the scale *@ + + + + + + + + + + + + + + + + + + + +```` + +## MinorUnit and MajorUnit + +* The `MajorUnit` (`double`) parameter controls the interval between the major unit divisions of the component. The values provided to the `LinearGaugePointer` will render as a `MajorUnit` tick. The [labels]({%slug linear-gauge-labels%}) will be rendered next to the `MajorUnit` ticks. + +* The `MinorUnit` (`double`) parameter controls the interval between the minor unit divisions of the component. + +>caption Change the rendering frequency of the minor and major unit divisions. The result from the code snippet below. + +![Minor and major units parameters](images/minor-and-major-units-linear-gauge.png) + +````CSHTML +@* Update the rendering of the major and minor ticks *@ + + + + + + + + + + + + + +```` + +## Mirror + +If you set the `Mirror` (`bool`) parameter to `true` the scale will render the labels and the unit divisions to the right of the scale. By default the labels and unit divisions are rendered to the left side of the scale for a verical gauge and to the botton if the gauge is [horizontal](#reverse). + +>caption Render the labels and the ticks of the scale to the right. The result from the code snippet below + +![Mirror the linear gauge](images/mirror-linear-gauge.png) + +````CSHTML +@* Set the Mirror parameter to true *@ + + + + + + + + + + + + +```` + +## Reverse + +If you set the `Reverse` (`bool`) parameter to `true` the values of the scale will increase from top to bottom. By default they will raise from the bottom to the top. + +>caption Reverse the scale of the component. The result from the code snippet below. + +![reverse parameter example](images/reverse-linear-gauge.png) + +````CSHTML +@* Set the Reverse parameter to true *@ + + + + + + + + + + + + +```` + +## Vertical + +The `Vertical` (`bool`) parameter controls the orientation of the linear gauge. By default its value is `true`, but you can set to `false` so that the component renders horizontally. + +>caption Change the orientation of the Linear Gauge. The result from the code snippet below. + +![horizontal component](images/horizontal-linear-gauge.png) + +````CSHTML +@* Use the Vertical parameter to change the orientation of the scale *@ + + + + + + + + + + + + +```` + +## Additional Customization + +@[template](/_contentTemplates/gauges/additional-customization.md#linear-gauge-additional-customization) + +### Example: Remove the MinorUnit ticks + +You can remove the MinorUnit ticks from the rendering of the scale by using the `` nested tag and its `Visible` parameter. + +>caption Remove the MinorUnit ticks. The result from the code snippet below. + +![Remove the MinorUnit ticks](images/remove-minorunit-ticks-linear-gauge.png) + +````CSHMTL +@* Remove the MinorUnit ticks. *@ + + + + + + + + + + + + + + + +```` + +## See Also + +* [Linear Gauge: Overview]({%slug linear-gauge-overview%}) +* [Linear Gauge: Pointers]({%slug linear-gauge-pointers%}) diff --git a/components/gauge-radial/overview.md b/components/gauge-radial/overview.md new file mode 100644 index 0000000000..73fdf3ae66 --- /dev/null +++ b/components/gauge-radial/overview.md @@ -0,0 +1,147 @@ +--- +title: Overview +page_title: Chart Overview +description: Overview of the Chart for Blazor. +slug: radial-gauge-overview +tags: telerik,blazor,chart,overview +published: True +position: 0 +--- + +# Chart Overview + +The Blazor Chart component allows you to visualize data to your users in a meaningful way so they can draw conclusions. You can use a variety of chart types and control all aspects of the chart's appearance - from colors and fonts, to paddings, margins and templates. + +#### To use a Telerik chart for Blazor, add the `TelerikChart` tag. + +>caption Basic chart with series and category axis [data binding](data-bind), and a few commonly used appearance settings + +````CSHTML +Basic chart and common settings/elements + + + + + + + + + + + + + + + + + + + + + + + + +@code { + public class MyDataModel + { + public int SecondSeriesValue { get; set; } + public string ExtraData { get; set; } + + } + + public 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" }, + }; + + public List simpleData = new List() { 10, 2, 7, 5 }; + + public string[] xAxisItems = new string[] { "Q1", "Q2", "Q3", "Q4" }; +} +```` + +>caption The result from the code snippet above + +![](images/overview-chart.png) + + + +@[template](/_contentTemplates/chart/link-to-basics.md#configurable-nested-chart-settings) + +>caption Component namespace and reference + +````CSHTML +@using Telerik.Blazor.Components + + + + +@code { + Telerik.Blazor.Components.TelerikChart myChartRef; +} +```` + +## Chart Size + +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 renderes. 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. + + +>caption Change the 100% chart size dynamically to have a responsive chart + +````CSHTML +You can make a responsive chart + +Resize the container and redraw the chart + +
+ + + + + + + + + + + + + + +
+ +@code { + string ContainerWidth { get; set; } = "400px"; + string ContainerHeight { get; set; } = "300px"; + Telerik.Blazor.Components.TelerikChart theChart { get; set; } + + async Task ResizeChart() + { + //resize the container + ContainerHeight = "500px"; + ContainerWidth = "800px"; + + //give time to the framework and browser to resize the actual DOM so the chart can use the expected size + await Task.Delay(20); + + //redraw the chart + theChart.Refresh(); + } + + public List someData = new List() { 10, 2, 7, 5 }; + + public string[] xAxisItems = new string[] { "Q1", "Q2", "Q3", "Q4" }; +} +```` + +## See Also + + * [Data Binding]({%slug components/chart/databind%}) + * [Live Demos: Chart](https://demos.telerik.com/blazor-ui/chart/index) + * [API Reference](https://docs.telerik.com/blazor-ui/api/Telerik.Blazor.Components.TelerikChart)