Jump to content

Tooltip on chart


nandrianakis

Recommended Posts

Hello,

 

I need to display, client side,  label, value, percent as tooltip on a pie chart

 

Can you analyze, check this approach?

 

UniChart -> ClientEvents -> UniEvents -> function chart.beforeInit(sender, config):

function chart.beforeInit(sender, config)
{
    config.series[0].tooltip = {
        trackMouse: true,
        width: 120,
        renderer: function(tip, item) {
            tip.setTitle(item.get('LL'));
            tip.update('Value: ' + item.get('A'));
        }
    }
}
Link to comment
Share on other sites

With 2 line series is working only for the series[0]

with series[1] display values for series[0]

attached demo

 

A, B, C, ....

 

For the second series use "B":

function chart.beforeInit(sender, config) 
{
    config.series[1].tooltip = {
        trackMouse: true,
        width: 120,
        renderer: function(tip, item) {
            tip.setTitle(item.get('LL'));
            tip.update('Αγορές: ' + item.get('B'));
        }
    }

}
Link to comment
Share on other sites

In your code

renderer: function(tip, item) {
            tip.setTitle(item.get('LL'));
            tip.update('Αγορές: ' + item.get('B'));
        }

the parameter item has the get method with parameter 'LL' 'A' etc.

What other options there are for this parameter?

Link to comment
Share on other sites

OK i need also to display in tooltip the title of the series as appear in legend

Is this possible?

 

 

Do you want like this?!:

function chart.beforeInit(sender, config)
{
    config.series[1].tooltip = {
        trackMouse: true,
        width: 120,
        renderer: function(tip, item) {
            tip.setTitle(this.getTitle() + ': ' + item.get('LL'));
            tip.update('Αγορές: ' + item.get('B'));
        }
    };
}
Link to comment
Share on other sites

Solution for a "Stacked Bar":

function chart.beforeInit(sender, config)
{
    config.series[0].tooltip = {
        trackMouse: true,
        width: 120,
        renderer: function(tip, items, item) {
            tip.setTitle(this.getTitle()[items.getFields().map(function(obj){return obj.name;}).indexOf(item.field)-1] + ': ' + items.get('LL'));
            tip.update('Value: ' + items.get(item.field));
        }
    };
}
Link to comment
Share on other sites

  • 1 month later...

I am using to  display tooltip this:

function chart.beforeInit(sender, config)
{
 config.series[0].tooltip = 
  {
        trackMouse: true,
        width: 120,
        renderer: function(tip, item) 
        {
            tip.setTitle(item.get('LL'));
            tip.update('<b>' + Ext.util.Format.number(item.get('A').toFixed(2),'0,000.00')+'</b>');
        }
  }
}

I need also to show the percent

for example

if the title is 2015 and value is 10000 and that is 25% of the total 

Display something like this

2015

10,0000.00(25%)

Link to comment
Share on other sites

Try this:

function chart.beforeInit(sender, config) 
{
    config.series[0].tooltip = {
        trackMouse: true,
        width: 120,
        renderer: function(tip, item) {
            tip.setTitle(item.get('LL'));
            tip.update('<b>' + Ext.util.Format.number(item.get('A').toFixed(2), '0,000.00') +
                ' (' + ((item.get('A') / sender.store.max('A')) * 100).toFixed(2) + ' %)' +
                '</b>');
        }
    }
}
Link to comment
Share on other sites

Please sign in to comment

You will be able to leave a comment after signing in



Sign In Now
×
×
  • Create New...