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
    Vote Rating
    0
    Answers
    1
    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
    }
    },
    ....
    }
    ]