Upgrade to ExtJS 4.0.0 - Released 04/26/2011

[extjs.git] / examples / charts / Gauge.js

diff --git a/examples/charts/Gauge.js b/examples/charts/Gauge.js
new file mode 100644 (file)
index 0000000..ebd9251
--- /dev/null
+++ b/examples/charts/Gauge.js
@@ -0,0 +1,95 @@
+Ext.require(['Ext.chart.*', 'Ext.chart.axis.Gauge', 'Ext.chart.series.*', 'Ext.Window']);
+
+Ext.onReady(function () {
+
+    Ext.create('Ext.Window', {
+        width: 800,
+        height: 250,
+        minWidth: 650,
+        minHeight: 225,
+        title: 'Gauge Charts',
+        tbar: [{
+            text: 'Reload Data',
+            handler: function() {
+                store1.loadData(generateData(1));
+                store3.loadData(generateData(1));
+                store4.loadData(generateData(1));
+            }
+        }],
+        layout: {
+            type: 'hbox',
+            align: 'stretch'
+        },
+        items: [{
+            xtype: 'chart',
+            style: 'background:#fff',
+            animate: {
+                easing: 'elasticIn',
+                duration: 1000
+            },
+            store: store1,
+            insetPadding: 25,
+            flex: 1,
+            axes: [{
+                type: 'gauge',
+                position: 'gauge',
+                minimum: 0,
+                maximum: 100,
+                steps: 10,
+                margin: -10
+            }],
+            series: [{
+                type: 'gauge',
+                field: 'data1',
+                donut: false,
+                colorSet: ['#F49D10', '#ddd']
+            }]
+        }, {
+            xtype: 'chart',
+            style: 'background:#fff',
+            animate: true,
+            store: store3,
+            insetPadding: 25,
+            flex: 1,
+            axes: [{
+                type: 'gauge',
+                position: 'gauge',
+                minimum: 0,
+                maximum: 100,
+                steps: 10,
+                margin: 7
+            }],
+            series: [{
+                type: 'gauge',
+                field: 'data1',
+                donut: 30,
+                colorSet: ['#82B525', '#ddd']
+            }]
+        }, {
+            xtype: 'chart',
+            style: 'background:#fff',
+            animate: {
+                easing: 'bounceOut',
+                duration: 500
+            },
+            store: store4,
+            insetPadding: 25,
+            flex: 1,
+            axes: [{
+                type: 'gauge',
+                position: 'gauge',
+                minimum: 0,
+                maximum: 100,
+                steps: 10,
+                margin: 7
+            }],
+            series: [{
+                type: 'gauge',
+                field: 'data1',
+                donut: 80,
+                colorSet: ['#3AA8CB', '#ddd']
+            }]
+        }]
+    }).show();
+    
+});
\ No newline at end of file