import ExtJS 7.0.0 GPL

[extjs.git] / extjs / examples / kitchensink / classic / samples / view / charts / pie / Donut.js

diff --git a/extjs/examples/kitchensink/classic/samples/view/charts/pie/Donut.js b/extjs/examples/kitchensink/classic/samples/view/charts/pie/Donut.js
index b68b562a681200993a59393aa27ed6d9ee5a112c..d59709166f579d9875017cb7d6b0ce45b644a76d 100644 (file)
--- a/extjs/examples/kitchensink/classic/samples/view/charts/pie/Donut.js
+++ b/extjs/examples/kitchensink/classic/samples/view/charts/pie/Donut.js
@@ -1,106 +1,76 @@
-/**\r
- * A basic donut chart functions precisely like a pie chart. The only difference is that\r
- * the center is blank. This is typically done to increase the readability of the data\r
- * labels that may be around. The example makes use of two interactions: 'itemhighlight'\r
- * and 'rotate'. To use the first one, hover over or tap on a pie sector. To use the\r
- * second one, click or tap and then drag anywhere on the chart.\r
- */\r
-Ext.define('KitchenSink.view.charts.pie.Donut', {\r
-    extend: 'Ext.Panel',\r
-    xtype: 'pie-donut',\r
-    controller: 'pie-basic',\r
-\r
-    // <example>\r
-    // Content between example tags is omitted from code preview.\r
-    otherContent: [{\r
-        type: 'Controller',\r
-        path: 'classic/samples/view/charts/pie/BasicController.js'\r
-    }, {\r
-        type: 'Store',\r
-        path: 'classic/samples/store/MobileOS.js'\r
-    }],\r
-    bodyStyle: 'background: transparent !important',\r
-    layout: {\r
-        type: 'vbox',\r
-        pack: 'center'\r
-    },\r
-    // </example>\r
-    width: 650,\r
-\r
-    tbar: [\r
-        '->',\r
-        {\r
-            text: 'Preview',\r
-            handler: 'onPreview'\r
-        }\r
-    ],\r
-\r
-    items: [{\r
-        xtype: 'polar',\r
-        reference: 'chart',\r
-        width: '100%',\r
-        height: 500,\r
-        insetPadding: 50,\r
-        innerPadding: 20,\r
-        store: {\r
-            type: 'mobile-os'\r
-        },\r
-        legend: {\r
-            docked: 'bottom'\r
-        },\r
-        interactions: ['rotate', 'itemhighlight'],\r
-        sprites: [{\r
-            type: 'text',\r
-            text: 'Donut Charts - Basic',\r
-            fontSize: 22,\r
-            width: 100,\r
-            height: 30,\r
-            x: 40, // the sprite x position\r
-            y: 20  // the sprite y position\r
-        }, {\r
-            type: 'text',\r
-            text: 'Data: IDC Predictions - 2017',\r
-            x: 12,\r
-            y: 425\r
-        }, {\r
-            type: 'text',\r
-            text: 'Source: Internet',\r
-            x: 12,\r
-            y: 440\r
-        }],\r
-        series: [{\r
-            type: 'pie',\r
-            angleField: 'data1',\r
-            donut: 50,\r
-            label: {\r
-                field: 'os',\r
-                display: 'outside'\r
-            },\r
-            highlight: true,\r
-            tooltip: {\r
-                trackMouse: true,\r
-                renderer: 'onSeriesTooltipRender'\r
-            }\r
-        }]\r
-        //<example>\r
-    }, {\r
-        style: 'padding-top: 10px;',\r
-        xtype: 'gridpanel',\r
-        columns : {\r
-            defaults: {\r
-                sortable: false,\r
-                menuDisabled: true\r
-            },\r
-            items: [\r
-                { text: 'OS', dataIndex: 'os' },\r
-                { text: 'Market Share', dataIndex: 'data1', width: 150, renderer: 'onDataRender' }\r
-            ]\r
-        },\r
-        store: {\r
-            type: 'mobile-os'\r
-        },\r
-        width: '100%'\r
-        //</example>\r
-    }]\r
-\r
-});\r
+/**
+ * A basic donut chart functions precisely like a pie chart. The only difference is that
+ * the center is blank. This is typically done to increase the readability of the data
+ * labels that may be around. The example makes use of two interactions: 'itemhighlight'
+ * and 'rotate'. To use the first one, hover over or tap on a pie sector. To use the
+ * second one, click or tap and then drag anywhere on the chart.
+ */
+Ext.define('KitchenSink.view.charts.pie.Donut', {
+    extend: 'Ext.Panel',
+    xtype: 'pie-donut',
+    controller: 'pie-basic',
+
+    //<example>
+    // Content between example tags is omitted from code preview.
+    otherContent: [{
+        type: 'Controller',
+        path: 'classic/samples/view/charts/pie/BasicController.js'
+    }, {
+        type: 'Store',
+        path: 'app/store/MobileOS.js'
+    }],
+    bodyStyle: 'background: transparent !important',
+    layout: {
+        type: 'vbox',
+        pack: 'center'
+    },
+    //</example>
+    width: 650,
+
+    tbar: [
+        '->',
+        {
+            text: 'Preview',
+            handler: 'onPreview'
+        }
+    ],
+
+    items: [{
+        xtype: 'polar',
+        reference: 'chart',
+        captions: {
+            title: 'Donut Charts - Basic',
+            credits: {
+                text: 'Data: IDC Predictions - 2017\n' +
+                'Source: Internet',
+                align: 'left'
+            }
+        },
+        width: '100%',
+        height: 500,
+        innerPadding: 20,
+        store: {
+            type: 'mobile-os'
+        },
+        legend: {
+            docked: 'bottom'
+        },
+        interactions: ['rotate', 'itemhighlight'],
+        series: [{
+            type: 'pie',
+            angleField: 'data1',
+            donut: 50,
+            label: {
+                field: 'os',
+                display: 'outside'
+            },
+            highlight: true,
+            tooltip: {
+                trackMouse: true,
+                renderer: 'onSeriesTooltipRender'
+            }
+        }]
+        //<example>
+    }]
+
+});