Generate rich dashboard-style applications with these HTML5 gauges powered by SVG and Wijmo: ComponentOne Gauges™ for ASP.NET Wijmo. Select from a highly interactive group of linear, radial, and knob type gauge controls with built-in animation, transitions, themes, and tooltips.
Features
-
Radial and Linear Gauges
When setting up the C1Gauge control, choose between radial or linear shapes. Radial gauges can be circular, helical, arc curve, clamshell, or half-circular and linear gauges can be horizontal, vertical, or tilted.
-
Composite Gauges
Align multiple gauges into one container using the C1Gauge control. Gauges can be overlapped or placed side-by-side. Resize the gauge in any arbitrary way and each gauge maintains its aspect ratio and relative position.
-
Databound Gauges
Easily bind the C1Gauge control to a data source at design time using standard .NET data-binding techniques. You may bind individual pointers to different data sources.
-
Bound Ranges
- Create non-linear or linear shaped ranges.
- Customize the exact location and size of the ranges to best suit any desired look.
- Map colors to value thresholds to display a multi-colored range with optional gradient blending.
- Bind ranges to the pointers for a more dramatic display.
- Highlight the current value if you bind some color in the range (as well as in markers and labels) to the pointer. So you may, for example, display the progress bar using a single range object with the bound color.
-
Multiple Pointers and Scales
There is no limit to the number of pointers and scales one gauge can hold. You can add multiple, related scales to one gauge, or overlay multiple gauges for disjointed scales. Scales can be non-uniform: linear or logarithmic. It's also possible to create dynamic scales. You may bind the beginning and ending of a scale to pointers.
-
Label Formatting
-
Apply standard or custom .NET numeric formats to all gauge labels and value indicators to display decimal places, percents, currency, and so on. The static text can appear on labels as part of the custom numeric format.
-
The C1Gauge control can automatically rotate labels for radial gauges so that they are always most readable to users. You may specify additional rotation or radial/orthogonal offset to achieve interesting effects.
-
Markers
Markers are visual cues that can be placed at specific values on the gauge scale. These are useful for comparing the gauge value to some other predetermined value. Markers can be shapes or custom images. In the same way as labels, markers can be rotated or not rotated for radial gauges.
-
Indicators
Display visual indications based upon value thresholds using bound labels and markers. Use these as state indicators in addition to or instead of ranges to visually display the value as a color. For example, the background color of a marker can depend on the pointer value or you may attach the fixed or movable label to a pointer and display the current value at the given location.
-
Pointer Customization
-
Choose from many predefined pointer shapes, customize the shape, or import your own custom image to use as the pointer.
-
Specify the exact position of the pointer origin in radial and linear gauges. This allows you to decentralize the pointer to either side or the bottom of the gauge.
-
Pointer Animation
Set the time interval so the gauge pointer will animate smoothly as the value changes. You can also decrease the frequency of redrawing for the gauge control if the source value is changed too frequently for observation.
-
Vector-based Graphics
All graphics are vector-based in Gauges for ASP.NET Wijmo unless you specify the pixel-based size. So the gauge paints itself perfectly in any size, and all inner elements resize proportionally.
-
Appearance Customization
Create any look desired by customizing the face and cover shapes of the gauge using the rich set of style attributes available. You can even simulate a glassing effect using simple shapes. If shapes are not enough you may add images. It's possible to apply various effects to images, such as rotation, flipping, changing the hue, saturation, lightness, and opacity.
-
Appearance Settings: Save and Load
Create several views (or "skins") for a gauge or container control. Using views you can change the whole look of the gauge without breaking any existent scales, data, and event bindings.
-
Templates: Save and Load
Rapidly decrease development time by saving and reusing gauge templates. You may create templates for individual gauges or for the whole container control. Gauges for ASP.NET AJAX also ships with many predesigned templates to get started.