sencha touch charts tooltip display

1
votes

I am using Sencha touch donut chart. Now I am looking for tooltip display in donut charts sections. After I searched on internet, i found that there is no tooltip library in sencha touch charts like we do have in EXTJS.

please let me know if we can use EXTJS tooltip code into sencha touch charts, if not then please help me with some links, examples for sencha touch charts tooltips.

i am using this code in my sencha touch donut chart JS but this is not working:

   var tip = Ext.create('Ext.tip.ToolTip', {
        target: 'donut-chart',
        html: '<font size="2" color="white"><span style="padding-left:2px"><B>Electronics &nbsp;&nbsp; $15.3m</B></span> <br><br> <span style="padding-left:2px">%Total &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;13%</span></font>',
        width: 150,
        height: 6,
        Border: 'false',
        bodyStyle: 'background-color: teal;',
        style: 'background-color: white;opacity: 0.5;'
     }); 
     tip.showAt(200, 100);

please help...

Thanks!

2
extjssencha-touch-2

2 Answers

1
votes

In Sencha Touch Pie Charts, there's a property donut to set the pie chart as donut chart.

Default value is false. You can set this property to true

donut: true,

and then use the tips property of PieChart like this,

tips: {
  trackMouse: true,
  width: 140,
  height: 28,
  renderer: function(storeItem, item) {
    this.setTitle(storeItem.get('name') + ': ' + storeItem.get('data1') + ' views');
  }
},
1
votes

This is an old thread, but posting my solution as it might be helpful for someone.

I am using donut charts, so this solution works for me. What I did is a custom tooltip done with DIV element in HTML and position it based on the center of PIE.

Once DIV is ready and styled,

Under Items:[], create piegrouping and reposition your tooltip on onSelectionChange event of grouping as follows:

{
    type: 'piegrouping',
    onSelectionChange: function(me, items) {
        if (items.length) {
            if(items.length<2)
            {
                var tipX=items[0].middle.x - 35;
                var tipY=items[0].middle.y - 35;

                $('.tooltip').css('left', tipX + 'px');
                $('.tooltip').css('top', tipY + 'px');

                $('.tooltip h1').html(sum);
                $('.tooltip').fadeIn(500);
            } else {
                $('.tooltip').hide();
            }
        }
        else {
            $('.tooltip').hide();
        }
}