Bar Chart in MVC Architecture Using phonegap Android

Step 1 . Create Sencha Touch Application
                       Sencha app generate

Step 2 . Adding phonegap plugins

Step 3.


View Page 


BarChart.js


Ext.define('myios.view.BarChart', {
    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' //Phone based legends
        },
interactions: ['itemhighlight'], // Highligting the elements
        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',
highlight: true,
 highlightCfg: {
                fillStyle: '#FF0000'
               , strokeStyle: 'black',
                shadowColor: 'black',
               shadowBlur: 8,
                shadowOffsetX: 4,
                shadowOffsetY: 4
            },
            xField: 'name',
            yField: ['price', 'balance'],

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

            style: {
                maxBarWidth: 20
            },

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

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


Store Page

Categories.js

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

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

    config: {

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

        proxy: {
            type: 'localstorage',
            id: 'categoryLocalStorage'
        },
 fields: ['name', 'price','balance'],
 data: [
 {'name': 'T','price':500,'balance':475}


 ]
    }
});


Model Page

Category.js

Ext.define('myios.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'
            }
        ]
    }
});


app.js

Ext.application({
    name: 'myios',

    requires: [
        'Ext.MessageBox'
    ],

    views: [
      'Main','BarChart'
    ],
stores:[
'ChartStore','Categories'
],
    icon: {
        '57': 'resources/icons/Icon.png',
        '72': 'resources/icons/Icon~ipad.png',
        '114': 'resources/icons/Icon@2x.png',
        '144': 'resources/icons/Icon~ipad@2x.png'
    },

    isIconPrecomposed: true,

    startupImage: {
        '320x460': 'resources/startup/320x460.jpg',
        '640x920': 'resources/startup/640x920.png',
        '768x1004': 'resources/startup/768x1004.png',
        '748x1024': 'resources/startup/748x1024.png',
        '1536x2008': 'resources/startup/1536x2008.png',
        '1496x2048': 'resources/startup/1496x2048.png'
    },

    launch: function() {
        // Destroy the #appLoadingIndicator element
        Ext.fly('appLoadingIndicator').destroy();

        // Initialize the main view
        Ext.Viewport.add(Ext.create('myios.view.CategoryBarChart'));

    },

    onUpdated: function() {
        Ext.Msg.confirm(
            "Application Update",
            "This application has just successfully been updated to the latest version. Reload now?",
            function(buttonId) {
                if (buttonId === 'yes') {
                    window.location.reload();
                }
            }
        );
    }
});








/*
SOME CASE Chart Animation Requires Class Files

Such Case Add Necessary js Files from touch Folder to your project resource folder and map it in app.json file

*/