Thank you for reporting this bug. We will make it our priority to review this report.
  1. #1
    Sencha User
    Join Date
    Sep 2011
    Posts
    2
    Vote Rating
    0
    patilsantoshk is on a distinguished road

      0  

    Default Unanswered: How to Heighlight Pie chart Item ( like tap-higjlight) on button click ?

    Unanswered: How to Heighlight Pie chart Item ( like tap-higjlight) on button click ?


    Hi All,

    I want to highlight pie-charts item (any one part of pie chart - like tap-highlight) on button click event.

    Can anyone please tell me how to achieve this ?

    Thanks in advance...

    Santosh P

  2. #2
    Sencha User
    Join Date
    Oct 2011
    Posts
    6
    Vote Rating
    0
    pgrandmont is on a distinguished road

      0  

    Default


    I'm also looking for a solution to highlight slice of a pie chart only on click

    What I have right now is a listener in the series section of my chart:
    Code:
                        series: [{
                                type: 'pie',
                                field: 'Count',
                                showInLegend: true,
    .....
                                highlight: false,
                        listeners: {
                                    itemmousedown: function (obj) {
                                        if (storeData.count() > 1) {
                                            Ext.apply(this, {
                                                highlightCfg: {
                                                    segment: {
                                                        margin: 20
                                                    }
                                                }
                                            });                                        
                                            this.highlightItem(obj);                                        
                                        }
                                    }
                                }
    but it's not working!

    How can I highlight slices on click

    PS: I also tryed this.highlightItem() who is supposed to hightlight the whole series, but it's not working!

    Thanx

    Phil

  3. #3
    Sencha User
    Join Date
    Sep 2011
    Posts
    2
    Vote Rating
    0
    patilsantoshk is on a distinguished road

      0  

    Default


    Hi Pgrandmont

    to achieve your requirement bellow interaction code is sufficient ... please check

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

    but as per my requirement i want to highlight slice of chart ( like it highlight on tap which is default behaviour) on a xtype:'button' item which is on another panel.

    For that i think i need to customize gesture:'tap' but i dont know how do i achive this

    i want to achieve this

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

    behavioral on this button

    var btnTap = new Ext.Button({
    text:'Tap Me',
    handler: function(button, event) {
    // highlight the chart's respective slice as per index
    }
    });

    Any logical help appreciable .....

    Thanks
    Santosh P

  4. #4
    Sencha User
    Join Date
    Sep 2012
    Posts
    1
    Vote Rating
    0
    newbie_extjs is on a distinguished road

      0  

    Default


    There is no intuitive way to do it. But found a way after spending one whole day on it!!!! But the solution is very simple

    First off, remove all the event listeners attached to mouseover and mouseout events of legend. I Also removed mousedown event as I didn't want the pie to merge. Then I removed itemmouseover event. attached this behavior to item click and voila!!!

    Here's the full code....

    <!DOCTYPE html>
    <html>
    <head>
    <meta http-equiv="content-type" content="text/html; charset=UTF-8">
    <title> </title>

    <script type='text/javascript' src='http://cdn.sencha.io/ext-4.1.1-gpl/ext-all.js'></script>




    <style type='text/css'>

    </style>





    <script type='text/javascript'>//<![CDATA[
    window.onload=function(){


    }//]]>


    </script>




    </head>
    <body>
    <script type="text/javascript">

    /////////////////////////////////////
    Ext.require(['Ext.data.*']);
    Ext.onReady(function() {
    window.generateData = function(n, floor){
    var data = [];
    data.push({ name: 'January' , data1: 1});
    data.push({ name: 'February' , data1: 2});
    return data;
    };
    window.store1 = Ext.create('Ext.data.JsonStore', {
    fields: ['name', 'data1', 'data2', 'data3', 'data4', 'data5', 'data6', 'data7', 'data9', 'data9'],
    data: generateData()
    });

    });

    ////////////////////////////////////
    Ext.require('Ext.chart.*');
    Ext.require('Ext.layout.container.Fit');
    Ext.require('Ext.chart.Highlight');


    Ext.onReady(function () {

    var data =generateData(6, 20);
    if(data.length>0)
    {
    store1.loadData(data);
    var donut = false,
    clicked_part,
    clicked_no,
    evnt ,
    panel1 = Ext.create('widget.panel', {
    height: 200,
    width: 245,
    renderTo: Ext.get('conversionChartInner'),
    layout: 'fit',
    items: {
    xtype: 'chart',
    id: 'chartCmpConversion',
    animate: true,
    store: store1,
    shadow: true,
    legend: {
    position: 'right'
    },
    insetPadding: 15,
    theme: 'Base:gradients',
    series: [{
    type: 'pie',
    field: 'data1',
    showInLegend: true,
    donut: donut,
    highlight : false,
    tips: {
    trackMouse: false,

    renderer: function(storeItem, item) {
    var total = 0;
    store1.each(function(rec) {
    total += rec.get('data1');
    });
    this.setTitle(storeItem.get('name') + ': ' + storeItem.get('data1') + '%');
    }
    },
    highlight: {
    segment: {
    margin: 20
    }
    },
    listeners: {
    itemclick: function(o){
    var obj= Ext.getCmp('chartCmpConversion');




    //o. getItemForPoint
    alert(o.storeItem.data['name'] + ' &' + o.storeItem.data['data1']);
    }
    },

    }]
    }
    });


    Ext.each(
    Ext.getCmp('chartCmpConversion')
    .legend.items, function(item) {
    item.un("mousedown", item.events.mousedown.listeners[0].fn);
    item.un("mouseover", item.events.mouseover.listeners[0].fn);
    item.un("mouseout", item.events.mouseout.listeners[0].fn);
    // item.addListener( "mousedown",evnt);
    });
    var obj= Ext.getCmp('chartCmpConversion');
    evnt=obj.events.mousemove.listeners[0].fn;
    obj.un("mousemove", obj.events.mousemove.listeners[0].fn);
    obj.addListener( "mousedown",evnt);


    }
    });


    </script>
    <div id="conversionChart">
    <div id="conversionChartInner">
    </div>
    </div>



    </body>




    </html>


  5. #5
    Sencha User
    Join Date
    Sep 2012
    Posts
    12
    Answers
    1
    Vote Rating
    0
    nm1 is on a distinguished road

      0  

    Default


    I was able to get the item highlight working with the following -

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

    series:[
    {
    ....
    highlight:{
    segment:{
    margin:20
    }
    },
    ....
    }
    ]

Turkiyenin en sevilen filmlerinin yer aldigi xnxx internet sitemiz olan ve porn sex tarzi bir site olan mobil porno izle sitemiz gercekten dillere destan bir durumda herkesin sevdigi bir site olarak tarihe gececege benziyor. Sitenin en belirgin ozelliklerinden birisi de Turkiyede gercekten kaliteli ve muntazam, duzenli porno izle siteleri olmamasidir. Bu yuzden iste. Ayrica en net goruntu kalitesine sahip adresinde yayinlanmaktadir. Mesela diğer sitelerimizden bahsedecek olursak, en iyi hd porno video arşivine sahip bir siteyiz. "The Best anal porn videos and slut anus, big asses movies set..."