Results 1 to 6 of 6

Thread: How to drill down a chart in ExtJs

Threaded View

Previous Post Previous Post   Next Post Next Post
  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

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
  •