Clear Up
SharpKit Reference

Gauge Class

Creates a Gauge Chart. Gauge Charts are used to show progress in a certain variable. There are two ways of using the Gauge chart. One is setting a store element into the Gauge and selecting the field to be used from that store. Another one is instantiating the visualization and using the setValue method to adjust the value you want.

An example of Gauge visualization:

var store = Ext.create('', {
            fields: ['data'],
            data: [
            { 'value':80 }
            Ext.create('Ext.chart.Chart', {
            renderTo: Ext.getBody(),
            store: store,
            width: 400,
            height: 250,
            animate: true,
            insetPadding: 30,
            axes: [{
            type: 'gauge',
            position: 'gauge',
            minimum: 0,
            maximum: 100,
            steps: 10,
            margin: 10
            series: [{
            type: 'gauge',
            field: 'value',
            donut: 30,
            colorSet: ['#F49D10', '#ddd']
            Ext.widget("button", {
            renderTo: Ext.getBody(),
            text: "Refresh",
            handler: function() {
            store.getAt(0).set('value', Math.round(Math.random()*100));

In this example we create a special Gauge axis to be used with the gauge visualization (describing half-circle markers), and also we're setting a maximum, minimum and steps configuration options into the axis. The Gauge series configuration contains the store field to be bound to the visual display and the color set to be used with the visualization.

Namespace: Ext.chart.series



Name Description
angleField The store record field name to be used for the pie angles. The values bound to this field name must be positive real numbers. Defaults to: false
donut Use the entire disk or just a fraction of it for the gauge. Default's false. Defaults to: false
highlightDuration The duration for the pie slice highlight effect. Defaults to: 150
needle Use the Gauge Series as an area series or add a needle to it. Default's false. Defaults to: false
style An object containing styles for overriding series styles from Theming. Defaults to: {}


Name Description
drawSeries() Draws the series for the current chart.
setValue(object) Sets the Gauge chart to the current specified value.
© Copyright 2005-2011 SharpKit. All rights reserved.