diff --git a/_contentTemplates/gauges/additional-customization.md b/_contentTemplates/gauges/additional-customization.md index 116626e8f0..cbe0fadd14 100644 --- a/_contentTemplates/gauges/additional-customization.md +++ b/_contentTemplates/gauges/additional-customization.md @@ -15,10 +15,15 @@ To further customize the elements of the Radial Gauge you can use nested tags. W #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 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: +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-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%})