Nov 16, 2012, 3:15 PM
-
-
Nov 16, 2012, 3:22 PM
-
Nov 16, 2012, 4:50 PMHi nagesh,
Listeners can have an inline javascript handler, this is the Handler property. They can also define a separate method and assign the method's name to the listener's Fn property. You should generally use one or the other.
I prefer Fn property for separation of concerns and clarity of code, here is an example showing how to achieve your goal with this approach:
The render method "tipRenderer" is passed two arguments: the store record for the pie slice you are hovering over, and the slice itself.<%@ Register Assembly="Ext.Net" Namespace="Ext.Net" TagPrefix="ext" %> <html xmlns="http://www.w3.org/1999/xhtml"> <head id="Head1" runat="server"> <title>Pie Chart Example</title> <script runat="server"> protected void Page_Load(object sender, EventArgs e) { PieSeries objPieSeries = new PieSeries() { Donut = 0, Highlight = true, HighlightSegmentMargin = 20, ShowInLegend = true }; objPieSeries.AngleField = "Data1"; objPieSeries.Label = new SeriesLabel() { Field = "Name" }; ChartTip tip = new ChartTip() { Height = 20, TrackMouse = true }; tip.Renderer.Fn = "tipRenderer"; objPieSeries.Tips = tip; TransactionChart.Series.Add(objPieSeries); var ds = new[] { new { Name = "Apples", Data1 = "45.0" }, new { Name = "Oranges", Data1 = "35.0" }, new { Name = "Pears", Data1 = "20.0" } }; Store1.DataSource = ds; Store1.DataBind(); } </script> <script type="text/javascript"> function tipRenderer(storeItem, item) { var header = storeItem.get(item.series.label.field); var pct = storeItem.get(item.series.angleField); var title = header + ": " + pct + "% "; if (Ext.isIE) { title = title.replace(" ", " "); } var textMetrics = new Ext.util.TextMetrics(this); this.width = textMetrics.getWidth(title) + 8; this.setTitle(title); } </script> </head> <body> <form id="form1" runat="server"> <div> <ext:ResourceManager ID="ResourceManager1" runat="server" /> <ext:Panel ID="Panel2" runat="server" Height="600" Layout="FitLayout" MarginSpec="0 0 3 0"> <Items> <ext:Chart ID="TransactionChart" runat="server" Animate="true" Shadow="true" InsetPadding="60" Theme="Base:gradients"> <Store> <ext:Store ID="Store1" runat="server"> <Model> <ext:Model ID="Model2" runat="server"> <Fields> <ext:ModelField Name="Name" /> <ext:ModelField Name="Data1" /> </Fields> </ext:Model> </Model> </ext:Store> </Store> <LegendConfig Position="Right" /> </ext:Chart> </Items> </ext:Panel> </div> </form> </body> </html>
In the render function above, I get the name (e.g. "Apples") from the store record. I do this by passing in item.series.label.field to identify which field in the record contains the data I need. Similarly I retrieve the percentage data (e.g. "45.0") by passing in item.series.angleField to identify which field in the record contains that data.
Then I format my tooltip title, with some code replacing white space due to a wrapping issue in IE9.
Lastly, I use Ext.util.TextMetrics to figure out the width for my tooltip and set the title.
Hopefully this helps. Good luck! -
Nov 17, 2012, 6:22 AM
Hi
Hi @jwf, @Daniil
Thanks for Responce, PieSeries Running Great...
but one of the Thread is not Cleared, plz see the below link.
http://forums.ext.net/showthread.php...rt-Dynamically
Close this thread... :-)
Thank You.
Similar Threads
-
[CLOSED] Did Charts break
By randy85253 in forum 1.x Legacy Premium HelpReplies: 8Last Post: Sep 05, 2013, 7:18 PM -
[CLOSED] Unable to close dynamic Window
By wisdomchuck in forum 1.x Legacy Premium HelpReplies: 3Last Post: Feb 28, 2012, 2:35 PM -
[CLOSED] Charts
By rnachman in forum 1.x Legacy Premium HelpReplies: 3Last Post: Jan 12, 2012, 4:06 PM -
Charts with Coolite
By flaviodamaia in forum 1.x HelpReplies: 1Last Post: Jan 12, 2012, 4:06 PM