Results 1 to 5 of 5

Thread: pie inside pie possible

    Thank you for reporting this bug. We will make it our priority to review this report.
  1. #1
    Sencha User
    Join Date
    Oct 2011
    Posts
    26

    Default pie inside pie possible

    Hi all,

    Sencha touch charts are awesome. Even have option for Donut chart option in Pie chart whether is it possible to draw a chart like below image.



    can sencha touch allows option to draw multi series donut chart????????????

    Thanks

  2. #2
    Sencha Premium User mitchellsimoens's Avatar
    Join Date
    Mar 2007
    Location
    Gainesville, FL
    Posts
    40,379
    Answers
    3997

    Default

    That is currently not supported. I can see it being relatively easy by setting multiple series.
    Mitchell Simoens @LikelyMitch

    Check out my GitHub:
    https://github.com/mitchellsimoens

    Posts are my own, not any current, past or future employer's.

  3. #3
    Sencha User
    Join Date
    Oct 2011
    Posts
    26

    Default Thanks Mitchell

    Thanks Mitchell for ur quick response.

    Can you please provide me a insight on how we can try setting multiple series, with some example if possible.

    thanks.

  4. #4
    Sencha User
    Join Date
    Sep 2011
    Location
    Chennai, Tamil Nadu
    Posts
    24

    Default Multiple Series Pie Chart

    Hi,
    May be this code will solve your query..

    Code:
    Ext.setup({
        tabletStartupScreen: 'tablet_startup.jpg',
        phoneStartupScreen: 'phone_startup.jpg',
        tabletIcon: 'icon-ipad.png',
        phoneIcon: 'icon-iphone.png',
        glossOnIcon: false,
        onReady: function() {
            window.generateData = function(n, floor) {
                var data = [],
                    p = (Math.random() * 11) + 1,
                    i;
    
    
                floor = (!floor && floor !== 0) ? 20 : floor;
    
    
                for (i = 0; i < (n || 12); i++) {
                    data.push({
                        name: Date.monthNames[i % 12],
                        2007: Math.floor(Math.max((Math.random() * 100), floor)),
                        iphone: Math.floor(Math.max((Math.random() * 100), floor)),
                        android: Math.floor(Math.max((Math.random() * 100), floor)),
                        ipad: Math.floor(Math.max((Math.random() * 100), floor))
                    });
                }
                return data;
            };
            window.store1 = new Ext.data.JsonStore({
                fields: ['name', '2007', 'iphone', 'iname'],
                data: [
                    {name: 'Jan', 2007: '40'},
                    {name: 'Feb', 2007: '50'},
                    {name: 'Mar', 2007: '55'},
                    {name: 'April', 2007: '60', iphone: 'apple', iname: '205'},
                    {name: 'Jan', 2007: '20', iphone: 'android', iname: '200'},
                    {name: 'Feb', 2007: '40'},
                    {name: 'Mar', 2007: '60'},
                    {name: 'April', 2007: '80'}
                ]
            });
    
    
            var onRefreshTap = function() {
                window.store1.loadData(generateData(6, 2));
            };
    
    
            var onHelpTap = function() {
    			new Ext.Panel({
     		          floating: true,
    		           modal: true,
    		           centered: true,
    		           width: 300,
    		           height: 250,
    		           styleHtmlContent: true,
    		           scroll: 'vertical',
    		           dockedItems: [{
    		               dock: 'top',
    		               xtype: 'toolbar',
    		               title: 'Pie Chart'
    		           }],
    		           stopMaskTapEvent: false,
    		           fullscreen: false,
    				   html: "This example's uses many interactions.<br><ul>" +
    							"<li>Dragging the Pie Chart will rotate it.</li>" +
    							"<li>Tapping any slice will bring up an overlay which can then be sized to group and total slices together.</li>" +
    							"<li>Tap and hold will bring up additional information about a slice</li>" +
    							"<li>Double-Tap will reset the chart back to the initial state (after confirmation)</li>"
    		       }).show('pop');
    		}
    
    
            var chartPanel = new Ext.chart.Panel({
                title: 'Pie Chart',
                fullscreen: true,
                dockedItems: [{
                    xtype: 'button',
                    iconCls: 'help',
                    iconMask: true,
                    ui: 'plain',
                    handler: onHelpTap
                }, {
                    xtype: 'button',
                    iconCls: 'shuffle',
                    iconMask: true,
                    ui: 'plain',
                    handler: onRefreshTap
                }],
                items: {
                    cls: 'pie1',
                    theme: 'Demo',
                    store: store1,
                    shadow: false,
                    animate: true,
                    insetPadding: 20,
                    legend: {
                        position: {
                            portrait: 'bottom',
                            landscape: 'left'
                        }
                    },
                    interactions: [{
                        type: 'reset',
                        confirm: true
                    },
                    {
                        type: 'rotate'
                    },
                    {
                        type: 'iteminfo',
                        gesture: 'taphold',
                        listeners: {
                            show: function(interaction, item, panel) {
                                var storeItem = item.storeItem;
                                panel.update(['<ul><li><b>Month: </b>' + storeItem.get('name') + '</li>', '<li><b>Value: </b> ' + storeItem.get('2007') + '</li></ul>'].join(''));
                            }
                        }
                    }],
                    series: [{
                        type: 'pie',
                        field: 'iname',
                        donut: 20,
                        showInLegend: true,
                        highlight: true,                    
                        label: {
                            field: 'iphone'
                        }
                        
                        
                    },
                {
                    type: 'pie',
                    field: '2007',
                    showInLegend: true,
                    highlight: true,
                    label: {
                        field: ['name']
                    },
                    donut: 30
                }]
                }
            });
    
    
        }
    });

  5. #5
    Sencha User
    Join Date
    Oct 2011
    Posts
    26

    Default

    Thanks Jay. Its awesome

Posting Permissions

  • You may not post new threads
  • You may not post replies
  • You may not post attachments
  • You may not edit your posts
  •