Not able to render chart in ext.net 5 version of webfrom application. Unable to find the proper format of data to assigin.

  1. #1

    Not able to render chart in ext.net 5 version of webfrom application. Unable to find the proper format of data to assigin.

    Hi Team I am unable to find a proper format of the data to assign. I am providing the sample I am trying to achieve this.

    <script runat="server">
        protected void Page_Load(object sender, EventArgs e) {
            this.Chart1.GetStore().DataSource = new List < object > {
                new { month = "Jan", data1 = 20 },
                new { month = "Feb", data1 = 20 },
                new { month = "Mar", data1 = 19 },
                new { month = "Apr", data1 = 18 },
                new { month = "May", data1 = 18 },
                new { month = "Jun", data1 = 17 },
                new { month = "Jul", data1 = 16 },
                new { month = "Aug", data1 = 16 },
                new { month = "Sep", data1 = 16 },
                new { month = "Oct", data1 = 16 },
                new { month = "Nov", data1 = 15 },
                new { month = "Dec", data1 = 15 }
            };
        }
    
        protected void ReloadData(object sender, DirectEventArgs e) {
            this.Chart1.GetStore().DataSource = new List < object > {
                new { month = "Jan", data1 = 20 },
                new { month = "Feb", data1 = 0 },
                new { month = "Mar", data1 = 9 },
                new { month = "Apr", data1 = 8 },
                new { month = "May", data1 = 8 },
                new { month = "Jun", data1 = 7 },
                new { month = "Jul", data1 = 6 },
                new { month = "Aug", data1 = 6 },
                new { month = "Sep", data1 = 6 },
                new { month = "Oct", data1 = 6 },
                new { month = "Nov", data1 = 5 },
                new { month = "Dec", data1 = 15 }
            };
            this.Chart1.Redraw();
        }
    
        public List < Object > RenderData = new List < object > {
            new { month = "Jan", data1 = 0 },
            new { month = "Feb", data1 = 0 },
            new { month = "Mar", data1 = 9 },
            new { month = "Apr", data1 = 8 },
            new { month = "May", data1 = 8 },
            new { month = "Jun", data1 = 7 },
            new { month = "Jul", data1 = 6 },
            new { month = "Aug", data1 = 6 },
            new { month = "Sep", data1 = 6 },
            new { month = "Oct", data1 = 6 },
            new { month = "Nov", data1 = 5 },
            new { month = "Dec", data1 = 15 }
        };
    </script>
    
    <!DOCTYPE html>
    
    <html>
    
    <head runat="server">
        <title>Pie Chart - Ext.NET Examples</title>
        <link href="/resources/css/examples.css" rel="stylesheet" />
    
        <script>
            var tipRenderer = function(toolTip, record, context) {
                var total = 0;
    
                App.Chart1.getStore().each(function(rec) {
                    total += rec.get('Data1');
                });
    
                toolTip.setTitle(record.get('Name') + ': ' + Math.round(record.get('Data1') / total * 100) + '%');
            };
    
            var saveChart = function(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('polar').download();
                    }
                });
            };
        </script>
    </head>
    <body>
        <form runat="server">
            <ext:ResourceManager runat="server" />
    
            <h1>Pie Chart Example</h1>
    
            <p>Display 5 sets of random data using a pie chart. Reload data will randomly generate a new set of data in the store.</p>
    
            <p>Toggle Donut button will dynamically change the chart between a Donut and Pie chart.</p>
    
            <p>Click or hover on the legend items to highlight and remove them from the chart.</p>
    
            <ext:Panel runat="server" Width="800" Height="600" Title="Semester Trends" Layout="Fit">
                <TopBar>
                    <ext:Toolbar runat="server">
                        <Items>
                            <ext:ToolbarFill runat="server" />
    
                            <ext:Button runat="server" Text="Save Chart" Icon="Disk" Handler="saveChart" />
    
                            <ext:Button runat="server" Text="Reload Data" Icon="ArrowRefresh" OnDirectClick="ReloadData" />
    
                            <ext:Button runat="server" Text="Donut" EnableToggle="true">
                                <Listeners>
                                    <Toggle Handler="App.Chart1.series[0].setDonut(pressed ? 35 : false); App.Chart1.redraw();" />
                                </Listeners>
                            </ext:Button>
    
                            <ext:Button runat="server" Text="Preview" Handler="this.up('panel').down('polar').preview();" />
                        </Items>
                    </ext:Toolbar>
                </TopBar>
    
                <Items>
                    <ext:PolarChart ID="Chart1" runat="server" Shadow="true" InsetPadding="60" InnerPadding="20">
                        <LegendConfig runat="server" Dock="Right" />
                        <Store>
                            <ext:Store runat="server" AutoDataBind="true">
                                <Model>
                                    <ext:Model runat="server">
                                        <Fields>
                                            <ext:ModelField Name="month" />
                                            <ext:ModelField Name="data1" />
                                        </Fields>
                                    </ext:Model>
                                </Model>
                            </ext:Store>
                        </Store>
                        <Interactions>
                            <ext:ItemHighlightInteraction />
                            <ext:RotateInteraction />
                        </Interactions>
                        <Series>
                            <ext:PieSeries AngleField="Data1" ShowInLegend="true" Donut="0" HighlightMargin="20">
                                <Label Field="Name" Display="Rotate" FontSize="18" FontFamily="Arial" />
                                <Tooltip runat="server" TrackMouse="true" Width="140" Height="28">
                                    <Renderer Fn="tipRenderer" />
                                </Tooltip>
                            </ext:PieSeries>
                        </Series>
                    </ext:PolarChart>
                </Items>
            </ext:Panel>
        </form>
    </body>
    </html>
    Last edited by geoffrey.mcgill; Aug 24, 2020 at 5:44 AM.
  2. #2
    Hello @ayyappa!

    It seems you are just using fields instead of properties. In some circumstances they behave differently. You are also missing the this.Chart1.GetStore().DataBind();.

    Just in case, here's the code for the Ext.Net.Examples.ChartData.GenerateData(6) you see in the example I believe you based this test case of: src/Examples/Chart/_Shared/ChartData.cs.

    Hope this helps!
    Fabrício Murta
    Developer & Support Expert

Similar Threads

  1. Replies: 3
    Last Post: Apr 16, 2014, 5:53 PM
  2. [CLOSED] Unable to find GridPanel in Ext.onReady
    By vijay.sahu in forum 2.x Legacy Premium Help
    Replies: 1
    Last Post: Apr 08, 2013, 9:41 AM
  3. [CLOSED] Unable to access early version of Ext.NET 2.2.0
    By RCM in forum 2.x Legacy Premium Help
    Replies: 6
    Last Post: Jan 22, 2013, 12:27 AM
  4. [CLOSED] Can't find Format in Ext.Net.GroupingSummaryColumn
    By ViDom in forum 1.x Legacy Premium Help
    Replies: 6
    Last Post: Jun 24, 2011, 10:32 AM
  5. Replies: 0
    Last Post: Nov 04, 2010, 8:09 PM

Posting Permissions