EXT.NET v3.0 BETA RELEASED!
Now with Tablet Support!
Ext.NET v3.0 Beta 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
    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,843
    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, 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