In JET 2.0.1 we have introduced the ability for developers to easily customize the center content of donut charts and status meter gauges.

donut.pngstatusmetergauge.png

Using the new API, developers can now provide either a callback function or a Knockout template that specifies a center HTML DOM element.

When constructing center content for a donut chart, specify a template name using the pieCenter.template or pass a callback function which returns a DOM element to pieCenter.renderer. For a status meter gauge, these attributes are center.template and center.renderer respectively.

 

The center HTML content is passed into a div layer that is placed on top of the chart or gauge. By default, this div will intercept any mouse or touch events allowing for interactive content in the center. In order to disable this behavior and retain the chart or gauge default interactivity in the center area, set the CSS pointer-events property to 'none' on the center HTML.

 

Here is an example of how the center content can be configured using a Knockout template:

  <div id="gauge" data-bind="ojComponent: {
       component: 'ojStatusMeterGauge',
       min: 0,
       max: 100,
       value: 20,
       orientation: 'circular',
       plotArea: {rendered: 'on'},
       metricLabel:{rendered:'off'},
       center: {template: 'template'}
       }"
       style=
       "width:200px;
        height:200px;">
  </div>
  <script type="text/html" id="template">
    <div data-bind="style: {
            position:'absolute',
            backgroundImage: 'url(\'person4.png\')',
            backgroundSize: 'cover',
            width: innerBounds.width + 'px',
            height: innerBounds.width+ 'px',
            top: innerBounds.y + 'px',
            left: innerBounds.x + 'px',
            pointerEvents: 'none'}">
    </div>
  </script>
     

 

Two important context variables that are available to the center function or template are outerBounds and innerBounds. Each bounds object contains x, y, width, height parameters.

bounds.png

The outerBounds is represented by the blue box in the image above while the innerBounds is represented by the green box. The x and y coordinates of the bounds are relative to the top left corner of the container.

 

For further information and complete demos click on one of the links below.

Donut chart demo: http://www.oracle.com/webfolder/technetwork/jet/jetCookbook.html?component=pieChart&demo=centerCallback

Status meter gauge demo: http://www.oracle.com/webfolder/technetwork/jet/jetCookbook.html?component=statusMeterGauge&demo=statusMeterGaugeCenterC…