The official release of Ext.NET Mobile is now available. Ext.NET Mobile is an ASP.NET component framework for building Phone and Tablet specific mobile web applications. Read More

Unable to get Dynamic Charts in Ext.Net

Page 2 of 2 FirstFirst 12
  1. #11
    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
    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";
  3. #13
    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="">
    <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


    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.
Page 2 of 2 FirstFirst 12

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