How to add Bar chart in Sencha Touch 2

In my personal Project 'Expense Tracker', i need to integrate Bar Chart using Cartesian Chart  in order to track by expenses based on my categories. I successfully integrated Bar chart in my Expense Tracker App. Here is the final output

Form above Bar Chart, x-axis will display the Categories and y-axis will display the Expense Amount. Bar chart filled with blue color refers to allocated amount and Bar filled with red color refers to remaining/available amount for each categories.

In Sencha Touch 2, Chart will render based on Store data. Let's first create Store and Model class with sample data.

Category Model:

This category model class contains 4 fields id, name, price and balance.

Ext.define('ExpenseTracker.model.Category', {
    extend: 'Ext.data.Model',
    alias: 'model.category',

    requires: [
        'Ext.data.Field',
        'Ext.data.identifier.Uuid'
    ],

    config: {

        identifier: {
            type: 'uuid'
        },

        fields: [
            {
                name: 'id',
                type: 'string'
            },
            {
                name: 'name',
                type: 'string'
            },
            {
               defaultValue: 0.00,
                name: 'price',
                type: 'float'
            },
            {
                defaultValue: 0.00,
                name: 'balance',
                type: 'float'
            }
        ]
    }
});

Categories Store:

This Categories store will have proxy configured to Html5 LocalStorage and assign above category model.

Ext.define('ExpenseTracker.store.Categories', {
    extend: 'Ext.data.Store',
    alias: 'store.categories',

    requires: [
        'ExpenseTracker.model.Category',
        'Ext.data.proxy.LocalStorage'
    ],

    config: {

        autoLoad: true,
        model: 'ExpenseTracker.model.Category',
        storeId: 'Categories',

        proxy: {
            type: 'localstorage',
            id: 'categoryLocalStorage'
        }
    }
});

Bar Chart Implementation:

Before we proceeding to the Bar chart implementation, let's add some dummy data to the Categories store and sync in order to add in the Local Storage.

var categoryModel = [
{
name: 'Tea and Coffee',
price: 500,
balance: 475
},
{
name: 'Mobile Recharge',
price: 1000,
balance: 1000
},
{
name: 'Vegetables',
price: 3000,
balance: 3000
},
{
name: 'Cloth Purchase',
price: 3000,
balance: 3000
}
];

Ext.getStore('Categories').add(categoryModel );

Ext.getStore('Categories').sync();

Here is the source code for the Bar Chart,

Ext.define('ExpenseTracker.view.CategoryBarChart', {
    extend: 'Ext.chart.CartesianChart',
    alias: 'widget.categorybarchart',

    xtype: 'categorybarchart',

    requires: [
        'Ext.chart.series.Bar',
        'Ext.chart.axis.Numeric',
        'Ext.chart.axis.Category',
        'Ext.chart.CartesianChart'
    ],

    config: {

        layout: {
            type: "fit"
        },

        xtype: "chart",
        width: '100%',
        height: '100%',
        store: 'Categories',
        flipXY: true,
        animate: true,
        shadow: true,

        legend: {
            docked: Ext.os.is.Phone ? 'bottom' : 'right'
        },

        axes: [{
           type: 'numeric',
            position: 'bottom',
            fields: ['price', 'balance'],

            title: {
                text: 'Expense Amount',
                fontSize: 20,
                fontWeight: 'bold'
            },

            grid: true,
            minimum: 0,
        }, {

            type: 'category',
            position: 'left',
            fields: ['name'],

            title: {
                text: 'Categories',
                fontSize: 20,
                fontWeight: 'bold'
            },

            label: {
                rotate: {
                    degrees: 315
                }
            }
        }],

        series: [{
            type: 'bar',
            axis: 'bottom',
            xField: 'name',
            yField: ['price', 'balance'],

            subStyle: {
                fill: ['blue', 'red']
            },

            style: {
                maxBarWidth: 20
            },

            interactions: [{
                type: 'togglestacked',
                gesture: 'doubletap'
            }],

            label: {
                field: ['price', 'balance'],
                display: 'insideEnd'
            }
        }]
    }
});

For detailed information regarding various configurations supported by Cartesian Chart and Bar Chart Series. Please refer the Sencha official documentation.

Hope, you enjoyed this Post.