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
    Posts
    166
    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
    Ext.NET - Support Team Daniil's Avatar
    Join Date
    Jun 2010
    Location
    Saint-Petersburg, Russia
    Posts
    27,464
    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
    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
    Code:
    tip.Renderer.Fn = "tipRenderer";
    instead of
    Code:
    tip.Renderer.Handler = "tipRenderer";
    Daniil
    Ext.NET, Inc.
    Support Team

    Ext.NET Examples | Ext.NET API Docs | ExtJS API Docs | Twitter | Jobs

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

    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(" ", "&nbsp;");
                }
    
    
                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>
    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
    Member
    Join Date
    May 2012
    Location
    India
    Posts
    82

    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

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

Posting Permissions