Thank you Daniil. I will try to remember this moving forward.
Printable View
Hi 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.Code:<%@ 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!
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.