Skip to main content

Pie Chart in Sencha Touch MVC Architecture with phonegap Plugin

Step 1  Create Sencha application

Step 2 Add phonegap plugin

Step 3


VIEW PAGE

Dashboard.js

Ext.define('myios.view.Dashboard', {
extend: 'Ext.Panel',
 xtype: 'dashboard',
 requires: [
 'Ext.chart.PolarChart', 'Ext.chart.series.Pie'],
 initConfig:function(){
var me = this;

 Ext.apply(me.initialConfig,{
layout: 'fit',
style: 'background: #EEEEEE',
items: [{
 xtype: 'polar',
 store: 'Pie',
/* animate: {
duration: 1500,
easing: 'easeIn'
},
*/
 animate:true,
 colors: ["#115fa6", "#94ae0a", "#a61120", "#ff8809", "#ffd13e",'#800000','#F25454','#81BEF7'],

 theme: 'Base:gradients',
 innerPadding: 45,
 insetPadding: 60,
 shadow: true,
           /*
     legend: { // For Side Box With data
                position: 'right'
             },*/

 series:[{
 type: 'pie',
 xField: 'units',
 labelField: 'month',



 donut: 5,//Center Hole
// angleField: 'data1',
 highlight: true,
                tooltip: {
                    trackMouse: true,
                    renderer: function(storeItem, item) {
                        this.setHtml('%');
                    }
                },
/*label: {
                    field: 'os',
                    display: 'outside',
                    calloutLine: true
                },*/
              showInLegend: true,
                highlight: true,

highlightCfg:{ //Highlight Block
// fill: '#000',
                    'stroke-width':1,
                    stroke: '#fff',
 margin: 20
 }

,style: { //Lines in CHart separating
stroke: 'white',
miterLimit: 10,
lineCap: 'miter',
lineWidth: 2
},



label: {
                   // field: 'name',
                    display: 'rotate',
                    contrast: true,
                    font: '18px Arial',
display: 'middle',
 // display: 'outside',
                    //calloutLine: true,
 calloutLine: {
                        length: 60,
                        width: 3
                        // specifying 'color' is also possible here
                    }
//,
    /*xfield: 'units',
setTitle:'hj',
    renderer: function (val) {
        return val >= 0  ? val : 'highlight';
    }*/
               }


 }],
 axes: [
 ]
// ,interactions: ['rotate', 'itemhighlight'],
 ,interactions: [{
type: 'itemhighlight',
gesture: 'tap'

}
/*,{
type: 'panzoom',
axes: ['bottom']
}*/
]

/*,interactions: [{
    type: 'iteminfo',
    gesture: 'taphold',
    listeners: {
        show: function(interaction, item, panel) {
            var record = item.storeItem;
            panel.update(
                '<b>Traffic in :</b>' +
                '<ul>' +
                    '<li>Visitors: </li>' +
                    '<li>Page Views: </li>' +
                '</ul>'
            );
        }
    }
}],*/
}]
});

 me.callParent(arguments);
 },

 initialize: function () {
this.callParent();
Ext.getStore('Pie');
 }
});


STORE PAGE


ChartStore.js


Ext.define('myios.store.ChartStore', {
 alias: 'store.Pie',
 extend: 'Ext.data.Store',
 config: {
 storeId: 'Pie',

 fields: ['days', 'units'],
 data: [
 {'days': '1', 'units': 5},
 {'days': '2', 'units': -10},
 {'days': '3', 'units': 2},
 {'days': '4', 'units':1}

 ]
 }

 });




app.js



Ext.application({
    name: 'myios',

    requires: [
        'Ext.MessageBox'
    ],

    views: [
      'Dashboard'
    ],
stores:[
'ChartStore'
],
    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
      
var pieChart = Ext.create('myios.view.Dashboard',{});
Ext.Viewport.add(pieChart);
    },

    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();
                }
            }
        );
    }
});








/*
IN SOME CASE CHART ANIMATION REQUIRES JS FILES
COPY THE NECESSARY JS FILES FROM TOUCH FOLDER TO YOUR PROJECT RESOURCE FOLDER AND ALSO MAP IT IN APP.JSON FILE 

        {
            "path": "resources/ItemHighlight.js",
            "update": "delta"
        }
 */
Labels:

Comments

Post a Comment

Popular posts from this blog

Bluetooth Chat Example

Manifest File <manifest xmlns:android="http://schemas.android.com/apk/res/android"       package="com.example.android.BluetoothChat"       android:versionCode="1"       android:versionName="1.0">     <uses-sdk minSdkVersion="7" />     <uses-permission android:name="android.permission.BLUETOOTH_ADMIN" />     <uses-permission android:name="android.permission.BLUETOOTH" />     <application android:label="@string/app_name"                  android:icon="@drawable/app_icon" >         <activity android:name=".BluetoothChat"                   android:label="@string/app_name"                   android:configChanges="orientation|keyboardHidden">             <intent-filter> ...
25 comments
Read more

Custom TextView With Images in Android

Create a custom XML Tag with image and text 1) Class extends Textview import java . util . regex . Matcher ; import java . util . regex . Pattern ; import android . content . Context ; import android . text . Spannable ; import android . text . style . ImageSpan ; import android . util . AttributeSet ; import android . util . Log ; import android . widget . TextView ; public class TextViewWithImages extends TextView { public TextViewWithImages ( Context context , AttributeSet attrs , int defStyle ) { super ( context , attrs , defStyle ); } public TextViewWithImages ( Context context , AttributeSet attrs ) { super ( context , attrs ); } public TextViewWithImages ( Context context ) { super ( context ); } @Override public void setText ( CharSequence text , BufferType type ) { Spannable s = getTextWithImages ( getContext (), text ); super . setText...
Post a Comment
Read more

AcceleroMeter Sensors with SurfaceMovements on Canvas

MainActivity.java import android.app.Activity; import android.content.Context; import android.graphics.Bitmap; import android.graphics.BitmapFactory; import android.graphics.Canvas; import android.hardware.Sensor; import android.hardware.SensorEvent; import android.hardware.SensorEventListener; import android.hardware.SensorManager; import android.os.Bundle; import android.util.Log; import android.view.SurfaceHolder; import android.view.SurfaceView; public class MainActivity extends Activity implements SensorEventListener { float x, y, sensorX, sensorY; Bitmap ball; SensorManager sm; Sensor s; MyBringBackSurface ourSurfaceView; /**  * Canvas Movement  */ public class MyBringBackSurface extends SurfaceView implements Runnable {     SurfaceHolder ourHolder;     Thread ourThread = null;     boolean isRunning = false;     public MyBringBackSurface(Context context) {         super(context)...
1 comment
Read more