Hybrid View

  1. #1
    Sencha Premium Member
    Join Date
    Feb 2012
    Location
    Toulouse, France
    Posts
    10
    Vote Rating
    0
    Squ36 is on a distinguished road

      0  

    Default Bar chart : apply different color per serie

    Bar chart : apply different color per serie


    Hi,

    I'm using ExtJS 4.1.1 to develop a small chart displaying 3 informations about some tests : progress executed, progress ok, planned progress.
    The first two are bar charts and the third is a scatter.

    I'm using this code to create my store :
    Code:
    Ext.create('Ext.data.JsonStore', {
        fields: ['executed', 'ok', 'planned_x', 'planned_y'],
        data: [{
            executed   : perioddata[mstn]['executed'],
            ok         : perioddata[mstn]['ok'],
            planned_x  : perioddata[mstn]['planned'],
            planned_y  : 0
        }]
    });
    And this to create my chart :
    Code:
    Ext.define('KIWi.view.chart.CampaignChart', {
        extend   : 'Ext.chart.Chart',
        alias    : 'widget.campaignchart',
        width    : 800,
        height   : 200,
        legend   : {
            position: 'right'
        },
        //theme: 'Campaign',
        axes     : [
            {
                type: 'Numeric',
                position: 'bottom',
                fields: ['executed', 'ok', 'planned_x'],
                label : {
                    renderer: function(v){
                        return v+' %';
                    }
                },
                grid: true,
                minimum: 0,
                maximum: 100,
                minorTickSteps: 3
            }
        ],
        series   : [
            {
                type: 'bar',
                axis: 'bottom',
                highlight: true,
                label: {
                    display: 'insideEnd',
                    field: 'executed',
                    renderer: function(v){
                        return 'Tests Executed : '+(Math.round(v*10)/10)+'%';
                    },
                    orientation: 'horizontal',
                    color: '#333',
                    'text-anchor': 'middle'
                },
                yField: 'executed',
                title: 'Tests KO',
                renderer: function(sprite, record, attr, index, store) {
                    console.log(attr);
                    return Ext.apply(attr, {
                        fill: '#E39655'
                    });
                }
            },
            {
                type: 'bar',
                axis: 'bottom',
                highlight: true,
                label: {
                    display: 'insideEnd',
                    field: 'ok',
                    renderer: function(v){
                        return 'Tests OK : '+(Math.round(v*10)/10)+'%';
                    },
                    orientation: 'horizontal',
                    color: '#333',
                    'text-anchor': 'middle'
                },
                yField: 'ok',
                title: 'Tests OK',
                renderer: function(sprite, record, attr, index, store) {
                    return Ext.apply(attr, {
                        fill: '#9BBB59'
                    });
                }
            },
            {
                type: 'scatter',
                axis: 'bottom',
                highlight: true,
                markerConfig: {
                    type: 'diamond',
                    radius: 5,
                    size: 5
                },
                label: {
                    display: 'none'
                },
                yField: 'planned_y',
                xField: 'planned_x',
                title: 'IMP Estimate',
                renderer: function(sprite, record, attr, index, store) {
                    return Ext.apply(attr, {
                        fill: '#888888'
                    });
                }
            }
        ]);
    As you can see, my data has only 1 entry, with the 3 fields I need, so the 2 bars are overlapping each other. The thing is, I want each serie to be displayed in a different color (orange for executed, green for ok, and grey for planned). This is the only way i could find so it works as I want, but it doesn't seem very "clean" to me. Plus, the colors in the legend don't match those in the chart anymore.

    Anyone got a better way, or any advice on this ?
    Thanks,

    Romain

  2. #2
    Sencha - Senior Forum Manager mitchellsimoens's Avatar
    Join Date
    Mar 2007
    Location
    Gainesville, FL
    Posts
    37,347
    Vote Rating
    846
    mitchellsimoens has a reputation beyond repute mitchellsimoens has a reputation beyond repute mitchellsimoens has a reputation beyond repute mitchellsimoens has a reputation beyond repute mitchellsimoens has a reputation beyond repute mitchellsimoens has a reputation beyond repute mitchellsimoens has a reputation beyond repute mitchellsimoens has a reputation beyond repute mitchellsimoens has a reputation beyond repute mitchellsimoens has a reputation beyond repute mitchellsimoens has a reputation beyond repute

      0  

    Default


    Have you tried creating your own theme or use the style attrib (not sure if that would help)
    Mitchell Simoens @SenchaMitch
    Sencha Inc, Senior Forum Manager
    ________________
    Check out my GitHub, lots of nice things for Ext JS 4 and Sencha Touch 2
    https://github.com/mitchellsimoens

    Think my support is good? Get more personalized support via a support subscription. https://www.sencha.com/store/

    Need more help with your app? Hire Sencha Services services@sencha.com

    Want to learn Sencha Touch 2? Check out Sencha Touch in Action that is in print!

    When posting code, please use BBCode's CODE tags.

Thread Participants: 1

Tags for this Thread