In Introduction to Gauges Part 1: Status Meter Options and Best Practices, we showed several different options for configuring the horizontal status meter gauge. In this post, we'll do the same for the circular version of the ojStatusMeterGauge component.

gaugeCircular.png

 

To get started, we'll set orientation to 'circular' on the same ojStatusMeterGauge component as the horizontal status meter, and we'll also set a width and height of 75 pixels. The size of the gauge is controlled by the style of the div, and later in this post we'll create a larger gauge with room for a title.

 

We recommend showing the metric label for all circular status meters, and the plot area is recommended whenever a single circular status meter is shown. For small values, the plot area is extremely helpful in understanding the component. In an upcoming release, the metric label will be shown by default for circular status meters.

gaugeCircular1.png

<!-- HTML Snippet. Don't forget to require the 'ojs/ojgauge' component in your main.js. -->
<!-- Only the third gauge above is shown. Remove the plotArea or color to see the first and second. -->  
<div data-bind="ojComponent: {
  component: 'ojStatusMeterGauge',
  orientation: 'circular',
  value: 75, min: 0, max: 100,
  metricLabel: {rendered: 'on'},
  plotArea: {rendered: 'on'},
  color: '#267db3'
}" style="width:75px; height:75px;">
</div>









 

Thresholds can be applied in the same way as for horizontal status meters. Thresholds are specified as a set of objects with max values, where the indicator is colored based on which threshold the metric value belongs. No max value is needed for the final threshold, as it will be set to the max value of the gauge.

gaugeCircular2.png

<!-- Only the third gauge above is shown. Change the value to 25 and 50 to see the first and second -->
<div data-bind="ojComponent: {
  component: 'ojStatusMeterGauge',
  orientation: 'circular',
  value: 75, min: 0, max: 100,
  metricLabel: {rendered: 'on'},
  plotArea: {rendered: 'on'},
  thresholds: [{max: 33}, {max: 67}, {}]
}" style="width:75px;height:75px;">
</div>








 

The indicatorSize can be used to reduce the size of the plot area, giving a hint of the plot area or thresholds, without the full visual weight. It's also possible to reduce the indicator size relative to the plot area, but this tends to work better for larger component sizes since thin curved lines can be hard to read.

gaugeCircular3.png

<div data-bind="ojComponent: {
  component: 'ojStatusMeterGauge',
  orientation: 'circular',
  value: 25, min: 0, max: 100,
  metricLabel: {rendered: 'on'},
  plotArea: {rendered: 'on'},
  thresholds: [{max: 33}, {max: 67}, {}],
  indicatorSize: 4
}" style="width:75px; height:75px">
</div>


<div data-bind="ojComponent: {
  component: 'ojStatusMeterGauge',
  orientation: 'circular',
  value: 25, min: 0, max: 100,
  metricLabel: {rendered: 'on'},
  plotArea: {rendered: 'on'},
  thresholds: [{max: 33}, {max: 67}, {}],
  indicatorSize: 4, thresholdDisplay: 'all'
}" style="width:75px; height:75px;">
</div>








 

The arc of the circular status meter can also be adjusted using the startAngle and angleExtent options.

gaugeCircular4.png

<div data-bind="ojComponent: {
  component: 'ojStatusMeterGauge',
  orientation: 'circular',
  value: 25, min: 0, max: 100,
  metricLabel: {rendered: 'on'},
  plotArea: {rendered: 'on'},
  thresholds: [{max: 33}, {max: 67}, {}],
  indicatorSize: 4, thresholdDisplay: 'all',
  startAngle: 220, angleExtent: 260
}" style="width:150px; height:75px;">
</div>


<div data-bind="ojComponent: {
  component: 'ojStatusMeterGauge',
  orientation: 'circular',
  value: 25, min: 0, max: 100,
  metricLabel: {rendered: 'on'},
  plotArea: {rendered: 'on'},
  startAngle: 90, angleExtent: 90
}" style="width:75px; height:75px;">
</div>






 

In each of the previous examples, the circular status meter gauge would rely on other content in the page to provide context for the metric value. This is not the only option, as the circular status meter also supports a title, which can be shown with larger component sizes.

gaugeCircular5.png

<div data-bind="ojComponent: {
  component: 'ojStatusMeterGauge',
  orientation: 'circular',
  value: 75, min: 0, max: 100,
  metricLabel: {rendered: 'on'},
  plotArea: {rendered: 'on'},
  title: {text: 'Sales'}
}" style="width:125px; height:125px;">
</div>








 

With all these different customization options, our hope is that there is some configuration that works for every data set and use case. If you have any questions, please let us know in the comments or the forum.

 

For information on binding the gauge with knockout and supporting input, see Two-Way Data Binding JET Components with Knockout.