Hybrid View

  1. #1
    Sencha User
    Join Date
    Jan 2013
    Posts
    13
    Vote Rating
    0
    Jeet Chatterjee is on a distinguished road

      0  

    Default Unanswered: How to get the value of a column of a bar chart with an on click event ??

    Unanswered: How to get the value of a column of a bar chart with an on click event ??


    I have a bar column chart in a container. I made this chart using MVC. Now I want to add a click event on the chart so that when I click on the column of the chart, the value of the corresponding column will be displayed. This event should be placed in the controller... But, I cant do this.. please help me... This is my view .


    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',
    title:'barChart',
    height:300,
    width:Ext.getBody().getViewSize().width*0.6,

    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'
    } ]
    });


    and this is my controller

    Ext.define('Gamma.controller.ControlFile', {

    extend : 'Ext.app.Controller',

    //define the stores
    stores : ['BarColumn','RadarView','VoiceCallStore','SMSCallStore','MMSCallStore','GPRSUsageStore'],
    //define the models
    models : ['BarCol','radar','VoiceCallModel','SMSCallModel','MMSCallModel','GPRSUsageModel'],
    //define the views
    views : ['BarColumnChart','LineChart','RadarChart','VoicePie','SMSPie','MMSPie','GPRSPie'],


    init : function() {

    this.control({

    })
    }
    });

  2. #2
    Sencha - Support Team slemmon's Avatar
    Join Date
    Mar 2009
    Location
    Boise, ID
    Posts
    4,994
    Answers
    381
    Vote Rating
    183
    slemmon is a splendid one to behold slemmon is a splendid one to behold slemmon is a splendid one to behold slemmon is a splendid one to behold slemmon is a splendid one to behold slemmon is a splendid one to behold slemmon is a splendid one to behold slemmon is a splendid one to behold

      0  

    Default


    The series itself has an itemclick event that is raised when one of the items on the series is clicked (in this case a bar from the chart).

    You can place a listener directly on the series like this:
    Code:
    listeners: {
        itemclick: function (param) {
            console.log(param.storeItem.get(param.yField));
        }
    }
    If you want to manage the event from your controller you're going to have to either fire a custom even on itemclick and fire it against the chart or perhaps the controller itself or you can relay the series events to the chart and then just listen to itemclick on the chart itself.
    http://docs.sencha.com/extjs/4.2.0/#...od-relayEvents

  3. #3
    Sencha User
    Join Date
    Mar 2013
    Location
    Hyderabad
    Posts
    1
    Vote Rating
    0
    vinod.k461 is on a distinguished road

      0  

    Default


    in Controller u add like this:

    Ext.getCmp("coll").on("click",function(e){

    Ext.getCmp("coll").series.get(0).addEvents("itemclick");

    Ext.getCmp("coll").series.get(0).on("itemclick",function(a){

    var t=a.storeItem.get("name");
    alert("name");
    });


    });



    here coll means- the chart id