Results 1 to 5 of 5

Thread: Donut chart with percentage in the center

  1. #1
    Sencha User
    Join Date
    Jun 2013
    Posts
    4

    Default Donut chart with percentage in the center

    Hi all This is my first post so I will introduce myself. My name is Henry and I am a UI developer @ Fabrix - a start up company doing large scale streaming. As for my question: I would like to create a donut chart with a label in the center of it (as in the gimp picture). Any suggestion how would I go about doing it? Thank you, Henry
    Attached Images Attached Images

  2. #2
    Sencha User slemmon's Avatar
    Join Date
    Mar 2009
    Location
    Boise, ID
    Posts
    6,165

    Default

    This is just something I threw together really quickly, but maybe it'll give you some ideas. You'll need to mess with the x/y position and height and that sort of thing to get it like you want.

    Code:
    var store = Ext.create('Ext.data.JsonStore', {
        fields: ['name', 'data'],
        data: [
            { 'name': 'metric one',   'data': 10 },
            { 'name': 'metric two',   'data':  7 },
            { 'name': 'metric three', 'data':  5 },
            { 'name': 'metric four',  'data':  2 },
            { 'name': 'metric five',  'data': 27 }
        ]
    });
    
    
    var chart = Ext.create('Ext.chart.Chart', {
        renderTo: Ext.getBody(),
        width: 500,
        height: 350,
        animate: true,
        store: store,
        theme: 'Base:gradients',
        series: [{
            type: 'pie',
            donut: 50,
            angleField: 'data',
            showInLegend: true,
            tips: {
                trackMouse: true,
                width: 140,
                height: 28,
                renderer: function(storeItem, item) {
                    // calculate and display percentage on hover
                    var total = 0;
                    store.each(function(rec) {
                        total += rec.get('data');
                    });
                    this.setTitle(storeItem.get('name') + ': ' + Math.round(storeItem.get('data') / total * 100) + '%');
                }
            },
            highlight: {
                segment: {
                    margin: 20
                }
            },
            label: {
                field: 'name',
                display: 'rotate',
                contrast: true,
                font: '18px Arial'
            },
            listeners: {
                afterrender: function () {
                    var surface = chart.surface,
                        sprite = chart.surface.add({
                            type: 'text',
                            text: '45%',
                            x: surface.width / 2,
                            y: surface.height / 2
                        });
                    sprite.show(true);
                }
            }
        }]
    });

  3. #3
    Sencha User
    Join Date
    Jun 2013
    Posts
    4

    Default

    Thank you very much for the answer. It works!
    Is there a way to estimate the length of the text so I could position exactly in the middle?

  4. #4
    Sencha User slemmon's Avatar
    Join Date
    Mar 2009
    Location
    Boise, ID
    Posts
    6,165

    Default

    The Ext.util.TextMetrics class will let you get the dimensions of the text which you can use when placing the text on the chart (with offset).
    http://docs.sencha.com/extjs/4.2.1/#...il.TextMetrics

  5. #5
    Sencha User
    Join Date
    Jun 2013
    Posts
    4

    Default

    Will try that, thank you

Posting Permissions

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