Jump to content
uniGUI Discussion Forums
nandrianakis

Tooltip on chart

Recommended Posts

Good morning

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

Also on chart with 2 line series on mouseover on marker

Any idea how can i do this?

Rgs

NA.

Share this post


Link to post
Share on other sites

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

Share this post


Link to post
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

Share this post


Link to post
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'));
        }
    }

}

Share this post


Link to post
Share on other sites
OK this works

But i have some questions

what 'LL' means?

what more options are with item.get('something')?

where can i found the documentation?

Thanks

Share this post


Link to post
Share on other sites
Goog Morning  

 

Anything about my question?

I need also the Series title, and the percent of the pie chart

 

thanks

NA.

Share this post


Link to post
Share on other sites

Goog Morning,

 

Sorry, can you please explain in more detail what you wanted ?

Share this post


Link to post
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?

Share this post


Link to post
Share on other sites

Well, the get method parameters can only be:

 

LL - XLabel value

 

YValues:

  A - Series0

  B - Series1

  C - Series2

...

Share this post


Link to post
Share on other sites

Thank you

OK i need also to display in tooltip the title of the series as appear in legend
Is this possible?

Share this post


Link to post
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'));
        }
    };
}

Share this post


Link to post
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));
        }
    };
}

Share this post


Link to post
Share on other sites

Hi,

 

Can you explain in more detail what you wanted ?

Share this post


Link to post
Share on other sites

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%)

Share this post


Link to post
Share on other sites

And once again I'm sorry, :)

 

How do you calculate the total value?

Share this post


Link to post
Share on other sites
I dont know. Thats the problem

 

I supposed that pie chart must have a property with the percent of each value

Share this post


Link to post
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>');
        }
    }
}

Share this post


Link to post
Share on other sites

Ok this is working ecxept that you must change sender.store.max('A'to sender.store.sum('A')

Thanks a lot

Share this post


Link to post
Share on other sites

Create an account or sign in to comment

You need to be a member in order to leave a comment

Create an account

Sign up for a new account in our community. It's easy!

Register a new account

Sign in

Already have an account? Sign in here.

Sign In Now

×