Unable to get Dynamic Charts in Ext.Net

Page 1 of 2 12 LastLast
  1. #1

    Unable to Get the PieChart Dynamically

    Hi,
    Here is Sample Code of BasicPie Chart, Here am unable to get the Label Field of inside Pie Series from CodeBehind, Help me

    <%@ Page Language="C#" %>
    
    <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
    <%@ Register Assembly="Ext.Net" Namespace="Ext.Net" TagPrefix="ext" %>
    <html xmlns="http://www.w3.org/1999/xhtml">
    <head runat="server">
        <title></title>
        <script type="text/javascript">
            function saveChart(btn) {
                Ext.MessageBox.confirm('Confirm Download', 'Would you like to download the chart as an image?', function (choice) {
                    if (choice == 'yes') {
                        btn.up('panel').down('chart').save({
                            type: 'image/png'
                        });
                    }
                });
            }
        </script>
     <script  runat="server">
     SqlConnection cn = new SqlConnection(WebConfigurationManager.ConnectionStrings["con"].ConnectionString);
          protected void Page_Load(object sender, EventArgs e)
           { 
            cn.Open();
            PieSeries objPieSeries = new PieSeries();
            objPieSeries.ShowInLegend = true;
            objPieSeries.Donut = 0;
            objPieSeries.Highlight = true;
            objPieSeries.HighlightSegmentMargin = 20;
            TransactionChart.Series.Add(objPieSeries);
            
          
            SqlCommand cmd2 = new SqlCommand("select * from Chart", cn);
            SqlDataReader dr2 = cmd2.ExecuteReader();
           dr2.Read();
            string input = dr2["Data1"].ToString();
            string input1 = dr2["Name"].ToString();
            dr2.Close();
    
            objPieSeries.AngleField = "Data1";
            objPieSeries.Label.Field = "Name";     // Am getting Error Here
          
            // Getting Data into Model Fields
            SqlCommand cmd = new SqlCommand("select COLUMN_NAME from INFORMATION_SCHEMA.COLUMNS where TABLE_NAME = 'Chart'", cn);
            SqlDataReader dr = cmd.ExecuteReader();
            var reader = new JsonReader();
    
            while (dr.Read())
            {
                reader.Record = dr["COLUMN_NAME"].ToString();
                Model2.Fields.Add(dr["COLUMN_NAME"].ToString());
            }
            dr.Close();
             cn.Close();
            DataSet ds = PDataset("select * from Chart");
            Store1.DataSource = ds;
            Store1.DataBind();
            TransactionChart.Render();
        }
        
        protected DataSet PDataset(string Select_Statement)
        {
            cn.Open();
            SqlDataAdapter ad = new SqlDataAdapter(Select_Statement, cn);
    
            DataSet ds1 = new DataSet();
            ad.Fill(ds1, "Chart");
            cn.Close();
            return ds1;
            
        }
    </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">
                                    </ext:Model>
                                </Model>
                            </ext:Store>
                        </Store>
                        <LegendConfig Position="Right" />
                    </ext:Chart>
                </Items>
            </ext:Panel>
        </div>
        </form>
    </body>
    </html>
    ThanK You...
    Last edited by nagesh; Nov 16, 2012 at 5:05 AM.
  2. #2
    Hi @nagesh,

    Unfortunately, the sample throws:
    Parser Error Message: Could not load type 'DynamicChart4'.
  3. #3

    Hi Daniil

    Hi Daniil
    Check it once again now, it won't give any error.
    Thank You
  4. #4
    Hi Nagesh,

    I can't run your code because I do not have access to your backend datasource. So I have cleaned up your code with some sample local data. It's not completely clear what you are trying to do, but I think this example should help:

    <%@ Register Assembly="Ext.Net" Namespace="Ext.Net" TagPrefix="ext" %>
    
    
    <html xmlns="http://www.w3.org/1999/xhtml">
    <head id="Head1" runat="server">
        <title></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" };
                
                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();
                
                TransactionChart.Render();
            }
        </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>
    In particular, this line

    objPieSeries.Label = new SeriesLabel() { Field = "Name" };
    tells the PieSeries to make a new SeriesLabel and to bind the display field to the data model's "Name" property.
  5. #5

    Hi jwf

    Hi @jwf, thanks for responce
    objPieSeries.Label = new SeriesLabel() { Field = "Name" };
    That Above Line is Working Great,
    but like that how can i implement the
      this.setTitle(storeItem.get('Name') + ': ' + Math.round(storeItem.get('Data1') / total * 100) + '%')
    to objPieSeries.Tips.

    and also plz check the below link RadarSeriesChart
    http://forums.ext.net/showthread.php...5759#post95759

    Thank You
    Last edited by Daniil; Nov 16, 2012 at 7:31 AM. Reason: Please use [CODE] tags for any code
  6. #6
    Quote Originally Posted by nagesh View Post
    but like that how can i implement the
      this.setTitle(storeItem.get('Name') + ': ' + Math.round(storeItem.get('Data1') / total * 100) + '%')
    to objPieSeries.Tips.
    Example
    PieSeries ps = new PieSeries();
    ChartTip tip = new ChartTip();
    tip.Renderer.Handler = "/* JavaScript */";
    ps.Tips = tip;
  7. #7

    Hi Daniil

    Hi Daniil,
    Here i want to call ModeFields also Dynamically, so then how can i write this below line in codebehind
    this.setTitle(storeItem.get('Name') + ': ' + Math.round(storeItem.get('Data1') / total * 100) + '%')
    and i want names on Each AngleField, now am Getting Like This see below Image.
    Click image for larger version. 

Name:	pie.JPG 
Views:	141 
Size:	32.3 KB 
ID:	5104
    Thank You
  8. #8
    Quote Originally Posted by nagesh View Post
    Hi Daniil,
    Here i want to call ModeFields also Dynamically, so then how can i write this below line in codebehind
    this.setTitle(storeItem.get('Name') + ': ' + Math.round(storeItem.get('Data1') / total * 100) + '%')
    I think you can replace 'Name' with
    item.series.label.field
    and 'Data1' with
    item.series.angleField
  9. #9
    Quote Originally Posted by jwf View Post
    Hi Nagesh,

    I can't run your code because I do not have access to your backend datasource. So I have cleaned up your code with some sample local data. It's not completely clear what you are trying to do, but I think this example should help:

    <%@ Register Assembly="Ext.Net" Namespace="Ext.Net" TagPrefix="ext" %>
    
    
    <html xmlns="http://www.w3.org/1999/xhtml">
    <head id="Head1" runat="server">
        <title></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" };
                
                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();
                
                TransactionChart.Render();
            }
        </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>
    In particular, this line

    objPieSeries.Label = new SeriesLabel() { Field = "Name" };
    tells the PieSeries to make a new SeriesLabel and to bind the display field to the data model's "Name" property.
    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.
  10. #10

    Hi Daniil

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

Similar Threads

  1. [CLOSED] Did Charts break
    By randy85253 in forum 1.x Legacy 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 Legacy Premium Help
    Replies: 3
    Last Post: Feb 28, 2012, 2:35 PM
  3. [CLOSED] Charts
    By rnachman in forum 1.x Legacy 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

Posting Permissions