diff --git a/_contentTemplates/gauges/additional-customization.md b/_contentTemplates/gauges/additional-customization.md index 36af7caeaf..cbe0fadd14 100644 --- a/_contentTemplates/gauges/additional-customization.md +++ b/_contentTemplates/gauges/additional-customization.md @@ -6,5 +6,24 @@ To further customize the elements of the linear gauge you can use nested tags. W * Pointers #end +#radial-gauge-additional-customization +To further customize the elements of the Radial Gauge you can use nested tags. When configuring nested properties and child elements in your Radial 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 + +#arc-gauge-additional-customization +To further customize the elements of the Arc Gauge you can use nested tags. When configuring nested properties and child elements in your Arc 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 +#end +#circular-gauge-additional-customization +To further customize the elements of the Circular Gauge you can use nested tags. When configuring nested properties and child elements in your Circular 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 +#end \ No newline at end of file diff --git a/components/gauge-arc/images/add-minorunit-ticks-arc-gauge.png b/components/gauge-arc/images/add-minorunit-ticks-arc-gauge.png new file mode 100644 index 0000000000..b7ddccc064 Binary files /dev/null and b/components/gauge-arc/images/add-minorunit-ticks-arc-gauge.png differ diff --git a/components/gauge-arc/images/basic-arc-gauge.png b/components/gauge-arc/images/basic-arc-gauge.png new file mode 100644 index 0000000000..4c2ff93e12 Binary files /dev/null and b/components/gauge-arc/images/basic-arc-gauge.png differ diff --git a/components/gauge-arc/images/center-template-arc.png b/components/gauge-arc/images/center-template-arc.png new file mode 100644 index 0000000000..a6b80ec0d1 Binary files /dev/null and b/components/gauge-arc/images/center-template-arc.png differ diff --git a/components/gauge-arc/images/color-parameter-arc-pointer.png b/components/gauge-arc/images/color-parameter-arc-pointer.png new file mode 100644 index 0000000000..53b3916964 Binary files /dev/null and b/components/gauge-arc/images/color-parameter-arc-pointer.png differ diff --git a/components/gauge-arc/images/color-parameter-labels.png b/components/gauge-arc/images/color-parameter-labels.png new file mode 100644 index 0000000000..38673994d3 Binary files /dev/null and b/components/gauge-arc/images/color-parameter-labels.png differ diff --git a/components/gauge-arc/images/format-parameter-labels.png b/components/gauge-arc/images/format-parameter-labels.png new file mode 100644 index 0000000000..e893724ace Binary files /dev/null and b/components/gauge-arc/images/format-parameter-labels.png differ diff --git a/components/gauge-arc/images/labels-custom-borders.png b/components/gauge-arc/images/labels-custom-borders.png new file mode 100644 index 0000000000..37ced8c349 Binary files /dev/null and b/components/gauge-arc/images/labels-custom-borders.png differ diff --git a/components/gauge-arc/images/linecap-parameter.png b/components/gauge-arc/images/linecap-parameter.png new file mode 100644 index 0000000000..239ff4a1b7 Binary files /dev/null and b/components/gauge-arc/images/linecap-parameter.png differ diff --git a/components/gauge-arc/images/min-and-max-arc-gauge.png b/components/gauge-arc/images/min-and-max-arc-gauge.png new file mode 100644 index 0000000000..73d71acf09 Binary files /dev/null and b/components/gauge-arc/images/min-and-max-arc-gauge.png differ diff --git a/components/gauge-arc/images/minor-and-major-units-arc-gauge.png b/components/gauge-arc/images/minor-and-major-units-arc-gauge.png new file mode 100644 index 0000000000..0cba64e3db Binary files /dev/null and b/components/gauge-arc/images/minor-and-major-units-arc-gauge.png differ diff --git a/components/gauge-arc/images/placeholdercolor-parameter-arc.png b/components/gauge-arc/images/placeholdercolor-parameter-arc.png new file mode 100644 index 0000000000..a0c0b0588d Binary files /dev/null and b/components/gauge-arc/images/placeholdercolor-parameter-arc.png differ diff --git a/components/gauge-arc/images/pointer-size-arc.png b/components/gauge-arc/images/pointer-size-arc.png new file mode 100644 index 0000000000..ee82b91efd Binary files /dev/null and b/components/gauge-arc/images/pointer-size-arc.png differ diff --git a/components/gauge-arc/images/rangedistance-arc-gauge.png b/components/gauge-arc/images/rangedistance-arc-gauge.png new file mode 100644 index 0000000000..116834b0b8 Binary files /dev/null and b/components/gauge-arc/images/rangedistance-arc-gauge.png differ diff --git a/components/gauge-arc/images/reverse-arc-gauge.png b/components/gauge-arc/images/reverse-arc-gauge.png new file mode 100644 index 0000000000..93bc0f8318 Binary files /dev/null and b/components/gauge-arc/images/reverse-arc-gauge.png differ diff --git a/components/gauge-arc/images/start-end-angle-arc-gauge.png b/components/gauge-arc/images/start-end-angle-arc-gauge.png new file mode 100644 index 0000000000..20fa303212 Binary files /dev/null and b/components/gauge-arc/images/start-end-angle-arc-gauge.png differ diff --git a/components/gauge-arc/images/visible-parameter-labels.png b/components/gauge-arc/images/visible-parameter-labels.png new file mode 100644 index 0000000000..1c71a684b4 Binary files /dev/null and b/components/gauge-arc/images/visible-parameter-labels.png differ diff --git a/components/gauge-arc/labels.md b/components/gauge-arc/labels.md new file mode 100644 index 0000000000..dca1f84474 --- /dev/null +++ b/components/gauge-arc/labels.md @@ -0,0 +1,185 @@ +--- +title: Labels +page_title: Labels +description: Arc Gauge for Blazor - Labels. +slug: arc-gauge-labels +tags: telerik,blazor,arc,gauge,labels +published: True +position: 20 +--- + +## Arc Gauge Labels + +You can customize the appearance of the labels rendered on the [scale]({%slug arc-gauge-scale%}) of the Arc Gauge by using the ``, child tag of the ``, and the parameters it exposes: + +* [Format](#format) + +* [Center Template](#center-template) + +* [Color](#color) + +* [Visible](#visible) + +* [Position](#position) + +* [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:P0} format string to format the values of the labels as percentage. *@ + + + + + + + + + + + + + + + + +```` + +## Center Template + +The center template allows you to take control of the rendering of the central section of the Arc Gauge. To use it, add the `` a child of the `` It provides a `context` object (`GaugeCenterLabelTemplateContext`) which exposes a list with the pointer in the component. + +>caption Use the Center Template to display the Value of the pointer. The result from the code snippet below. + +![center template](images/center-template-arc.png) + +````CSHTML +@* Print the value of the pointer in the center of the component *@ + + + + + + + + + + + + + + + + + + + +```` + +## 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 red *@ + + + + + + + + + + + + + + + + + +```` + +## Visible + +The `Visible` (`bool`) parameter controls wether the labels will be rendered. By default the labels would not be rendered. + +>caption Show 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 true to show the labels *@ + + + + + + + + + + + + + + + + +```` + +## Additional Customization + +@[template](/_contentTemplates/gauges/additional-customization.md#arc-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 + +* [Arc Gauge: Overview]({%slug arc-gauge-overview%}) +* [Arc Gauge: Scale]({%slug arc-gauge-scale%}) +* [Arc Gauge: Pointers]({%slug arc-gauge-pointers%}) diff --git a/components/gauge-arc/overview.md b/components/gauge-arc/overview.md index 0a1e96873a..7f956ec19a 100644 --- a/components/gauge-arc/overview.md +++ b/components/gauge-arc/overview.md @@ -3,145 +3,106 @@ title: Overview page_title: Arc Gauge Overview description: Overview of the Arc Gauge for Blazor. slug: arc-gauge-overview -tags: telerik,blazor,chart,overview +tags: telerik,blazor,arc,gauge,overview published: True position: 0 --- -# Chart Overview +# Arc Gauge 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. +The Telerik Arc Gauge for Blazor represents [numerical values]({%slug arc-gauge-pointers%}) on an arc [scale]({%slug arc-gauge-scale%}). -#### To use a Telerik chart for Blazor, add the `TelerikChart` tag. +#### This article is separated in the following sections: ->caption Basic chart with series and category axis [data binding](data-bind), and a few commonly used appearance settings +* [Basics](#basics) -````CSHTML -Basic chart and common settings/elements +* [Features](#features) - - - - - - - - +* [Methods](#methods) - - - +## Basics - - - +>caption To add a Telerik Arc Gauge for Blazor to your application: - +1. Add the `` tag. - - - +1. Add an instance of the `` to the `` collection. -@code { - public class MyDataModel - { - public int SecondSeriesValue { get; set; } - public string ExtraData { get; set; } +1. Provide a `Value` for the ``. - } +>caption Basic Telerik Arc Gauge for Blazor. - 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" }, - }; +![Basic Arc Gauge](images/basic-arc-gauge.png) - public List simpleData = new List() { 10, 2, 7, 5 }; +````CSHTML +@* Setup a basic arc gauge *@ - public string[] xAxisItems = new string[] { "Q1", "Q2", "Q3", "Q4" }; -} + + + + + ```` ->caption The result from the code snippet above +## Features -![](images/overview-chart.png) +The Telerik Arc Gauge for Blazor exposes the following features: +#### Arc 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. -@[template](/_contentTemplates/chart/link-to-basics.md#configurable-nested-chart-settings) +* `Height` - `string` - controls the height of the component. You can read more on how they work in the [Dimensions]({%slug common-features/dimensions%}) article. ->caption Component namespace and reference +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. -````CSHTML -@using Telerik.Blazor.Components +#### 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. -@code { - Telerik.Blazor.Components.TelerikChart myChartRef; -} -```` +* Scale - The scale of the arc gauge renders the values of the [pointers]({%slug arc-gauge-pointers%}) and [labels]({%slug arc-gauge-labels%}). See the [Scale]({%slug arc-gauge-scale%}) article for more information on how to customize the scale of the component. -## Chart Size +* Labels - The labels are rendered on the scale of the component to give information to the users. See the [Labels]({%slug arc-gauge-labels%}) article for more information on how to customize the labels on the scale of the component. -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. +* Pointers - The pointers indicate the values on the scale of the component. See the [Pointers]({%slug arc-gauge-pointers%}) article for more information on how to customize the pointers of the component. -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. +## Methods +The Arc Gauge reference exposes the `Refresh` method which allows you to programatically re-render the component. ->caption Change the 100% chart size dynamically to have a responsive chart +>caption Get a component reference and use the Refresh method ````CSHTML -You can make a responsive chart +@* Change the Width of the component *@ -Resize the container and redraw the chart +Change the Height of the component -
+Change the Width of the component - + + - - - - - - - - + - - -
+ + @code { - string ContainerWidth { get; set; } = "400px"; - string ContainerHeight { get; set; } = "300px"; - Telerik.Blazor.Components.TelerikChart theChart { get; set; } + Telerik.Blazor.Components.TelerikArcGauge ArcGaugeRef { get; set; } - async Task ResizeChart() - { - //resize the container - ContainerHeight = "500px"; - ContainerWidth = "800px"; + public string Width { get; set; } = "300px"; - //give time to the framework and browser to resize the actual DOM so the chart can use the expected size - await Task.Delay(20); + private void ChangeTheHeight() + { + Width = "450px"; - //redraw the chart - theChart.Refresh(); + ArcGaugeRef.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) +* [Arc Gauge: Live Demo](https://demos.telerik.com/blazor-ui/arc-gauge) +* [Arc Gauge: Scale]({%slug arc-gauge-scale%}) +* [Arc Gauge: Pointers]({%slug arc-gauge-pointers%}) \ No newline at end of file diff --git a/components/gauge-arc/pointers.md b/components/gauge-arc/pointers.md new file mode 100644 index 0000000000..7d871a9eb3 --- /dev/null +++ b/components/gauge-arc/pointers.md @@ -0,0 +1,136 @@ +--- +title: Pointers +page_title: Arc Gauge - Pointers +description: Arc Gauge for Blazor - Pointers. +slug: arc-gauge-pointers +tags: telerik,blazor,gauge,arc,overview +published: True +position: 10 +--- + +# Arc Gauge Pointers + +The pointers are the values that will be marked on the scale. You can customize them through the parameters they expose: + +* [LineCap](#linecap) + +* [PlaceholderColor](#placeholdercolor) + +* [Color](#color) + +* [Size](#size) + +## LineCap + +The `LineCap` parameter controls the shape of the scale ending and takes a member of the `ArcGaugePointerLineCap` enum: + +* `Round` - by default the shape of the scale ending would be round + +* `Butt` + +>caption Change the shape of the scale. The result from the code snippet below. + +![Round shape](images/linecap-parameter.png) + +````CSHTML +@* Use a flat shape for the end of the scale *@ + + + + + + + + + + + + + + + +```` + +## PlaceholderColor + +The `PlaceholderColor` (`string`) parameter controls the background color of the ponter. It accepts **CSS**, **HEX** and **RGB** colors. + +>caption Change the background color of the pointer. The result from the code snippet below: + +![placeholder color](images/placeholdercolor-parameter-arc.png) + +````CSHTML +@* Set the PlaceholderColor to light blue *@ + + + + + + + + + + + + + + + +```` + +## Color + +The `Color` (`string`) parameter controls the color of the pointer. It accepts **CSS**, **HEX** and **RGB** colors. + +>caption Change the color of the pointer. The result from the code snippet below + +![color parameter example](images/color-parameter-arc-pointer.png) + +````CSHTML +@* Change the color of the pointer to green *@ + + + + + + + + + + + + + + + +```` + +## Size + +The `Size` (`double`) parameter controls the size of the pointer. + +![larger pointer size](images/pointer-size-arc.png) + +````CSHTML +@* Change the sizes of the pointer *@ + + + + + + + + + + + + + + + +```` + +## See Also + +* [Arc Gauge: Overview]({%slug arc-gauge-overview%}) +* [Arc Gauge: Scale]({%slug arc-gauge-scale%}) diff --git a/components/gauge-arc/scale.md b/components/gauge-arc/scale.md new file mode 100644 index 0000000000..39dbe5f944 --- /dev/null +++ b/components/gauge-arc/scale.md @@ -0,0 +1,179 @@ +--- +title: Scale +page_title: Scale +description: Arc Gauge for Blazor - Scale. +slug: arc-gauge-scale +tags: telerik,blazor,arc,gauge,scale +published: True +position: 5 +--- + +## Arc Gauge Scale + +The scale of the arc 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) + +* [StartAngle and EndAngle](#startangle-and-endangle) + +* [Reverse](#reverse) + +* [Additional Customization](#additional-customization) + + * [Example: Enable the MinorUnit ticks](#example-enable-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-arc-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 `ArcGaugePointer` will render as a `MajorUnit` tick. The [labels]({%slug arc-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 major unit divisions. The result from the code snippet below. + +![Minor and major units parameters](images/minor-and-major-units-arc-gauge.png) + +````CSHTML +@* Update the rendering of the major ticks *@ + + + + + + + + + + + + + + + +```` + +## StartAngle and EndAngle + +* The `StartAngle` (`double`) parameter controls the starting angle of the scale. + +* The `EndAngle` (`double`) parameter controls the ending angle of the component. + +By default the `StartAngle` is set to `0` and the `EndAngle` to `180`. These values represent the angles on the coordinate system. + +>caption Change the StartAngle and the EndAngle of the scale. The result from the code snippet below. + +![Min and max parameters example](images/start-end-angle-arc-gauge.png) + +````CSHTML +@* Use the StartAngle and EndAngle parameters to curve the scale differently. *@ + + + + + + + + + + + + + + + +```` + +## Reverse + +If you set the `Reverse` (`bool`) parameter to `true` the values of the scale will increase from the right side to the left side of the scale. By default they will raise from the left to right. + +>caption Reverse the scale of the component. The result from the code snippet below. + +![reverse parameter example](images/reverse-arc-gauge.png) + +````CSHTML +@* Set the Reverse parameter to true *@ + + + + + + + + + + + + + + + +```` + +## Additional Customization + +@[template](/_contentTemplates/gauges/additional-customization.md#arc-gauge-additional-customizationn) + +### Example: Enable the MinorUnit ticks + +You can enable the MinorUnit ticks on the scale by using the `` nested tag and its `Visible` parameter. + +>caption Add the MinorUnit ticks to the scale. The result from the code snippet below. + +![Add the MinorUnit ticks](images/add-minorunit-ticks-arc-gauge.png) + +````CSHMTL +@* Add the MinorUnit ticks. *@ + + + + + + + + + + + + + + + + +```` + +## See Also + +* [Arc Gauge: Overview]({%slug arc-gauge-overview%}) +* [Arc Gauge: Pointers]({%slug arc-gauge-pointers%}) diff --git a/components/gauge-circular/images/basic-circular-gauge.png b/components/gauge-circular/images/basic-circular-gauge.png new file mode 100644 index 0000000000..aac2ba68e0 Binary files /dev/null and b/components/gauge-circular/images/basic-circular-gauge.png differ diff --git a/components/gauge-circular/images/center-template-circular.png b/components/gauge-circular/images/center-template-circular.png new file mode 100644 index 0000000000..db2f797df6 Binary files /dev/null and b/components/gauge-circular/images/center-template-circular.png differ diff --git a/components/gauge-circular/images/color-parameter-circular-pointer.png b/components/gauge-circular/images/color-parameter-circular-pointer.png new file mode 100644 index 0000000000..8e94b675ea Binary files /dev/null and b/components/gauge-circular/images/color-parameter-circular-pointer.png differ diff --git a/components/gauge-circular/images/color-parameter-labels.png b/components/gauge-circular/images/color-parameter-labels.png new file mode 100644 index 0000000000..ae9fcc5c2e Binary files /dev/null and b/components/gauge-circular/images/color-parameter-labels.png differ diff --git a/components/gauge-circular/images/format-parameter-labels.png b/components/gauge-circular/images/format-parameter-labels.png new file mode 100644 index 0000000000..dd305ce8a7 Binary files /dev/null and b/components/gauge-circular/images/format-parameter-labels.png differ diff --git a/components/gauge-circular/images/labels-customize.png b/components/gauge-circular/images/labels-customize.png new file mode 100644 index 0000000000..8479fd9780 Binary files /dev/null and b/components/gauge-circular/images/labels-customize.png differ diff --git a/components/gauge-circular/images/linecap-parameter.png b/components/gauge-circular/images/linecap-parameter.png new file mode 100644 index 0000000000..6d796d3807 Binary files /dev/null and b/components/gauge-circular/images/linecap-parameter.png differ diff --git a/components/gauge-circular/images/min-and-max-circular-gauge.png b/components/gauge-circular/images/min-and-max-circular-gauge.png new file mode 100644 index 0000000000..71beb09c75 Binary files /dev/null and b/components/gauge-circular/images/min-and-max-circular-gauge.png differ diff --git a/components/gauge-circular/images/minor-and-major-ticks-circular-gauge.png b/components/gauge-circular/images/minor-and-major-ticks-circular-gauge.png new file mode 100644 index 0000000000..678ba48a26 Binary files /dev/null and b/components/gauge-circular/images/minor-and-major-ticks-circular-gauge.png differ diff --git a/components/gauge-circular/images/minor-and-major-units-circular-gauge.png b/components/gauge-circular/images/minor-and-major-units-circular-gauge.png new file mode 100644 index 0000000000..b2bd2ff3e4 Binary files /dev/null and b/components/gauge-circular/images/minor-and-major-units-circular-gauge.png differ diff --git a/components/gauge-circular/images/placeholdercolor-parameter-circular.png b/components/gauge-circular/images/placeholdercolor-parameter-circular.png new file mode 100644 index 0000000000..31869533e7 Binary files /dev/null and b/components/gauge-circular/images/placeholdercolor-parameter-circular.png differ diff --git a/components/gauge-circular/images/pointer-size-circular.png b/components/gauge-circular/images/pointer-size-circular.png new file mode 100644 index 0000000000..2dc603a50c Binary files /dev/null and b/components/gauge-circular/images/pointer-size-circular.png differ diff --git a/components/gauge-circular/images/pointer-size-circularpointer-size-circular.png b/components/gauge-circular/images/pointer-size-circularpointer-size-circular.png new file mode 100644 index 0000000000..9e55290f8e Binary files /dev/null and b/components/gauge-circular/images/pointer-size-circularpointer-size-circular.png differ diff --git a/components/gauge-circular/images/reverse-circular-gauge.png b/components/gauge-circular/images/reverse-circular-gauge.png new file mode 100644 index 0000000000..27adadff74 Binary files /dev/null and b/components/gauge-circular/images/reverse-circular-gauge.png differ diff --git a/components/gauge-circular/images/start-angle-circular-gauge.png b/components/gauge-circular/images/start-angle-circular-gauge.png new file mode 100644 index 0000000000..cd1f3cc65e Binary files /dev/null and b/components/gauge-circular/images/start-angle-circular-gauge.png differ diff --git a/components/gauge-circular/images/visible-parameter-labels.png b/components/gauge-circular/images/visible-parameter-labels.png new file mode 100644 index 0000000000..73e4cbfffc Binary files /dev/null and b/components/gauge-circular/images/visible-parameter-labels.png differ diff --git a/components/gauge-circular/labels.md b/components/gauge-circular/labels.md new file mode 100644 index 0000000000..8a7ed28f27 --- /dev/null +++ b/components/gauge-circular/labels.md @@ -0,0 +1,191 @@ +--- +title: Labels +page_title: Labels +description: Circular Gauge for Blazor - Labels. +slug: circular-gauge-labels +tags: telerik,blazor,circular,gauge,labels +published: True +position: 15 +--- + +# Circular Gauge Labels + +You can customize the appearance of the labels rendered on the [scale]({%slug circular-gauge-scale%}) of the Circular Gauge by using the ``, child tag of the ``, and the parameters it exposes: + +* [Format](#format) + +* [Center Template](#center-template) + +* [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. *@ + + + + + + + + + + + + + + + + + + +```` + +## Center Template + +The center template allows you to take control of the rendering of the central section of the Circular Gauge. To use it, add the `` a child of the `` It provides a `context` object (`GaugeCenterLabelTemplateContext`) which exposes a list with the pointers in the component and their values. + +>caption Use the Center Template to display the Value of the pointer. The result from the code snippet below. + +![center template](images/center-template-circular.png) + +````CSHTML +@* Print the value of the pointer in the center of the component *@ + + + + + + + + + + + + + + + + + + + + + +```` + +## 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. Its default value is `false`. If you want to display the labels include the `` tag in the `` and set its `Visible` parameter to `true`. + +>caption Show 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 true to show the labels *@ + + + + + + + + + + + + + + + + + +```` + +## Additional Customization + +@[template](/_contentTemplates/gauges/additional-customization.md#circular-gauge-additional-customization) + +>caption Customize the background and the margin of the Labels. The result from the code snippet below. + +![Custom Labels](images/labels-customize.png) + +````CSHTML +@* Customize the position, border and padding of the labels. *@ + + + + + + + + + + + + + + + + + + + + +```` + +## See Also + +* [Circular Gauge: Live Demo](https://demos.telerik.com/blazor-ui/circular-gauge) +* [Circular Gauge: Overview]({%slug circular-gauge-overview%}) +* [Circular Gauge: Scale]({%slug circular-gauge-scale%}) +* [Circular Gauge: Pointers]({%slug circular-gauge-pointers%}) \ No newline at end of file diff --git a/components/gauge-circular/overview.md b/components/gauge-circular/overview.md index 3ef11919d3..092fe9c789 100644 --- a/components/gauge-circular/overview.md +++ b/components/gauge-circular/overview.md @@ -1,147 +1,124 @@ --- title: Overview -page_title: Chart Overview -description: Overview of the Chart for Blazor. +page_title: Circular Gauge Overview +description: Overview of the Circular Gauge for Blazor. slug: circular-gauge-overview -tags: telerik,blazor,chart,overview +tags: telerik,blazor,circular,gauge,overview published: True position: 0 --- -# Chart Overview +# Circular Gauge 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. +The Telerik Circular Gauge for Blazor represents [numerical values]({%slug circular-gauge-pointers%}) on a circular [scale]({%slug circular-gauge-scale%}). -#### To use a Telerik chart for Blazor, add the `TelerikChart` tag. +#### This article is separated in the following sections: ->caption Basic chart with series and category axis [data binding](data-bind), and a few commonly used appearance settings +* [Basics](#basics) -````CSHTML -Basic chart and common settings/elements +* [Features](#features) - - - - - - - - +* [Methods](#methods) - - - +## Basics - - - +>caption To add a Telerik Circular Gauge for Blazor to your application: - +1. Add the `` tag. - - - +1. Add one or more instance of the `` to the `` collection. -@code { - public class MyDataModel - { - public int SecondSeriesValue { get; set; } - public string ExtraData { get; set; } +1. Provide a `Value` for each ``. - } +1. (Optional) You can use the [Center Label Template]({%slug circular-gauge-labels%}#center-template) to display the value of the pointer in the center of the component. - 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" }, - }; +>caption Basic Telerik Circular Gauge for Blazor. - public List simpleData = new List() { 10, 2, 7, 5 }; +![Basic Circular Gauge](images/basic-circular-gauge.png) - public string[] xAxisItems = new string[] { "Q1", "Q2", "Q3", "Q4" }; -} -```` +````CSHTML +@* Setup a basic circular gauge with center label template *@ ->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 +## Features -````CSHTML -@using Telerik.Blazor.Components +The Telerik Circular Gauge for Blazor exposes the following features: - - +#### Circular Gauge Size -@code { - Telerik.Blazor.Components.TelerikChart myChartRef; -} -```` +* `Width` - `string` - controls the width of the component. You can read more on how they work in the [Dimensions]({%slug common-features/dimensions%}) article. -## Chart Size +* `Height` - `string` - controls the height of the component. You can read more on how they work in the [Dimensions]({%slug common-features/dimensions%}) article. -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 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. -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. +#### Other Features +* `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. ->caption Change the 100% chart size dynamically to have a responsive chart +* [Scale]({%slug circular-gauge-scale%}) - The scale of the circular gauge renders the values of the [pointers]({%slug circular-gauge-pointers%}) and [labels]({%slug circular-gauge-labels%}). -````CSHTML -You can make a responsive chart +* [Labels]({%slug circular-gauge-labels%}) - The labels are rendered on the scale of the component to give information to the users. + +* [Pointers]({%slug circular-gauge-pointers%}) - The pointers indicate the values on the scale of the component. -Resize the container and redraw the chart +## Methods -
+The Circular 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 { - string ContainerWidth { get; set; } = "400px"; - string ContainerHeight { get; set; } = "300px"; - Telerik.Blazor.Components.TelerikChart theChart { get; set; } + Telerik.Blazor.Components.TelerikCircularGauge CircularGaugeRef { get; set; } + + public string Height { get; set; } = "300px"; - async Task ResizeChart() + async Task ChangeTheHeight() { - //resize the container - ContainerHeight = "500px"; - ContainerWidth = "800px"; + Height = "450px"; - //give time to the framework and browser to resize the actual DOM so the chart can use the expected size - await Task.Delay(20); + //give time to the framework and browser to resize the actual DOM so the gauge can use the expected size + await Task.Delay(30); - //redraw the chart - theChart.Refresh(); + CircularGaugeRef.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) +* [Circular Gauge: Live Demo](https://demos.telerik.com/blazor-ui/circular-gauge) +* [Circular Gauge: Scale]({%slug circular-gauge-scale%}) +* [Circular Gauge: Pointers]({%slug circular-gauge-pointers%}) +* [Circular Gauge: Labels]({%slug circular-gauge-labels%}) \ No newline at end of file diff --git a/components/gauge-circular/pointers.md b/components/gauge-circular/pointers.md new file mode 100644 index 0000000000..f3f34516ff --- /dev/null +++ b/components/gauge-circular/pointers.md @@ -0,0 +1,146 @@ +--- +title: Pointers +page_title: Circular Gauge - Pointers +description: Circular Gauge for Blazor - Pointers. +slug: circular-gauge-pointers +tags: telerik,blazor,circular,gauge,pointers +published: True +position: 10 +--- + +# Circular Gauge Pointers + +The pointers are the values that will be marked on the scale. You can customize them through the parameters they expose: + +* [LineCap](#linecap) + +* [PlaceholderColor](#placeholdercolor) + +* [Color](#color) + +* [Size](#size) + +## LineCap + +The `LineCap` parameter controls the shape of the scale ending and takes a member of the `CircularGaugePointerLineCap` enum: + +* `Round` - by default the shape of the scale ending would be round + +* `Butt` - flat scale ending shape + +>caption Change the shape of the scale. The result from the code snippet below. + +![Round shape](images/linecap-parameter.png) + +````CSHTML +@* Use a flat shape for the end of the scale *@ + + + + + + + + + + + + + + + + + +```` + +## PlaceholderColor + +The `PlaceholderColor` (`string`) parameter controls the background color of the ponter. It accepts **CSS**, **HEX** and **RGB** colors. + +>caption Change the background color of the pointer. The result from the code snippet below: + +![placeholder color](images/placeholdercolor-parameter-circular.png) + +````CSHTML +@* Set the PlaceholderColor to light blue *@ + + + + + + + + + + + + + + + + + +```` + +## Color + +The `Color` (`string`) parameter controls the color of the pointer. It accepts **CSS**, **HEX** and **RGB** colors. + +>caption Change the color of the pointer. The result from the code snippet below + +![color parameter example](images/color-parameter-circular-pointer.png) + +````CSHTML +@* Change the color of the pointer to purple *@ + + + + + + + + + + + + + + + + + +```` + +## Size + +The `Size` (`double`) parameter controls the size of the pointer. + +![larger pointer size](images/pointer-size-circular.png) + +````CSHTML +* Change the size of the pointer *@ + + + + + + + + + + + + + + + + + +```` + +## See Also + +* [Circular Gauge: Live Demo](https://demos.telerik.com/blazor-ui/circular-gauge) +* [Circular Gauge: Overview]({%slug circular-gauge-overview%}) +* [Circular Gauge: Scale]({%slug circular-gauge-scale%}) +* [Circular Gauge: Labels]({%slug circular-gauge-labels%}) diff --git a/components/gauge-circular/scale.md b/components/gauge-circular/scale.md new file mode 100644 index 0000000000..b022201f8a --- /dev/null +++ b/components/gauge-circular/scale.md @@ -0,0 +1,202 @@ +--- +title: Scale +page_title: Scale +description: Circular Gauge for Blazor - Scale. +slug: circular-gauge-scale +tags: telerik,blazor,circular,gauge,scale +published: True +position: 5 +--- + +# Circular Gauge Scale + +The scale of the Circular 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: + +* [MinorTicks and MajorTicks](#minorticks-and-majorticks) + +* [Min and Max](#min-and-max) + +* [MinorUnit and MajorUnit](#minorunit-and-majorunit) + +* [Start Angle](#start-angle) + +* [Reverse](#reverse) + + +## MinorTicks and MajorTicks + +* The `MinorTicks` (`object`) parameter configures the scale minor ticks. It exposes `Color`, `Size`, `Visible` and `Width` parameters to control the rendering of the minor ticks. + * The default value of the `Visible` parameter is false, so in order to display the MinorTicks on the scale include `` in the `` tag. + +* The `MajorTicks` (`object`) parameter configures the scale major ticks. It exposes `Color`, `Size`, `Visible` and `Width` parameters to control the rendering of the major ticks. + * The default value of the `Visible` parameter is false, so in order to display the MajorTicks on the scale include `` in the `` tag. + +>caption Change the rendering of the minor and major ticks. The result from the code snippet below. + +![Minor and major ticks parameters](images/minor-and-major-ticks-circular-gauge.png) + +````CSHTML +@* Render and customize the minor and major ticks. *@ + + + + + + + + + + + + + + + + + + + +```` + +## Min and Max + +* The `Max` (`double`) parameter controls the maximum value that the component can reach. + +* The `Min` (`double`) parameter controls the minimum value of the component. + +>caption Change the minimum and the maximum values for the scale. The result from the code snippet below. + +![Min and max parameters example](images/min-and-max-circular-gauge.png) + +````CSHTML +@* Use the Min and Max parameters to change the minimum and maximum values for the scale *@ + + + + + + + + + + + + + + + + + + + +```` + +## MinorUnit and MajorUnit + +* The `MajorUnit` (`double`) parameter controls the interval between the major unit divisions of the component. The [labels]({%slug circular-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 of the minor and major unit divisions. The result from the code snippet below. + +![Minor and major units parameters](images/minor-and-major-units-circular-gauge.png) + +````CSHTML +@* Update the rendering of the major and minor units. *@ + + + + + + + + + + + + + + + + + + + + +```` + +## Start Angle + +The `StartAngle` (`double`) parameter controls the start angle of the gauge. The gauge is rendered clockwise (0 degrees are the 180 degrees in the polar coordinate system). Defaults to 90 degrees. + +>caption Change the Start Angle of the Circular Gauge. The result from the code snippet below. + +![Start Angle parameter](images/start-angle-circular-gauge.png) + +````CSHTML +@* Use StartAngle parameter to change the start angle of the scale. *@ + + + + + + + + + + + + + + + + + + + +```` + +## Reverse + +If you set the `Reverse` (`bool`) parameter to `true` the scale direction will be reversed - values will increase anticlockwise. + +>caption Reverse the scale of the Circular Gauge. The result from the code snippet below. + +![Reverse parameter example](images/reverse-circular-gauge.png) + +````CSHTML +@* Reverse the scale. *@ + + + + + + + + + + + + + + + + + + + +```` + +## Additional Customization + +@[template](/_contentTemplates/gauges/additional-customization.md#circular-gauge-additional-customization) + + +## See Also + +* [Circular Gauge: Live Demo](https://demos.telerik.com/blazor-ui/circular-gauge) +* [Circular Gauge: Overview]({%slug circular-gauge-overview%}) +* [Circular Gauge: Pointers]({%slug circular-gauge-pointers%}) +* [Circular Gauge: Labels]({%slug circular-gauge-labels%}) diff --git a/components/gauge-radial/images/basic-radial-gauge.png b/components/gauge-radial/images/basic-radial-gauge.png new file mode 100644 index 0000000000..7dc6992c87 Binary files /dev/null and b/components/gauge-radial/images/basic-radial-gauge.png differ diff --git a/components/gauge-radial/images/color-parameter-labels.png b/components/gauge-radial/images/color-parameter-labels.png new file mode 100644 index 0000000000..ae97217e31 Binary files /dev/null and b/components/gauge-radial/images/color-parameter-labels.png differ diff --git a/components/gauge-radial/images/default-ranges-color.png b/components/gauge-radial/images/default-ranges-color.png new file mode 100644 index 0000000000..4d3479332c Binary files /dev/null and b/components/gauge-radial/images/default-ranges-color.png differ diff --git a/components/gauge-radial/images/format-parameter-labels.png b/components/gauge-radial/images/format-parameter-labels.png new file mode 100644 index 0000000000..7f9a6de2c9 Binary files /dev/null and b/components/gauge-radial/images/format-parameter-labels.png differ diff --git a/components/gauge-radial/images/from-to-range.png b/components/gauge-radial/images/from-to-range.png new file mode 100644 index 0000000000..573dc64e86 Binary files /dev/null and b/components/gauge-radial/images/from-to-range.png differ diff --git a/components/gauge-radial/images/labels-custom-background.png b/components/gauge-radial/images/labels-custom-background.png new file mode 100644 index 0000000000..af934a674f Binary files /dev/null and b/components/gauge-radial/images/labels-custom-background.png differ diff --git a/components/gauge-radial/images/min-and-max-radial-gauge.png b/components/gauge-radial/images/min-and-max-radial-gauge.png new file mode 100644 index 0000000000..ec6e994343 Binary files /dev/null and b/components/gauge-radial/images/min-and-max-radial-gauge.png differ diff --git a/components/gauge-radial/images/minor-and-major-units-radial-gauge.png b/components/gauge-radial/images/minor-and-major-units-radial-gauge.png new file mode 100644 index 0000000000..1a6fef102c Binary files /dev/null and b/components/gauge-radial/images/minor-and-major-units-radial-gauge.png differ diff --git a/components/gauge-radial/images/pointer-cap-color.png b/components/gauge-radial/images/pointer-cap-color.png new file mode 100644 index 0000000000..8a56033992 Binary files /dev/null and b/components/gauge-radial/images/pointer-cap-color.png differ diff --git a/components/gauge-radial/images/pointer-cap-size-and-color.png b/components/gauge-radial/images/pointer-cap-size-and-color.png new file mode 100644 index 0000000000..89548b18b2 Binary files /dev/null and b/components/gauge-radial/images/pointer-cap-size-and-color.png differ diff --git a/components/gauge-radial/images/pointer-cap-size.png b/components/gauge-radial/images/pointer-cap-size.png new file mode 100644 index 0000000000..2b0dc1bcbc Binary files /dev/null and b/components/gauge-radial/images/pointer-cap-size.png differ diff --git a/components/gauge-radial/images/pointer-color.png b/components/gauge-radial/images/pointer-color.png new file mode 100644 index 0000000000..97ab928cc3 Binary files /dev/null and b/components/gauge-radial/images/pointer-color.png differ diff --git a/components/gauge-radial/images/pointer-length.png b/components/gauge-radial/images/pointer-length.png new file mode 100644 index 0000000000..7ee69e173b Binary files /dev/null and b/components/gauge-radial/images/pointer-length.png differ diff --git a/components/gauge-radial/images/range-distance.png b/components/gauge-radial/images/range-distance.png new file mode 100644 index 0000000000..9402cd295d Binary files /dev/null and b/components/gauge-radial/images/range-distance.png differ diff --git a/components/gauge-radial/images/range-size.png b/components/gauge-radial/images/range-size.png new file mode 100644 index 0000000000..d619cc92d0 Binary files /dev/null and b/components/gauge-radial/images/range-size.png differ diff --git a/components/gauge-radial/images/ranges-color.png b/components/gauge-radial/images/ranges-color.png new file mode 100644 index 0000000000..30d4c41933 Binary files /dev/null and b/components/gauge-radial/images/ranges-color.png differ diff --git a/components/gauge-radial/images/ranges-opacity.png b/components/gauge-radial/images/ranges-opacity.png new file mode 100644 index 0000000000..85bfc11e77 Binary files /dev/null and b/components/gauge-radial/images/ranges-opacity.png differ diff --git a/components/gauge-radial/images/remove-minorunit-ticks-radial-gauge.png b/components/gauge-radial/images/remove-minorunit-ticks-radial-gauge.png new file mode 100644 index 0000000000..edc643ec02 Binary files /dev/null and b/components/gauge-radial/images/remove-minorunit-ticks-radial-gauge.png differ diff --git a/components/gauge-radial/images/reverse-radial-gauge.png b/components/gauge-radial/images/reverse-radial-gauge.png new file mode 100644 index 0000000000..85fce826a5 Binary files /dev/null and b/components/gauge-radial/images/reverse-radial-gauge.png differ diff --git a/components/gauge-radial/images/start-end-angles.png b/components/gauge-radial/images/start-end-angles.png new file mode 100644 index 0000000000..d0e3341a6e Binary files /dev/null and b/components/gauge-radial/images/start-end-angles.png differ diff --git a/components/gauge-radial/images/visible-parameter-labels.png b/components/gauge-radial/images/visible-parameter-labels.png new file mode 100644 index 0000000000..75a3d1aebf Binary files /dev/null and b/components/gauge-radial/images/visible-parameter-labels.png differ diff --git a/components/gauge-radial/labels.md b/components/gauge-radial/labels.md new file mode 100644 index 0000000000..1c3f6bf608 --- /dev/null +++ b/components/gauge-radial/labels.md @@ -0,0 +1,145 @@ +--- +title: Labels +page_title: Labels +description: Radial Gauge for Blazor - Labels. +slug: radial-gauge-labels +tags: telerik,blazor,radial,gauge,labels +published: True +position: 20 +--- + +# Radial Gauge Labels + +You can customize the appearance of the labels rendered on the [scale]({%slug radial-gauge-scale%}) of the Radial 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#radial-gauge-additional-customization) + +>caption Customize the background and the margin of the Labels. The result from the code snippet below. + +![Custom Label background](images/labels-custom-background.png) + +````CSHTML +@* Provide background color and margin to the labels *@ + + + + + + + + + + + + + + + + + + +```` + +## See Also + +* [Radial Gauge: Live Demo](https://demos.telerik.com/blazor-ui/radial-gauge) +* [Radial Gauge: Overview]({%slug radial-gauge-overview%}) +* [Radial Gauge: Scale]({%slug radial-gauge-scale%}) +* [Radial Gauge: Pointers]({%slug radial-gauge-pointers%}) +* [Radial Gauge: Ranges]({%slug radial-gauge-ranges%}) \ No newline at end of file diff --git a/components/gauge-radial/overview.md b/components/gauge-radial/overview.md index 73fdf3ae66..b734a8e0f3 100644 --- a/components/gauge-radial/overview.md +++ b/components/gauge-radial/overview.md @@ -1,147 +1,110 @@ --- title: Overview -page_title: Chart Overview -description: Overview of the Chart for Blazor. +page_title: Radial Gauge Overview +description: Overview of the Radial Gauge for Blazor. slug: radial-gauge-overview -tags: telerik,blazor,chart,overview +tags: telerik,blazor,radial,gauge,overview published: True position: 0 --- -# Chart Overview +# Radial Gauge 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. +The Telerik Radial Gauge for Blazor represents numerical values on a [scale]({%slug radial-gauge-scale%}) of ranges in a radial format. -#### To use a Telerik chart for Blazor, add the `TelerikChart` tag. +This article is separated in the following sections: ->caption Basic chart with series and category axis [data binding](data-bind), and a few commonly used appearance settings +* [Basics](#basics) -````CSHTML -Basic chart and common settings/elements - - - - - - - - - +* [Features](#features) - - - +* [Methods](#methods) - - - +## Basics - +>caption To add a Telerik Radial Gauge for Blazor to your application: - - - +1. Add the `` tag. -@code { - public class MyDataModel - { - public int SecondSeriesValue { get; set; } - public string ExtraData { get; set; } +1. Add one or more instances of the `` to the `` collection. - } +1. Provide a `Value` for each ``. - 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" }, - }; +>caption Basic Telerik Radial Gauge for Blazor. - public List simpleData = new List() { 10, 2, 7, 5 }; +![Basic Radial Gauge](images/basic-radial-gauge.png) - public string[] xAxisItems = new string[] { "Q1", "Q2", "Q3", "Q4" }; -} +````CSHTML +@* Setup a basic radial gauge *@ + + + + + + + ```` ->caption The result from the code snippet above +## Features -![](images/overview-chart.png) +The Telerik Radial Gauge for Blazor exposes the following features: +#### Radial 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. -@[template](/_contentTemplates/chart/link-to-basics.md#configurable-nested-chart-settings) +* `Height` - `string` - controls the height of the component. You can read more on how they work in the [Dimensions]({%slug common-features/dimensions%}) article. ->caption Component namespace and reference +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. -````CSHTML -@using Telerik.Blazor.Components +#### Other Features - - +* `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. -@code { - Telerik.Blazor.Components.TelerikChart myChartRef; -} -```` +* Scale - The scale of the radial gauge renders the values of the [pointers]({%slug radial-gauge-pointers%}), different [ranges]({%slug radial-gauge-ranges%}) and [labels]({%slug radial-gauge-labels%}). See the [Scale]({%slug radial-gauge-scale%}) article for more information on how to customize the scale of the component. -## Chart Size +* Ranges - The ranges are used to visually distinguish particular values on the scale. See the [Ranges]({%slug radial-gauge-ranges%}) article for more information on how to provide ranges for the scale of the component. -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. +* Labels - The labels are rendered on the scale of the component to give information to the users. See the [Labels]({%slug radial-gauge-labels%}) article for more information on how to customize the labels on the scale of the component. -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. +* Pointers - The pointers indicate the values on the scale of the component. See the [Pointers]({%slug radial-gauge-pointers%}) article for more information on how to customize the pointers of the component. +## Methods ->caption Change the 100% chart size dynamically to have a responsive chart +The Radial Gauge reference exposes the `Refresh` method which allows you to programatically re-render the component. -````CSHTML -You can make a responsive chart - -Resize the container and redraw the chart +>caption Get a component reference and use the Refresh method -
- - +````CSHTML +@* Change the Height of the component *@ - - - - - - - - +Change the height - + + + + + + -
+@code{ + Telerik.Blazor.Components.TelerikRadialGauge RadialGaugeRef { get; set; } -@code { - string ContainerWidth { get; set; } = "400px"; - string ContainerHeight { get; set; } = "300px"; - Telerik.Blazor.Components.TelerikChart theChart { get; set; } + public string Height { get; set; } = "200px"; - async Task ResizeChart() + void ChangeHeight() { - //resize the container - ContainerHeight = "500px"; - ContainerWidth = "800px"; + Height = "400px"; - //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(); + RadialGaugeRef.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) +* [Radial Gauge: Live Demo](https://demos.telerik.com/blazor-ui/radial-gauge) +* [Radial Gauge: Scale]({%slug radial-gauge-scale%}) +* [Radial Gauge: Pointers]({%slug radial-gauge-pointers%}) +* [Radial Gauge: Ranges]({%slug radial-gauge-ranges%}) +* [Radial Gauge: Labels]({%slug radial-gauge-labels%}) \ No newline at end of file diff --git a/components/gauge-radial/pointers.md b/components/gauge-radial/pointers.md new file mode 100644 index 0000000000..48ed89e1f2 --- /dev/null +++ b/components/gauge-radial/pointers.md @@ -0,0 +1,162 @@ +--- +title: Pointers +page_title: Radial Gauge - Pointers +description: Radial Gauge for Blazor - Pointers. +slug: radial-gauge-pointers +tags: telerik,blazor,radial,gauge,pointers +published: True +position: 10 +--- + +# Radial Gauge Pointers + +The Pointers mark the values on the scale. They constist of poiter arrow (called just "pointer" for brevity) and a pointer cap - the circle that marks the pointer center. You can customize poiters and pointer caps through the parameters they expose: + +* Pointer + + * [Pointer Color](#pointer-color) + + * [Pointer Length](#pointer-length) + +* Pointer Cap + + * [Pointer Cap Color](#pointer-cap-color) + + * [Pointer Cap Size](#pointer-cap-size) + +* [Notes](#notes) + + +## Pointer Color + +The `Color` (`string`) parameter controls the color of the pointers. It accepts **CSS**, **HEX** and **RGB** colors. + +>caption Change the color of the pointer. The result from the code snippet below. + +![Pointers color](images/pointer-color.png) + +````CSHTML +@* Change the color of the pointers in the Radial Gauge *@ + + + + + + + + + + + + + + +```` + +## Pointer Length + +The `Length` (`string`) parameter controls the pointers length (in percent) that is based on the distance to the scale. The default length of 1 indicates that the pointer exactly reaches the scale. Accepts values between 0.1 and 1.5. + +>caption Change the length of the pointers. The result from the code snippet below + +![Pointer Length](images/pointer-length.png) + +````CSHTML +@* Change the length of the pointers *@ + + + + + + + + + + + + + + +```` + +## Pointer Cap Color + +The `Color` (`string`) parameter controls the color of the pointer cap. It accepts **CSS**, **HEX** and **RGB** colors. + +>caption Change the color of the pointer cap. The result from the code snippet below. + +![Pointer cap color](images/pointer-cap-color.png) + +````CSHML +@* Change the color of the pointer cap *@ + + + + + + + + + +```` + +## Pointer Cap Size + +The `Size` (`double`) parameter controls the size of the pointer cap in percentage according to the scale radius. (from 0 to 1). The default size is 0.05. + +>caption Change the size of the pointer cap. The result from the code snippet below. + +![Pointer cap size](images/pointer-cap-size.png) + +````CSHTML +@* Change the sizes of the pointers *@ + + + + + + + + + +```` + + +## Notes + +* The pointer caps are rendered as per the order they are declared in the markup (for example the last pointer cap will be rendered on top of the others regardless of its pointer value). Therefore, you should consider that when operating with the pointer cap parameters in order for their values to be visible (for example if the first pointer cap has the same size as the last pointer cap, it will not be visible.) + +>caption Change the sizes and colors of the pointer caps. The result from the code snippet below. + +![Pointer cap size](images/pointer-cap-size-and-color.png) + +````CSHTML +@* Change the sizes and colors of the pointer caps *@ + + + + + + + + + + + + + + + + + + + +```` + +## See Also + +* [Radial Gauge: Live Demo](https://demos.telerik.com/blazor-ui/radial-gauge) +* [Radial Gauge: Overview]({%slug radial-gauge-overview%}) +* [Radial Gauge: Scale]({%slug radial-gauge-scale%}) +* [Radial Gauge: Labels]({%slug radial-gauge-labels%}) +* [Radial Gauge: Ranges]({%slug radial-gauge-ranges%}) diff --git a/components/gauge-radial/ranges.md b/components/gauge-radial/ranges.md new file mode 100644 index 0000000000..3e38d894d6 --- /dev/null +++ b/components/gauge-radial/ranges.md @@ -0,0 +1,227 @@ +--- +title: Ranges +page_title: Ranges +description: Radial Gauge for Blazor - Ranges. +slug: radial-gauge-ranges +tags: telerik,blazor,radial,gauge,ranges +published: True +position: 15 +--- + +# Radial 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) + +* [Range Size](#range-size) + +* [Range Distance](#range-distance) + +* [Range Placeholder Color](#range-placeholder-color) + +* [Color](#color) + +* [Opacity](#opacity) + +## From and To + +* The `From` (`double`) parameter controls the start position of the range in scale units. + +* The `To` (`double`) parameter controls the end position of the range in scale units. + +>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. *@ + + + + + + + + + + + + + + + + + +```` + +## Range Size + +The `RangeSize` (`double`) parameter controls the width of the range indicators. + +>caption Use the RangeSize parameter to provide size for the range indicators. The result from the code snippet below. + +![Range Size](images/range-size.png) + +````CSHTML +@* Provide the desired size of the range. *@ + + + + + + + + + + + + + + + + + + + + +```` + +## Range Distance + +The `RangeDistance` (`double`) parameter controls the distance from the range indicators to the ticks. + +>caption Use the RangeDistance parameter to provide the desired distance from the range indicators to the ticks. The result from the code snippet below. + +![Range Distance](images/range-distance.png) + +````CSHTML +@* Provide the desired distance from the range indicators to the ticks. *@ + + + + + + + + + + + + + + + + + + + + +```` + +## Range Placeholder Color + +The `RangePlaceholderColor` (`string`) parameter controls the default color for the ranges. It accepts **CSS**, **HEX** and **RGB** colors. + +>caption Set the default color for the ranges in the radial gauge. The result from the code snippet below. + +![Default Ranges Color](images/default-ranges-color.png) + +````CSHTML +@* Change the default color of the ranges *@ + + + + + + + + + + + + + + + + + + + + +```` + +## 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 Set the desired colors for the ranges in the radial gauge. The result from the code snippet below. + +![Ranges Color](images/ranges-color.png) + +````CSHTML +@* Change the color of the ranges *@ + + + + + + + + + @* Range with no defined color that is not visually rendered *@ + + + + + + + + + + + + + +```` + +## Opacity + +The `Opacity` (`double`) parameter controls the opacity of the range. The value passed to it should be between **0** and **1**. Defaults to 1. + +>caption Change the opacity of a range. The result from the code snippet below + +![Ranges opacity](images/ranges-opacity.png) + +````CSHTML +@* Make a range more opaque *@ + + + + + + + + + + + + + + + + + + + + +```` + +## See Also + +* [Radial Gauge: Live Demo](https://demos.telerik.com/blazor-ui/radial-gauge) +* [Radial Gauge: Overview]({%slug radial-gauge-overview%}) +* [Radial Gauge: Scale]({%slug radial-gauge-scale%}) +* [Radial Gauge: Labels]({%slug radial-gauge-labels%}) +* [Radial Gauge: Pointers]({%slug radial-gauge-pointers%}) + diff --git a/components/gauge-radial/scale.md b/components/gauge-radial/scale.md new file mode 100644 index 0000000000..6ead95204a --- /dev/null +++ b/components/gauge-radial/scale.md @@ -0,0 +1,196 @@ +--- +title: Scale +page_title: Scale +description: Radial Gauge for Blazor - Scale. +slug: radial-gauge-scale +tags: telerik,blazor,radial,gauge,scale +published: True +position: 5 +--- + +## Radial Gauge Scale + +The Scale of the Radial 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) + +* [MinorTicks and MajorTicks](#ninorticks-and-majorticks) + +* [StartAngle and EndAngle](#startangle-and-endangle) + +* [Reverse](#reverse) + +* [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 minimum value of the component. + +>caption Change the minimum and the maximum values for the scale. The result from the code snippet below. + +![Min and max parameters example](images/min-and-max-radial-gauge.png) + +````CSHTML +@* Use the Min and Max parameters to change the minimum and the maximum values for the scale *@ + + + + + + + + + + + + + + + + + + + + +```` + +## MinorUnit and MajorUnit + +* The `MajorUnit` (`double`) parameter controls the interval between the major unit divisions of the component. The [labels]({%slug radial-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-radial-gauge.png) + +````CSHTML +@* Update the rendering of the major and minor units *@ + + + + + + + + + + + + + + +```` + +## StartAngle and EndAngle + +The gauge is rendered clockwise (0 degrees are the 180 degrees in the polar coordinate system). + +* `StartAngle` defines the start angle of the gauge, its default value is 0. + +* `EndAngle` - defines the end angle of the gauge, its default value is 180. + +>caption Change the StartAngle and EndAngle of the radial gauge. The result from the code snippet below + +![StartAngle and EndAngle of the gauge](images/start-end-angles.png) + +````CSHTML +@* Change the StartAngle and EndAngle of the radial gauge *@ + + + + + + + + + + + + + + + + + + + + + + + +```` + +## Reverse + +If you set the `Reverse` (`bool`) parameter to `true` the gauge will be rendered in a reversed view - the min value will be on the right side and the max value will be on the left. + +>caption Reverse the component. The result from the code snippet below. + +![reverse parameter example](images/reverse-radial-gauge.png) + +````CSHTML +@* Set the Reverse parameter to true *@ + + + + + + + + + + + + + +```` + + + +## Additional Customization + +@[template](/_contentTemplates/gauges/additional-customization.md#radial-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-radial-gauge.png) + +````CSHMTL +@* Remove the MinorUnit ticks. *@ + + + + + + + + + + + + + + + +```` + +## See Also + +* [Radial Gauge: Live Demo](https://demos.telerik.com/blazor-ui/radial-gauge) +* [Radial Gauge: Overview]({%slug radial-gauge-overview%}) +* [Radial Gauge: Pointers]({%slug radial-gauge-pointers%}) +* [Radial Gauge: Labels]({%slug radial-gauge-labels%}) +* [Radial Gauge: Ranges]({%slug radial-gauge-ranges%}) +