Now with Tablet Support!
Ext.NET 3.0.0 is here with lots of new cool features and now with tablet support! Check Examples Explorer now to see it in action or download and test it yourself for free!
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 and Support Expert
    Object.NET - Frameworks and Tools for .NET Developers
    Ext.NET - ASP.NET Component Framework
    Bridge.NET - Launching Soon!
    Ext.NET Examples | Ext.NET API Docs | ExtJS API Docs | Twitter | Jobs

  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