RSS Feed

Sencha, multiple axes column charts

May 28 2012 Published by admin under Sencha

  • Sharebar

While working with Sencha charts I was not able to draw column charts having multiple axes. There is no solution available on the web so I tried and found a workaround and it is working fine. Just to give an idea on the problem, below is a screenshot on what the problem looks like.



Code for the problem is as below:

<div id="chart"></div>
         <script type="text/javascript" >
 
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],
            data1: Math.floor(Math.max((Math.random() * 100), floor)),
            data2: Math.floor(Math.max((Math.random() * 100), floor)),
            data3: Math.floor(Math.max((Math.random() * 1000), floor)),
            data4: 0
        });
    }
 
    return data;
};
Ext.setup({
    onReady: function() {
 
        var store1 = new Ext.data.JsonStore({
 
            fields: ['name', 'data1', 'data2', 'data3', 'data4'],
            data: generateData(5, 20)
        });
        var onRefreshTap = function() {
            window.store1.loadData(generateData(5, 20));
        };
 
        var newdata= new Ext.chart.Panel({
 
            /*  fullscreen: true,*/
            /* autoCreateViewPort:false,*/
            renderTo:"chart",
            width: 500,
            height: 500,
            title: 'Column Chart',
            items: {
                cls: 'column1',
                store: store1,
 
                axes: [{
                    type: 'Numeric',
                    position: 'left',
                    fields: ['data1', 'data2'],
                    minimum: 0,
                    maximum: 100,
                    label: {
                        renderer: function(v) {
                            return v.toFixed(0);
                        }
                    },
                    title: 'title1'
                },{
                    type: 'Numeric',
                    position: 'right',
                    fields: ['data3'],
                    minimum: 0,
                   /* maximum: 100,*/
                    label: {
                        renderer: function(v) {
                            return v.toFixed(0);
                        }
                    },
                    title: 'title2'
                },
                {
                    type: 'Category',
                    position: 'bottom',
                    fields: ['name'],
                    title: 'Month of the Year'
                }],
                series: [{
                    type: 'column',
                    axis: 'left',
                    highlight: true,
 
                    label: {
                        field: ['data1']
                    },
                    xField: 'name',
                    yField: ['data1', 'data2']
                },
                {
                    type: 'column',
                    axis: 'right',
                    highlight: true,
                    label: {
                        field: 'data3'
                    },
                    xField: 'name',
                    yField: ['data3']
                }],
                interactions: [{
                    type: 'panzoom',
                    axes: ['bottom']
                }]
            }
        });
 
    }
 
});
                  </script>

The solution:

We need to create a zero value entry into the store and append it to the first and second series items. The number of additions depends on the length of series yField items of the other axes. For example if we are using 1 data elment in yField on left and 2 data elements on the right side then we need to append zero value as: 2 to the left side at the end, 1 to the beginning of the right side items. So both sides now contain 3 data items.

An example code is as below:

series: [{
                    type: 'column',
                    axis: 'left',
                    highlight: true,
 
                    label: {
                        field: ['data1']
                    },
                    xField: 'name',
                    yField: ['data1', 'data2','data4']
                },
                {
                    type: 'column',
                    axis: 'right',
                    highlight: true,
                    label: {
                        field: 'data3'
                    },
                    xField: 'name',
                    yField: ['data4','data4','data3']
                }]

Here data4 is a zero value.

And it renders as:

Problemo Solved!!

Tags:

One response so far

  • Name says:
    November 20, 2012 at 2:07 pm

    You don’t need to add a zero value to make it work, you just need to specify a non-numeric/undefined field in the yField.

    This works:
    series: [{
    type: 'column',
    axis: 'left',
    highlight: true,

    label: {
    field: ['data1']
    },
    xField: ‘name’,
    yField: ['data1', 'data2','whateverUndefinedFieldNameYouComeUpWith'] // Use an undefined field
    },
    {
    type: ‘column’,
    axis: ‘right’,
    highlight: true,
    label: {
    field: ‘data3′
    },
    xField: ‘name’,
    yField: ['name','name','data3'] // or just use the same field you use for the x axis
    }]

Leave a Reply