Results 1 to 6 of 6

Thread: How to drill down a chart in ExtJs

  1. #1

    Default How to drill down a chart in ExtJs

    This is my sample application,where i have one barChart and one radar and four pie charts.I have to drill down the barChart.I have previously developer an application where i did not use MVC and there i was able to drill-down the bar.But now i am using EXTJS MVC i can not understand where i should put the drill down code.. This is my previous barChart without MVC ..



    window.weekWiseData = function(n, floor){ var data = [],i; var weeks = ['Week1','Week2','Week3','Week4']; floor = (!floor && floor !== 0)? 20 : floor; for (i = 0; i < (n || 4); i++) { data.push({ name: weeks[i], 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() * 100), floor)), data4: Math.floor(Math.max((Math.random() * 100), floor)), data5: Math.floor(Math.max((Math.random() * 100), floor)), data6: Math.floor(Math.max((Math.random() * 100), floor)), data7: Math.floor(Math.max((Math.random() * 100), floor)), data8: Math.floor(Math.max((Math.random() * 100), floor)), data9: Math.floor(Math.max((Math.random() * 100), floor)) }); } return data;};var barWeekData;window.dayWiseData = function(n, floor){ var data = [],i; floor = (!floor && floor !== 0)? 20 : floor; for (i = 0; i < (n || 12); i++) { data.push({ name: Ext.Date.dayNames[i % 7], 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() * 100), floor)), data4: Math.floor(Math.max((Math.random() * 100), floor)), data5: Math.floor(Math.max((Math.random() * 100), floor)), data6: Math.floor(Math.max((Math.random() * 100), floor)), data7: Math.floor(Math.max((Math.random() * 100), floor)), data8: Math.floor(Math.max((Math.random() * 100), floor)), data9: Math.floor(Math.max((Math.random() * 100), floor)) }); } return data;};var barDayData;window.generateData = function(n, floor) {var data = [], i;floor = (!floor && floor !== 0) ? 20 : floor;for (i = 0; i < (n || 12); i++) { data.push({ name : Ext.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() * 100), floor)), data4 : Math.floor(Math.max((Math.random() * 100), floor)), data5 : Math.floor(Math.max((Math.random() * 100), floor)), data6 : Math.floor(Math.max((Math.random() * 100), floor)), data7 : Math.floor(Math.max((Math.random() * 100), floor)), data8 : Math.floor(Math.max((Math.random() * 100), floor)), data9 : Math.floor(Math.max((Math.random() * 100), floor)) });}return data;};var barMonData = generateData(5, 0);window.st = Ext.create('Ext.data.JsonStore', {fields : [ 'name', 'data1', 'data2', 'data3', 'data4', 'data5', 'data6', 'data7', 'data9', 'data9' ],data : barMonData});var baseColor = 'rgb(0,0,0)';var colors = ['url(#v-1)', 'url(#v-2)', 'url(#v-3)', 'url(#v-4)', 'url(#v-5)'];Ext.define('Ext.chart.theme.Fancy', {extend: 'Ext.chart.theme.Base',constructor: function(config) { this.callParent([Ext.apply({ axis: { fill: baseColor, stroke: baseColor }, axisLabelLeft: { fill: baseColor }, axisLabelBottom: { fill: baseColor }, axisTitleLeft: { fill: baseColor }, axisTitleBottom: { fill: baseColor }, colors: colors }, config)]);}});var bar = Ext.define('BarColumn', {extend : 'Ext.chart.Chart',alias : 'widget.BarColumn',xtype : 'chart',theme : 'Fancy',animate : { easing : 'bounceOut', duration : 750},store : st,background : { fill : 'none'},gradients : [ { 'id' : 'v-1', 'angle' : 0, stops : { 0 : { color : 'rgb(212, 40, 40)' }, 100 : { color : 'rgb(117, 14, 14)' } }}, { 'id' : 'v-2', 'angle' : 0, stops : { 0 : { color : 'rgb(180, 216, 42)' }, 100 : { color : 'rgb(94, 114, 13)' } }}, { 'id' : 'v-3', 'angle' : 0, stops : { 0 : { color : 'rgb(43, 221, 115)' }, 100 : { color : 'rgb(14, 117, 56)' } }}, { 'id' : 'v-4', 'angle' : 0, stops : { 0 : { color : 'rgb(45, 117, 226)' }, 100 : { color : 'rgb(14, 56, 117)' } }}, { 'id' : 'v-5', 'angle' : 0, stops : { 0 : { color : 'rgb(187, 45, 222)' }, 100 : { color : 'rgb(85, 10, 103)' } }} ],axes : [ { type : 'Numeric', position : 'left', fields : [ 'data1' ], minimum : 0, maximum : 100, label : { renderer : Ext.util.Format.numberRenderer('0,0') }, grid : { odd : { stroke : '#555' }, even : { stroke : '#555' } }}, { type : 'Category', position : 'bottom', fields : [ 'name' ]} ],series : [ { type : 'column', axis : 'left', highlight : true, label : { display : 'insideEnd', 'text-anchor' : 'middle', field : 'data1', orientation : 'horizontal', fill : '#fff', font : '17px Arial' },renderer : function(sprite, storeItem, barAttr, i, store) { barAttr.fill = colors[i % colors.length]; return barAttr; }, tips: { trackMouse: true, width: 120, height: 50, renderer: function(storeItem, item) { var message=''; if(upBarColFlag == false){message= 'Click Here to see Detailed Data';} else{message= 'Click Here to see Summarised Data';} this.setTitle( message); } }, style : { opacity : 0.95 }, listeners: { 'itemmouseup': function(o){ refreshGrid(o); } }, xField : 'name', yField : 'data1'} ]});var upBarColFlag =false; var counter =0;function refreshGrid(o){if(counter==0 && upBarColFlag == false){ barWeekData = weekWiseData(4, 20); st.loadData(barWeekData);}else if(counter==0 && upBarColFlag == true){ upBarColFlag = false; counter--; st.loadData(barMonData);}if(counter==1 && upBarColFlag == false){ upBarColFlag = true; counter++; barDayData = dayWiseData(7, 20); st.loadData(barDayData);}else if(counter==1 && upBarColFlag == true){ st.loadData(barWeekData);}if(upBarColFlag == false){ counter++;}else{ counter--;}}
    This was my barChart without MVC now i have created the application with MVC structure.This is my Controller file ....


    Ext.define('Gamma.controller.ControlFile', {extend : 'Ext.app.Controller',//define the storesstores : ['BarColumn','RadarView','VoiceCallStore','SMSCallStore','MMSCallStore','GPRSUsageStore'],//define the models models : ['BarCol','radar','VoiceCallModel','SMSCallModel','MMSCallModel','GPRSUsageModel'],//define the viewsviews : ['BarColumnChart','LineChart','RadarChart','VoicePie','SMSPie','MMSPie','GPRSPie'], refs: [{ ref: 'radar', selector: 'radarChart'},{ ref: 'sms', selector: 'smsPie'},{ ref: 'gprs', selector: 'gprsPie'},{ ref: 'mms', selector: 'mmsPie'},{ ref: 'voice', selector: 'voicePie'}],initializedEvents: false,init: function() { this.control({ '#barColumnChart': { afterlayout: this.afterChartLayout } });},afterChartLayout: function(){ var me=this; if(this.initializedEvents==true) return; this.initializedEvents=true; Ext.getCmp('barColumnChart').series.items[0].on('itemmousedown',function(obj){ // alert(obj.storeItem.data['source']+ ' &' + obj.storeItem.data['count']); // var barData=obj.storeItem.data['source']+ ' &' + obj.storeItem.data['count']; var source=obj.storeItem.data['source']; var count=obj.storeItem.data['count']; me.dataBaseCall(source,count); });}
    And this is my View File...



    var baseColor = 'rgb(0,0,0)';var colors = ['url(#v-1)','url(#v-2)','url(#v-3)','url(#v-4)', 'url(#v-5)'];Ext.define('Ext.chart.theme.Fancy', {extend: 'Ext.chart.theme.Base',constructor: function(config) { this.callParent([Ext.apply({ axis: { fill: baseColor, stroke: baseColor }, axisLabelLeft: { fill: baseColor }, axisLabelBottom: { fill: baseColor }, axisTitleLeft: { fill: baseColor }, axisTitleBottom: { fill: baseColor }, colors: colors }, config)]);}}); var bar=Ext.define('Gamma.view.BarColumnChart', {extend: 'Ext.chart.Chart',alias : 'widget.barColumnChart',height:300,width:Ext.getBody().getViewSize().width*0.6,id:'barColumnChart',xtype : 'chart',theme : 'Fancy',animate : { easing : 'bounceOut', duration : 750},store : 'BarColumn',background : { fill : 'none'},gradients : [ { 'id' : 'v-1', 'angle' : 0, stops : { 0 : { color : 'rgb(212, 40, 40)' }, 100 : { color : 'rgb(117, 14, 14)' } } }, { 'id' : 'v-2', 'angle' : 0, stops : { 0 : { color : 'rgb(180, 216, 42)' }, 100 : { color : 'rgb(94, 114, 13)' } } }, { 'id' : 'v-3', 'angle' : 0, stops : { 0 : { color : 'rgb(43, 221, 115)' }, 100 : { color : 'rgb(14, 117, 56)' } } }, { 'id' : 'v-4', 'angle' : 0, stops : { 0 : { color : 'rgb(45, 117, 226)' }, 100 : { color : 'rgb(14, 56, 117)' } } }, { 'id' : 'v-5', 'angle' : 0, stops : { 0 : { color : 'rgb(187, 45, 222)' }, 100 : { color : 'rgb(85, 10, 103)' } } } ],axes : [ { type : 'Numeric', position : 'left', fields : [ 'count' ], minimum : 0, maximum : 3000, label : { renderer : Ext.util.Format.numberRenderer('0,0') }, grid : { odd : { stroke : '#555' }, even : { stroke : '#555' } }}, { type : 'Category', position : 'bottom', fields : [ 'source' ]} ],series : [ { type : 'column', axis : 'left', seriesId: 'col', highlight : true, label : { display : 'insideEnd', 'text-anchor' : 'middle', field : 'count', orientation : 'horizontal', fill : '#fff', font : '12px Arial' }, renderer : function(sprite, storeItem, barAttr, i, store) { barAttr.fill = colors[i % colors.length]; return barAttr; }, style : { opacity : 0.95 }, xField : 'source', yField : 'count'} ],afterComponentLayout: function(width, height, oldWidth, oldHeight) { this.callParent(arguments); this.fireEvent('afterlayout', this);}});
    Attached Images Attached Images

  2. #2
    Sencha User slemmon's Avatar
    Join Date
    Mar 2009
    Location
    Boise, ID
    Posts
    6,165
    Answers
    505

    Default

    Your posts with all of the code displayed run together is difficult to read. You might get more response from the community if you format your code using something like jsbeautifier and wrap your code in code blocks (highlight the formatted code and click on the # button above to wrap the code example in code blocks).

    Speaking generally, an application not in MVC and one in MVC won't be terrible different other than the logic for processing events will not be described in the view components themselves, but rather in controllers' control (or listen) methods. That said, the series events are fired on classes that aren't 'components' so you can't listen to the series events directly within the controller. I see folks continue to manage chart series events within the chart component directly or relay series events up to the owning chart since the chart can be listened to from the controller.

  3. #3

    Default

    slemon can you tell me what should i do to drill down a bar chart. i am posing this in jsbeautifier. but it will be very helpful if you put some light on it

  4. #4

    Default

    //This is my sample application,where i have one barChart and one radar and four pie charts.I have to drill down the barChart.I have previously developer an application where i did not use MVC and there i was able to drill-down the bar.But now i am using EXTJS MVC i can not understand where i should put the drill down code.. This is my previous barChart without MVC ..
    window.weekWiseData = function (n, floor) {
    var data = [],
    i;
    var weeks = ['Week1', 'Week2', 'Week3', 'Week4'];
    floor = (!floor && floor !== 0) ? 20 : floor;
    for (i = 0; i < (n || 4); i++) {
    data.push({
    name: weeks[i],
    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() * 100), floor)),
    data4: Math.floor(Math.max((Math.random() * 100), floor)),
    data5: Math.floor(Math.max((Math.random() * 100), floor)),
    data6: Math.floor(Math.max((Math.random() * 100), floor)),
    data7: Math.floor(Math.max((Math.random() * 100), floor)),
    data8: Math.floor(Math.max((Math.random() * 100), floor)),
    data9: Math.floor(Math.max((Math.random() * 100), floor))
    });
    }
    return data;
    };


    var barWeekData;




    window.dayWiseData = function (n, floor) {
    var data = [],
    i;
    floor = (!floor && floor !== 0) ? 20 : floor;
    for (i = 0; i < (n || 12); i++) {
    data.push({
    name: Ext.Date.dayNames[i % 7],
    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() * 100), floor)),
    data4: Math.floor(Math.max((Math.random() * 100), floor)),
    data5: Math.floor(Math.max((Math.random() * 100), floor)),
    data6: Math.floor(Math.max((Math.random() * 100), floor)),
    data7: Math.floor(Math.max((Math.random() * 100), floor)),
    data8: Math.floor(Math.max((Math.random() * 100), floor)),
    data9: Math.floor(Math.max((Math.random() * 100), floor))
    });
    }
    return data;
    };


    var barDayData;




    window.generateData = function (n, floor) {
    var data = [],
    i;
    floor = (!floor && floor !== 0) ? 20 : floor;
    for (i = 0; i < (n || 12); i++) {
    data.push({
    name: Ext.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() * 100), floor)),
    data4: Math.floor(Math.max((Math.random() * 100), floor)),
    data5: Math.floor(Math.max((Math.random() * 100), floor)),
    data6: Math.floor(Math.max((Math.random() * 100), floor)),
    data7: Math.floor(Math.max((Math.random() * 100), floor)),
    data8: Math.floor(Math.max((Math.random() * 100), floor)),
    data9: Math.floor(Math.max((Math.random() * 100), floor))
    });
    }
    return data;
    };




    var barMonData = generateData(5, 0);


    window.st = Ext.create('Ext.data.JsonStore', {
    fields: ['name', 'data1', 'data2', 'data3', 'data4', 'data5', 'data6',
    'data7', 'data9', 'data9'
    ],
    data: barMonData
    });




    var baseColor = 'rgb(0,0,0)';


    var colors = ['url(#v-1)',
    'url(#v-2)',
    'url(#v-3)',
    'url(#v-4)',
    'url(#v-5)'
    ];




    Ext.define('Ext.chart.theme.Fancy', {
    extend: 'Ext.chart.theme.Base',


    constructor: function (config) {
    this.callParent([Ext.apply({
    axis: {
    fill: baseColor,
    stroke: baseColor
    },
    axisLabelLeft: {
    fill: baseColor
    },
    axisLabelBottom: {
    fill: baseColor
    },
    axisTitleLeft: {
    fill: baseColor
    },
    axisTitleBottom: {
    fill: baseColor
    },
    colors: colors
    }, config)]);
    }
    });




    var bar = Ext.define('BarColumn', {
    extend: 'Ext.chart.Chart',
    alias: 'widget.BarColumn',
    xtype: 'chart',
    theme: 'Fancy',
    animate: {
    easing: 'bounceOut',
    duration: 750
    },
    store: st,
    background: {
    fill: 'none'
    },




    gradients: [{
    'id': 'v-1',
    'angle': 0,
    stops: {
    0: {
    color: 'rgb(212, 40, 40)'
    },
    100: {
    color: 'rgb(117, 14, 14)'
    }
    }
    },


    {
    'id': 'v-2',
    'angle': 0,
    stops: {
    0: {
    color: 'rgb(180, 216, 42)'
    },
    100: {
    color: 'rgb(94, 114, 13)'
    }
    }
    }, {
    'id': 'v-3',
    'angle': 0,
    stops: {
    0: {
    color: 'rgb(43, 221, 115)'
    },
    100: {
    color: 'rgb(14, 117, 56)'
    }
    }
    }, {
    'id': 'v-4',
    'angle': 0,
    stops: {
    0: {
    color: 'rgb(45, 117, 226)'
    },
    100: {
    color: 'rgb(14, 56, 117)'
    }
    }
    }, {
    'id': 'v-5',
    'angle': 0,
    stops: {
    0: {
    color: 'rgb(187, 45, 222)'
    },
    100: {
    color: 'rgb(85, 10, 103)'
    }
    }
    }
    ],


    axes: [{
    type: 'Numeric',
    position: 'left',
    fields: ['data1'],
    minimum: 0,
    maximum: 100,
    label: {
    renderer: Ext.util.Format.numberRenderer('0,0')
    },
    grid: {
    odd: {
    stroke: '#555'
    },
    even: {
    stroke: '#555'
    }
    }
    }, {
    type: 'Category',
    position: 'bottom',
    fields: ['name']
    }
    ],


    series: [{
    type: 'column',
    axis: 'left',
    highlight: true,
    label: {
    display: 'insideEnd',
    'text-anchor': 'middle',
    field: 'data1',
    orientation: 'horizontal',
    fill: '#fff',
    font: '17px Arial'
    },


    renderer: function (sprite, storeItem, barAttr, i, store) {
    barAttr.fill = colors[i % colors.length];


    return barAttr;
    },
    tips: {
    trackMouse: true,
    width: 120,
    height: 50,
    renderer: function (storeItem, item) {
    var message = '';
    if (upBarColFlag == false) {
    message = 'Click Here to see Detailed Data';
    } else {
    message = 'Click Here to see Summarised Data';
    }
    this.setTitle(message);


    }
    },


    style: {
    opacity: 0.95
    },
    listeners: {
    'itemmouseup': function (o) {
    refreshGrid(o);
    }
    },
    xField: 'name',
    yField: 'data1'
    }
    ]


    });


    var upBarColFlag = false;


    var counter = 0;


    function refreshGrid(o) {
    if (counter == 0 && upBarColFlag == false) {
    barWeekData = weekWiseData(4, 20);
    st.loadData(barWeekData);
    } else if (counter == 0 && upBarColFlag == true) {
    upBarColFlag = false;
    counter--;
    st.loadData(barMonData);
    }
    if (counter == 1 && upBarColFlag == false) {
    upBarColFlag = true;
    counter++;
    barDayData = dayWiseData(7, 20);
    st.loadData(barDayData);
    } else if (counter == 1 && upBarColFlag == true) {


    st.loadData(barWeekData);
    }
    if (upBarColFlag == false) {
    counter++;
    } else {
    counter--;
    }


    }


    //This was my barChart without MVC now i have created the application with MVC structure.This is my Controller file ....
    Ext.define('Gamma.controller.ControlFile', {


    extend: 'Ext.app.Controller',


    //define the stores
    stores: ['BarColumn', 'RadarView', 'VoiceCallStore', 'SMSCallStore', 'MMSCallStore', 'GPRSUsageStore'],




    models: ['BarCol', 'radar', 'VoiceCallModel', 'SMSCallModel', 'MMSCallModel', 'GPRSUsageModel'],


    views: ['BarColumnChart', 'LineChart', 'RadarChart', 'VoicePie', 'SMSPie', 'MMSPie', 'GPRSPie'],


    refs: [{
    ref: 'radar',
    selector: 'radarChart'
    }, {
    ref: 'sms',
    selector: 'smsPie'
    }, {
    ref: 'gprs',
    selector: 'gprsPie'
    }, {
    ref: 'mms',
    selector: 'mmsPie'
    }, {
    ref: 'voice',
    selector: 'voicePie'
    }
    ],


    initializedEvents: false,
    init: function () {
    this.control({
    '#barColumnChart': {
    afterlayout: this.afterChartLayout
    }
    });
    },
    afterChartLayout: function () {
    var me = this;
    if (this.initializedEvents == true) return;
    this.initializedEvents = true;
    Ext.getCmp('barColumnChart').series.items[0].on('itemmousedown', function (obj) {








    // alert(obj.storeItem.data['source']+ ' &' + obj.storeItem.data['count']);


    // var barData=obj.storeItem.data['source']+ ' &' + obj.storeItem.data['count'];
    var source = obj.storeItem.data['source'];
    var count = obj.storeItem.data['count'];
    me.dataBaseCall(source, count);
    });
    //And this is my View File...


    var baseColor = 'rgb(0,0,0)';


    var colors = ['url(#v-1)',
    'url(#v-2)',
    'url(#v-3)',
    'url(#v-4)',
    'url(#v-5)'
    ];


    Ext.define('Ext.chart.theme.Fancy', {
    extend: 'Ext.chart.theme.Base',


    constructor: function (config) {
    this.callParent([Ext.apply({
    axis: {
    fill: baseColor,
    stroke: baseColor
    },
    axisLabelLeft: {
    fill: baseColor
    },
    axisLabelBottom: {
    fill: baseColor
    },
    axisTitleLeft: {
    fill: baseColor
    },
    axisTitleBottom: {
    fill: baseColor
    },
    colors: colors


    config)]);




    });






    var bar = Ext.define('Gamma.view.BarColumnChart', {
    extend: 'Ext.chart.Chart',
    alias: 'widget.barColumnChart',
    height: 300,
    width: Ext.getBody().getViewSize().width * 0.6,
    id: 'barColumnChart',
    xtype: 'chart',
    theme: 'Fancy',
    animate: {
    easing: 'bounceOut',
    duration: 750
    },
    store: 'BarColumn',
    background: {
    fill: 'none'
    },
    gradients: [{
    'id': 'v-1',


    'angle': 0,
    stops: {
    0: {
    color: 'rgb(212, 40, 40)'
    },
    100: {
    color: 'rgb(117, 14, 14)'
    }
    }
    }, {
    'id': 'v-2',
    'angle': 0,
    stops: {
    0: {
    color: 'rgb(180, 216, 42)'
    },
    100: {
    color: 'rgb(94, 114, 13)'
    }
    }
    },


    {
    'id': 'v-3',
    'angle': 0,
    stops: {
    0: {
    color: 'rgb(43, 221, 115)'
    },
    100: {
    color: 'rgb(14, 117, 56)'
    }
    }
    }, {


    'id': 'v-4',
    'angle': 0,
    stops: {
    0: {
    color: 'rgb(45, 117, 226)'
    },
    100: {
    color: 'rgb(14, 56, 117)'
    }
    }


    }, {
    'id': 'v-5',
    'angle': 0,
    stops: {
    0: {
    color: 'rgb(187, 45, 222)'
    },
    100: {
    color: 'rgb(85, 10, 103)'






    }],
    axes: [{
    type: 'Numeric',
    position: 'left',
    fields: ['count'],
    minimum: 0,
    maximum: 3000,
    label: {
    renderer: Ext.util.Format.numberRenderer('0,0')
    },
    grid: {
    odd: {
    stroke: '#555'
    },
    even: {
    stroke: '#555'
    }
    }
    }, {




    type: 'Category',
    position: 'bottom',
    fields: ['source']
    }
    ],


    series: [{


    type: 'column',
    axis: 'left',
    seriesId: 'col',
    highlight: true,
    label: {
    display: 'insideEnd',
    'text-anchor': 'middle',
    field: 'count',
    orientation: 'horizontal',
    fill: '#fff',
    font: '12px Arial'
    },
    renderer: function (sprite, storeItem, barAttr, i, store) {
    barAttr.fill = colors[i % colors.length];
    return barAttr;
    },






    style: {
    opacity: 0.95
    },
    xField: 'source',
    yField: 'count'
    }
    ],


    afterComponentLayout: function (width, height, oldWidth, oldHeight) {
    this.callParent(arguments);
    this.fireEvent('afterlayout', this);
    }
    });
    //And this is my store..


    Ext.define('Gamma.store.BarColumn', {
    extend: 'Ext.data.Store',
    model: 'Gamma.model.BarCol',
    autoLoad: true,
    pageSize: 100,
    id: 'BarColumn',




    proxy: {
    type: 'ajax',
    url: 'CallRatiosAnalysis?methodName=callAnalysis',
    reader: {
    type: 'json',
    root: 'topList',
    totalProperty: 'totalCount',
    successProperty: 'success'
    }
    }


    });

  5. #5
    Sencha User slemmon's Avatar
    Join Date
    Mar 2009
    Location
    Boise, ID
    Posts
    6,165
    Answers
    505

    Default

    Is it just the handling of the series itemmouseup event that you're struggling with at this point?

    Also, if you format the code in jsbeautifier and then wrap the code in code blocks using the # button above then it will make your code much easier for the community to read.

    Code:
    window.weekWiseData = function (n, floor) {
        var data = [],
            i;
        var weeks = ['Week1', 'Week2', 'Week3', 'Week4'];
        floor = (!floor && floor !== 0) ? 20 : floor;
        for (i = 0; i < (n || 4); i++) {
            data.push({
                name: weeks[i],
                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() * 100), floor)),
                data4: Math.floor(Math.max((Math.random() * 100), floor)),
                data5: Math.floor(Math.max((Math.random() * 100), floor)),
                data6: Math.floor(Math.max((Math.random() * 100), floor)),
                data7: Math.floor(Math.max((Math.random() * 100), floor)),
                data8: Math.floor(Math.max((Math.random() * 100), floor)),
                data9: Math.floor(Math.max((Math.random() * 100), floor))
            });
        }
        return data;
    };
    
    
    
    
    var barWeekData;
    
    
    
    
    
    
    
    
    window.dayWiseData = function (n, floor) {
        var data = [],
            i;
        floor = (!floor && floor !== 0) ? 20 : floor;
        for (i = 0; i < (n || 12); i++) {
            data.push({
                name: Ext.Date.dayNames[i % 7],
                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() * 100), floor)),
                data4: Math.floor(Math.max((Math.random() * 100), floor)),
                data5: Math.floor(Math.max((Math.random() * 100), floor)),
                data6: Math.floor(Math.max((Math.random() * 100), floor)),
                data7: Math.floor(Math.max((Math.random() * 100), floor)),
                data8: Math.floor(Math.max((Math.random() * 100), floor)),
                data9: Math.floor(Math.max((Math.random() * 100), floor))
            });
        }
        return data;
    };
    
    
    
    
    var barDayData;
    
    
    
    
    
    
    
    
    window.generateData = function (n, floor) {
        var data = [],
            i;
        floor = (!floor && floor !== 0) ? 20 : floor;
        for (i = 0; i < (n || 12); i++) {
            data.push({
                name: Ext.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() * 100), floor)),
                data4: Math.floor(Math.max((Math.random() * 100), floor)),
                data5: Math.floor(Math.max((Math.random() * 100), floor)),
                data6: Math.floor(Math.max((Math.random() * 100), floor)),
                data7: Math.floor(Math.max((Math.random() * 100), floor)),
                data8: Math.floor(Math.max((Math.random() * 100), floor)),
                data9: Math.floor(Math.max((Math.random() * 100), floor))
            });
        }
        return data;
    };
    
    
    
    
    
    
    
    
    var barMonData = generateData(5, 0);
    
    
    
    
    window.st = Ext.create('Ext.data.JsonStore', {
        fields: ['name', 'data1', 'data2', 'data3', 'data4', 'data5', 'data6',
                'data7', 'data9', 'data9'
        ],
        data: barMonData
    });
    
    
    
    
    
    
    
    
    var baseColor = 'rgb(0,0,0)';
    
    
    
    
    var colors = ['url(#v-1)',
            'url(#v-2)',
            'url(#v-3)',
            'url(#v-4)',
            'url(#v-5)'
    ];
    
    
    
    
    
    
    
    
    Ext.define('Ext.chart.theme.Fancy', {
        extend: 'Ext.chart.theme.Base',
    
    
    
    
        constructor: function (config) {
            this.callParent([Ext.apply({
                    axis: {
                        fill: baseColor,
                        stroke: baseColor
                    },
                    axisLabelLeft: {
                        fill: baseColor
                    },
                    axisLabelBottom: {
                        fill: baseColor
                    },
                    axisTitleLeft: {
                        fill: baseColor
                    },
                    axisTitleBottom: {
                        fill: baseColor
                    },
                    colors: colors
                }, config)]);
        }
    });
    
    
    
    
    
    
    
    
    var bar = Ext.define('BarColumn', {
        extend: 'Ext.chart.Chart',
        alias: 'widget.BarColumn',
        xtype: 'chart',
        theme: 'Fancy',
        animate: {
            easing: 'bounceOut',
            duration: 750
        },
        store: st,
        background: {
            fill: 'none'
        },
    
    
    
    
    
    
    
    
        gradients: [{
                'id': 'v-1',
                'angle': 0,
                stops: {
                    0: {
                        color: 'rgb(212, 40, 40)'
                    },
                    100: {
                        color: 'rgb(117, 14, 14)'
                    }
                }
            },
    
    
    
    
            {
                'id': 'v-2',
                'angle': 0,
                stops: {
                    0: {
                        color: 'rgb(180, 216, 42)'
                    },
                    100: {
                        color: 'rgb(94, 114, 13)'
                    }
                }
            }, {
                'id': 'v-3',
                'angle': 0,
                stops: {
                    0: {
                        color: 'rgb(43, 221, 115)'
                    },
                    100: {
                        color: 'rgb(14, 117, 56)'
                    }
                }
            }, {
                'id': 'v-4',
                'angle': 0,
                stops: {
                    0: {
                        color: 'rgb(45, 117, 226)'
                    },
                    100: {
                        color: 'rgb(14, 56, 117)'
                    }
                }
            }, {
                'id': 'v-5',
                'angle': 0,
                stops: {
                    0: {
                        color: 'rgb(187, 45, 222)'
                    },
                    100: {
                        color: 'rgb(85, 10, 103)'
                    }
                }
            }
        ],
    
    
    
    
        axes: [{
                type: 'Numeric',
                position: 'left',
                fields: ['data1'],
                minimum: 0,
                maximum: 100,
                label: {
                    renderer: Ext.util.Format.numberRenderer('0,0')
                },
                grid: {
                    odd: {
                        stroke: '#555'
                    },
                    even: {
                        stroke: '#555'
                    }
                }
            }, {
                type: 'Category',
                position: 'bottom',
                fields: ['name']
            }
        ],
    
    
    
    
        series: [{
                type: 'column',
                axis: 'left',
                highlight: true,
                label: {
                    display: 'insideEnd',
                    'text-anchor': 'middle',
                    field: 'data1',
                    orientation: 'horizontal',
                    fill: '#fff',
                    font: '17px Arial'
                },
    
    
    
    
                renderer: function (sprite, storeItem, barAttr, i, store) {
                    barAttr.fill = colors[i % colors.length];
    
    
    
    
                    return barAttr;
                },
                tips: {
                    trackMouse: true,
                    width: 120,
                    height: 50,
                    renderer: function (storeItem, item) {
                        var message = '';
                        if (upBarColFlag == false) {
                            message = 'Click Here to see Detailed Data';
                        } else {
                            message = 'Click Here to see Summarised Data';
                        }
                        this.setTitle(message);
    
    
    
    
                    }
                },
    
    
    
    
                style: {
                    opacity: 0.95
                },
                listeners: {
                    'itemmouseup': function (o) {
                        refreshGrid(o);
                    }
                },
                xField: 'name',
                yField: 'data1'
            }
        ]
    
    
    
    
    });
    
    
    
    
    var upBarColFlag = false;
    
    
    
    
    var counter = 0;
    
    
    
    
    function refreshGrid(o) {
        if (counter == 0 && upBarColFlag == false) {
            barWeekData = weekWiseData(4, 20);
            st.loadData(barWeekData);
        } else if (counter == 0 && upBarColFlag == true) {
            upBarColFlag = false;
            counter--;
            st.loadData(barMonData);
        }
        if (counter == 1 && upBarColFlag == false) {
            upBarColFlag = true;
            counter++;
            barDayData = dayWiseData(7, 20);
            st.loadData(barDayData);
        } else if (counter == 1 && upBarColFlag == true) {
    
    
    
    
            st.loadData(barWeekData);
        }
        if (upBarColFlag == false) {
            counter++;
        } else {
            counter--;
        }
    
    
    
    
    }
    
    
    
    
    //This was my barChart without MVC now i have created the application with MVC structure.This is my Controller file ....
    Ext.define('Gamma.controller.ControlFile', {
    
    
    
    
        extend: 'Ext.app.Controller',
    
    
    
    
        //define the stores
        stores: ['BarColumn', 'RadarView', 'VoiceCallStore', 'SMSCallStore', 'MMSCallStore', 'GPRSUsageStore'],
    
    
    
    
    
    
    
    
        models: ['BarCol', 'radar', 'VoiceCallModel', 'SMSCallModel', 'MMSCallModel', 'GPRSUsageModel'],
    
    
    
    
        views: ['BarColumnChart', 'LineChart', 'RadarChart', 'VoicePie', 'SMSPie', 'MMSPie', 'GPRSPie'],
    
    
    
    
        refs: [{
                ref: 'radar',
                selector: 'radarChart'
            }, {
                ref: 'sms',
                selector: 'smsPie'
            }, {
                ref: 'gprs',
                selector: 'gprsPie'
            }, {
                ref: 'mms',
                selector: 'mmsPie'
            }, {
                ref: 'voice',
                selector: 'voicePie'
            }
        ],
    
    
    
    
        initializedEvents: false,
        init: function () {
            this.control({
                '#barColumnChart': {
                    afterlayout: this.afterChartLayout
                }
            });
        },
        afterChartLayout: function () {
            var me = this;
            if (this.initializedEvents == true) return;
            this.initializedEvents = true;
            Ext.getCmp('barColumnChart').series.items[0].on('itemmousedown', function (obj) {
    
    
    
    
    
    
    
    
                // alert(obj.storeItem.data['source']+ ' &' + obj.storeItem.data['count']);
    
    
    
    
                // var barData=obj.storeItem.data['source']+ ' &' + obj.storeItem.data['count'];
                var source = obj.storeItem.data['source'];
                var count = obj.storeItem.data['count'];
                me.dataBaseCall(source, count);
            });
            //And this is my View File...
    
    
    
    
            var baseColor = 'rgb(0,0,0)';
    
    
    
    
            var colors = ['url(#v-1)',
                    'url(#v-2)',
                    'url(#v-3)',
                    'url(#v-4)',
                    'url(#v-5)'
            ];
    
    
    
    
            Ext.define('Ext.chart.theme.Fancy', {
                extend: 'Ext.chart.theme.Base',
    
    
    
    
                constructor: function (config) {
                    this.callParent([Ext.apply({
                            axis: {
                                fill: baseColor,
                                stroke: baseColor
                            },
                            axisLabelLeft: {
                                fill: baseColor
                            },
                            axisLabelBottom: {
                                fill: baseColor
                            },
                            axisTitleLeft: {
                                fill: baseColor
                            },
                            axisTitleBottom: {
                                fill: baseColor
                            },
                            colors: colors
    
    
    
    
                            config)]);
    
    
    
    
    
    
    
    
                    });
    
    
    
    
    
    
    
    
                var bar = Ext.define('Gamma.view.BarColumnChart', {
                    extend: 'Ext.chart.Chart',
                    alias: 'widget.barColumnChart',
                    height: 300,
                    width: Ext.getBody().getViewSize().width * 0.6,
                    id: 'barColumnChart',
                    xtype: 'chart',
                    theme: 'Fancy',
                    animate: {
                        easing: 'bounceOut',
                        duration: 750
                    },
                    store: 'BarColumn',
                    background: {
                        fill: 'none'
                    },
                    gradients: [{
                            'id': 'v-1',
    
    
    
    
                            'angle': 0,
                            stops: {
                                0: {
                                    color: 'rgb(212, 40, 40)'
                                },
                                100: {
                                    color: 'rgb(117, 14, 14)'
                                }
                            }
                        }, {
                            'id': 'v-2',
                            'angle': 0,
                            stops: {
                                0: {
                                    color: 'rgb(180, 216, 42)'
                                },
                                100: {
                                    color: 'rgb(94, 114, 13)'
                                }
                            }
                        },
    
    
    
    
                        {
                            'id': 'v-3',
                            'angle': 0,
                            stops: {
                                0: {
                                    color: 'rgb(43, 221, 115)'
                                },
                                100: {
                                    color: 'rgb(14, 117, 56)'
                                }
                            }
                        }, {
    
    
    
    
                            'id': 'v-4',
                            'angle': 0,
                            stops: {
                                0: {
                                    color: 'rgb(45, 117, 226)'
                                },
                                100: {
                                    color: 'rgb(14, 56, 117)'
                                }
                            }
    
    
    
    
                        }, {
                            'id': 'v-5',
                            'angle': 0,
                            stops: {
                                0: {
                                    color: 'rgb(187, 45, 222)'
                                },
                                100: {
                                    color: 'rgb(85, 10, 103)'
    
    
    
    
    
    
    
    
                                }],
                            axes: [{
                                    type: 'Numeric',
                                    position: 'left',
                                    fields: ['count'],
                                    minimum: 0,
                                    maximum: 3000,
                                    label: {
                                        renderer: Ext.util.Format.numberRenderer('0,0')
                                    },
                                    grid: {
                                        odd: {
                                            stroke: '#555'
                                        },
                                        even: {
                                            stroke: '#555'
                                        }
                                    }
                                }, {
    
    
    
    
    
    
    
    
                                    type: 'Category',
                                    position: 'bottom',
                                    fields: ['source']
                                }
                            ],
    
    
    
    
                            series: [{
    
    
    
    
                                    type: 'column',
                                    axis: 'left',
                                    seriesId: 'col',
                                    highlight: true,
                                    label: {
                                        display: 'insideEnd',
                                        'text-anchor': 'middle',
                                        field: 'count',
                                        orientation: 'horizontal',
                                        fill: '#fff',
                                        font: '12px Arial'
                                    },
                                    renderer: function (sprite, storeItem, barAttr, i, store) {
                                        barAttr.fill = colors[i % colors.length];
                                        return barAttr;
                                    },
    
    
    
    
    
    
    
    
                                    style: {
                                        opacity: 0.95
                                    },
                                    xField: 'source',
                                    yField: 'count'
                                }
                            ],
    
    
    
    
                            afterComponentLayout: function (width, height, oldWidth, oldHeight) {
                                this.callParent(arguments);
                                this.fireEvent('afterlayout', this);
                            }
                        });
                    //And this is my store..
    
    
    
    
                    Ext.define('Gamma.store.BarColumn', {
                        extend: 'Ext.data.Store',
                        model: 'Gamma.model.BarCol',
                        autoLoad: true,
                        pageSize: 100,
                        id: 'BarColumn',
    
    
    
    
    
    
    
    
                        proxy: {
                            type: 'ajax',
                            url: 'CallRatiosAnalysis?methodName=callAnalysis',
                            reader: {
                                type: 'json',
                                root: 'topList',
                                totalProperty: 'totalCount',
                                successProperty: 'success'
                            }
                        }
    
    
    
    
                    });

  6. #6

    Default

    yah i did that with jsbeautifier are you able to read code now??

Tags for this Thread

Posting Permissions

  • You may not post new threads
  • You may not post replies
  • You may not post attachments
  • You may not edit your posts
  •