We’re super excited to announce the immediate availability of Ext.NET 4 Preview! This release includes many new features and improvements and of course one of the biggest changes includes the upgrade to Sencha Ext JS 6.
Page 2 of 2 FirstFirst 12
Results 11 to 14 of 14

Thread: Unable to get Dynamic Charts in Ext.Net

  1. #11
    Premium Member
    Join Date
    Mar 2010
    Quote Originally Posted by Daniil View Post
    Hi @jwf,

    Please note that a Render call is not required on initial load. More - inappropriate. It will be rendered automatically.

    Please use this method during a DirectEvent or a DirectMethod only.
    Thank you Daniil. I will try to remember this moving forward.

  2. #12
    Object.NET + Ext.NET Daniil's Avatar
    Join Date
    Jun 2010
    Saint-Petersburg, Russia
    Quote Originally Posted by nagesh View Post
    Hi Daniil, Thanks fro Your Suggestion
    Here i have used this for getting Tips and Names on pieseries Chart see below code
      ChartTip tip = new ChartTip();
            tip.Height = 30;
            tip.Width = 140;
            tip.TrackMouse = true;
            tip.Renderer.Handler = "tipRenderer";  // this is Javascript Function
            objPieSeries.Tips = tip;
    but am unable to get the Names and Tips on Anglefield, Help me
    Thank You
    Please try
    tip.Renderer.Fn = "tipRenderer";
    instead of
    tip.Renderer.Handler = "tipRenderer";
    Daniil Veriga
    Developer & Support Expert

  3. #13
    Premium Member
    Join Date
    Mar 2010
    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:

    <%@ 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;            
                var ds = new[] {
                    new { Name = "Apples",  Data1 = "45.0" },
                    new { Name = "Oranges", Data1 = "35.0" },
                    new { Name = "Pears",   Data1 = "20.0" }
                Store1.DataSource = ds;
        <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(" ", "&nbsp;");
                var textMetrics = new Ext.util.TextMetrics(this);
                this.width = textMetrics.getWidth(title) + 8;            
        <form id="form1" runat="server">
                <ext:ResourceManager ID="ResourceManager1" runat="server" />
                <ext:Panel ID="Panel2" runat="server" Height="600" Layout="FitLayout" MarginSpec="0 0 3 0">
                        <ext:Chart ID="TransactionChart" runat="server" Animate="true" Shadow="true" InsetPadding="60" Theme="Base:gradients">
                                <ext:Store ID="Store1" runat="server">
                                        <ext:Model ID="Model2" runat="server">
                                                <ext:ModelField Name="Name" />
                                                <ext:ModelField Name="Data1" />
                            <LegendConfig Position="Right" />
    The render method "tipRenderer" is passed two arguments: the store record for the pie slice you are hovering over, and the slice itself.

    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!

  4. #14
    Join Date
    May 2012


    Hi @jwf, @Daniil
    Thanks for Responce, PieSeries Running Great...

    but one of the Thread is not Cleared, plz see the below link.

    Close this thread... :-)

    Thank You.

Similar Threads

  1. [CLOSED] Did Charts break
    By randy85253 in forum 1.x Premium Help
    Replies: 8
    Last Post: Sep 05, 2013, 8:18 PM
  2. [CLOSED] Unable to close dynamic Window
    By wisdomchuck in forum 1.x Premium Help
    Replies: 3
    Last Post: Feb 28, 2012, 3:35 PM
  3. [CLOSED] Charts
    By rnachman in forum 1.x Premium Help
    Replies: 3
    Last Post: Jan 12, 2012, 5:06 PM
  4. Charts with Coolite
    By flaviodamaia in forum 1.x Help
    Replies: 1
    Last Post: Jan 12, 2012, 5:06 PM
  5. Ext Js 4 / Charts
    By bentoo42 in forum Feature Requests
    Replies: 2
    Last Post: Jan 12, 2012, 5:01 PM

Posting Permissions