[CLOSED] Chart legend tooltip

I have a pie chart with certain error codes. Currently those codes are shown in the legend. Is there any way to show a tooltip when hovering over the code in the legend? The code description can be quite long (and not unique), so using the description in the legend is not an option.

Code:

<html xmlns="http://www.w3.org/1999/xhtml"> <head runat="server"> <title></title> <script type="text/javascript"> Ext.define('Ext.chart.series.Pie3D', { override: 'Ext.chart.series.Pie3D', updateLabelData: function () { return true; } }); </script> <script runat="server"> protected void Page_Load( object sender, EventArgs e ) { if ( !X.IsAjaxRequest ) { this.storeFailures.DataSource = this.Data; this.storeFailures.DataBind(); } } private object[] Data { get { return new object[] { new object[] { 5240, 270, "Here goes very long description" }, new object[] { 1294, 253, "Here goes yet another very long description" }, new object[] { 9832, 217, "Here goes very long description" }, new object[] { 1642, 58, "Here goes very long description" }, new object[] { 661, 53, "Here goes very long description" } }; } } </script> </head> <body> <form id="form1" runat="server"> <ext:ResourceManager runat="server" /> <ext:Panel runat="server" Width="650" Height="500" Layout="FitLayout"> <Items> <ext:PolarChart ID="chartFailures" runat="server" Animation="true" Shadow="true" Flex="1"> <Background Fill="#FFFFFF"></Background> <LegendConfig runat="server" Dock="Right" BoxStrokeWidth="0" /> <Store> <ext:Store ID="storeFailures" runat="server"> <Model> <ext:Model ID="Model1" runat="server"> <Fields> <ext:ModelField Name="ErrorCode" Type="Int"></ext:ModelField> <ext:ModelField Name="Calls" Type="Int"></ext:ModelField> <ext:ModelField Name="ErrorCodeDescription" Type="String"></ext:ModelField> </Fields> </ext:Model> </Model> </ext:Store> </Store> <Interactions> <ext:RotatePie3DInteraction /> </Interactions> <Series> <ext:Pie3DSeries Donut="40" AngleField="Calls" ShowInLegend="true" Highlight="true"> <Label Field="ErrorCode" Display="Rotate" Font="16px Arial"> <Renderer Handler="return '';"></Renderer> </Label> <Tooltip ID="Tips1" TrackMouse="true" runat="server" Width="220" Height="28"> <Renderer Handler="toolTip.setHtml(record.get('ErrorCode') + ': ' + record.get('Calls'));"></Renderer> </Tooltip> <Listeners> <ItemClick Handler="alert('ItemClick');"></ItemClick> </Listeners> </ext:Pie3DSeries> </Series> <Plugins> <ext:ChartItemEvents runat="server" /> </Plugins> </ext:PolarChart> </Items> </ext:Panel> </form> </body> </html>

Hello Edgar!

Here's two interesting points that might help in this issue:
- Advanced custom tooltips in a chart series.
- Adding tooltips anywhere in any control example.

While the first may not really be what you want, it is a nice application of tooltips in charts. As for the second one, is exactly what you need, you will just have to inspect the chart legend to identify how exactly to set up the tooltip target on that legend entry.

Give it a try, if still stuck with the tooltips, let us know and we'll see how can we better help you with it using the sample test case (we really appreciate it!) you provided.

Hello FabrÃ*cio!

I've replaced the LegendConfig line with this:

Code:

<LegendConfig ID="LegendConfig1" runat="server" Dock="Right"> <ToolTips> <ext:ToolTip ID="LegendTip" runat="server"> <Listeners> <Render Handler="this.setHtml();" /> </Listeners> </ext:ToolTip> </ToolTips> </LegendConfig>

Tried all sorts of combinations for the setHtml parameters without success.

Presumably, I would need to get hold of the store and the recordIndex and then do something like this:

Code:

store.getAt(index).get('ErrorCodeDescription')

However, I'm at loss how to get the store and recordIndex.

Thanks!

Hello @Edgar!

Well, first of all, be aware we are talking about customizing the framework. To be very clear, tooltips are not "natively" supported by the framework.

But this does not mean the framework offers no means to place tooltips there. In fact, tooltips can be added to any html element or any ID of html elements in the page (reference).

That said, if you check your code, you'll see you set up the tooltip over the whole legend frame. That's not what you want (if I understand your requirement correctly). You want for every entry a different tooltip data.

You could, yes, just change the contents as you move it thru the legend frame. But that will mean checking x and y position and matching the position to the corresponding record and refreshing the tip frequently. I believe a faster (computing weight wise) way to attain this is build one tooltip for each legend item. Assuming you won't have a graph with more than, say, 20 legend entries.

So what you need, is set the correct target to your tooltips. If you inspect your legend frame, you'll see you have various div but they got no ID, so you can't reference them from afar. You'll have to dive in the HTML DOM and get the elements to bind the tooltips to.

Inspecting the legend frame though, you can see there are attributes to the divs that references the records the entry relates to, named as both data-recordIndex and data-recordid. You can then be using the latter to get the record info from the store (be it for the chart, be it for a gridPanel, no matter).

First thing then, set up an event to your legend, when it is drawn, then you step thru the child entries. Something like this:

Code:

<LegendConfig ID="LegendConfig1" runat="server" Dock="Right"> <Listeners> <BoxReady Fn="makeLegendToolTips" /> </Listeners> </LegendConfig>

Now, for the handler, let it go in a script block on your page. You should open the example your provided and look at your browser's DOM Browser to understand what's the code below is stepping into:

Code:

var makeLegendToolTips = function (item) { var legendEntries = (item.el.dom.children[0]).children, i, legItem; for (i = 0; i < legendEntries.length; i++) { legItem = legendEntries[i]; Ext.create('Ext.tip.ToolTip', { target: legItem, html: 'Store recordID: ' + legItem.getAttribute('data-recordid') }); } }

To this point you have the legend with tooltip to each individual entry and access to the store's record ID which you can get and fetch the field you want to show in the tooltip. Next steps should go straightforward, I hope.

Once again, this is a suggestion on how you could use the ToolTips functionality and it is not an Ext.NET feature, so we can't guarantee this will work on next or previous versions of Ext.NET 4.1 and/or ExtJS 6.0.2.

Hope this helps!

Thanks FabrÃ*cio! Will take a look on Monday. Something else is causing us trouble at the moment.

Okay, we are looking forward for your feedback on the issue!

Hello Edgar!

It's been some days since you told you would check the issue and post a feedback. We'll wait another additional week from now before we mark this as closed. Anyway, after closed you still can post follow-ups to the thread.

Hi FabrÃ*cio! It works when there's a single chart on the page, but not with multiple charts. Anyway, we chose another approach. You can mark this as closed.

Thanks for the feedback!

Probably if the chart data was not ready by the time the helper function was called it couldn't make any actual tooltips and another event to trigger the function call, like load (clearing the previous tooltip or updating one if already exists) should do it.

Anyway, as you no longer need an alternative to this issue, we'll be proceeding to mark as closed.