Jump to content


Photo

Tooltip on chart


  • Please log in to reply
24 replies to this topic

#1 nandrianakis

nandrianakis

    Member

  • uniGUI Subscriber
  • PipPip
  • 28 posts

Posted 04 June 2018 - 05:02 AM

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.

  • 0

#2 Delphi Developer

Delphi Developer

    Advanced Member

  • Moderators
  • 5293 posts

Posted 04 June 2018 - 06:04 AM

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

  • 0

#3 nandrianakis

nandrianakis

    Member

  • uniGUI Subscriber
  • PipPip
  • 28 posts

Posted 04 June 2018 - 08:17 AM

OK perfect

Thank you


  • 0

#4 nandrianakis

nandrianakis

    Member

  • uniGUI Subscriber
  • PipPip
  • 28 posts

Posted 04 June 2018 - 08:53 AM

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

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

attached demo


  • 0

#5 Delphi Developer

Delphi Developer

    Advanced Member

  • Moderators
  • 5293 posts

Posted 04 June 2018 - 10:17 AM

Please attach a simple testcase


  • 0

#6 nandrianakis

nandrianakis

    Member

  • uniGUI Subscriber
  • PipPip
  • 28 posts

Posted 04 June 2018 - 10:20 AM

Attached File  Project1.rar   54.36KB   4 downloads


  • 0

#7 Delphi Developer

Delphi Developer

    Advanced Member

  • Moderators
  • 5293 posts

Posted 04 June 2018 - 11:57 AM

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

}

  • 0

#8 nandrianakis

nandrianakis

    Member

  • uniGUI Subscriber
  • PipPip
  • 28 posts

Posted 05 June 2018 - 04:47 AM

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

  • 0

#9 nandrianakis

nandrianakis

    Member

  • uniGUI Subscriber
  • PipPip
  • 28 posts

Posted 07 June 2018 - 03:56 AM

Goog Morning  
 
Anything about my question?
I need also the Series title, and the percent of the pie chart
 
thanks
NA.

  • 0

#10 Delphi Developer

Delphi Developer

    Advanced Member

  • Moderators
  • 5293 posts

Posted 07 June 2018 - 04:07 AM

Goog Morning,

 

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


  • 0

#11 nandrianakis

nandrianakis

    Member

  • uniGUI Subscriber
  • PipPip
  • 28 posts

Posted 07 June 2018 - 04:53 AM

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?


  • 0

#12 Delphi Developer

Delphi Developer

    Advanced Member

  • Moderators
  • 5293 posts

Posted 07 June 2018 - 05:43 AM

Well, the get method parameters can only be:

 

LL - XLabel value

 

YValues:

  A - Series0

  B - Series1

  C - Series2

...


  • 0

#13 nandrianakis

nandrianakis

    Member

  • uniGUI Subscriber
  • PipPip
  • 28 posts

Posted 07 June 2018 - 07:53 AM

Thank you

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

  • 0

#14 Delphi Developer

Delphi Developer

    Advanced Member

  • Moderators
  • 5293 posts

Posted 07 June 2018 - 09:39 AM

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

  • 0

#15 nandrianakis

nandrianakis

    Member

  • uniGUI Subscriber
  • PipPip
  • 28 posts

Posted 07 June 2018 - 11:14 AM

Exactly

Thank you


  • 0

#16 Delphi Developer

Delphi Developer

    Advanced Member

  • Moderators
  • 5293 posts

Posted 14 June 2018 - 06:33 AM

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

  • 0

#17 nandrianakis

nandrianakis

    Member

  • uniGUI Subscriber
  • PipPip
  • 28 posts

Posted 31 July 2018 - 05:42 AM

Good morning

I need also to display the percent in tooltip(clientside).

Is this possible?

Rgs

Attached Files

  • Attached File  Pie.PNG   11.67KB   2 downloads

  • 0

#18 Delphi Developer

Delphi Developer

    Advanced Member

  • Moderators
  • 5293 posts

Posted 31 July 2018 - 10:16 AM

Hi,

 

Can you explain in more detail what you wanted ?


  • 0

#19 nandrianakis

nandrianakis

    Member

  • uniGUI Subscriber
  • PipPip
  • 28 posts

Posted 31 July 2018 - 11:13 AM

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


  • 0

#20 Delphi Developer

Delphi Developer

    Advanced Member

  • Moderators
  • 5293 posts

Posted 31 July 2018 - 11:15 AM

Ok I will check...


  • 0




0 user(s) are reading this topic

0 members, 0 guests, 0 anonymous users