[CLOSED] Legend doesn't appear in a pie chart created programmatically

Page 1 of 2 12 LastLast
  1. #1

    [CLOSED] Legend doesn't appear in a pie chart created programmatically

    Hi,
    I created a pie chart but the legend doesn't appear this is the code below :
    
    
    
        public class ChartData
        {
    
            public string Name { get; set; }
            public double Data { get; set; }
        }
    
            public ActionResult Graph()
            {
                return View();
            }
    
            public StoreResult GenerateGraphData()
            {
                StoreResult store = new StoreResult();
                List<ChartData> charts = new List<ChartData>();
                Random random = new Random();
                for (int i = 1; i <= 6; i++)
                {
                    ChartData chart = new ChartData();
                    chart.Name = SetName()[i % 6];
                    chart.Data = i;
                    charts.Add(chart);
                }
                store.Data = charts;
                return store;
    
            }
    
            private static String[] SetName()
            {
                String[] tab = new String[10];
                tab[0] = "name 1";
                tab[1] = "name 2";
                tab[2] = "name 3";
                tab[3] = "name 4";
                tab[4] = "name 5";
                tab[5] = "name 6";
                return tab;
            }
    
           public Chart GeneratePieChart()
            {
                Chart chart = new Chart();
                chart.ID = "Chart1";
                chart.Animate = true;
                chart.Shadow = true;
                chart.InsetPadding = 60;
                chart.Html = "</br><center><b>Pie Chart Example</b></center>";
                chart.Theme = "Base:gradients";
                chart.Legend = true;
                ChartLegend cl = new ChartLegend();
                cl.Position = LegendPosition.Top;
                cl.Visible = true;
                chart.LegendConfig = cl;
    
                Store store = new Store();
                store.ID = "Store1";
                store.AutoDataBind = true;
    
                Model model = new Model();
    
    
                ModelField modelField = new ModelField();
                modelField.Name = "Name";
                ModelField modelField0 = new ModelField();
                modelField0.Name = "Data";
                model.Fields.Add(modelField);
                model.Fields.Add(modelField0);
                store.Model.Add(model);
    
                AjaxProxy ajaxProxy = new AjaxProxy();
                ajaxProxy.Url = "/Home/GenerateGraphData";
    
                JsonReader jsonReader = new JsonReader();
                jsonReader.Root = "data";
                ajaxProxy.Reader.Add(jsonReader);
                store.Proxy.Add(ajaxProxy);
    
                PieSeries pieSeries = new PieSeries();
                pieSeries.AngleField = "Data";
                pieSeries.ShowInLegend = true;
                pieSeries.Highlight = true;
                pieSeries.HighlightSegmentMargin = 20;
                
    
                ChartTip tip = new ChartTip();
    
                tip.Width = 140;
                tip.Height = 28;
                tip.TrackMouse = true;
                tip.Renderer.Fn = "tipRenderer";
                pieSeries.Tips = tip;
    
                SeriesLabel label = new SeriesLabel();
                String[] tab = { "Data", "Name" };
                label.Field = tab;
                label.Display = SeriesLabelDisplay.Rotate;
                label.Contrast = true;
                label.Font = "18px Arial";
                pieSeries.Label = label;
                chart.Series.Add(pieSeries);
                chart.Store.Add(store);
                
                return chart;
            }
     public ContentResult LoadChart(String containerID)
            {
                ContentResult contentResult = new ContentResult();
                contentResult.Content = string.Format("<script>{0}</script>", GeneratePieChart().ToScript(RenderMode.AddTo, containerID));
                return contentResult;
            }
    ASPX code :
    <%@ Page Language="C#" Inherits="System.Web.Mvc.ViewPage<dynamic>" %>
    
    <%@ Register Assembly="Ext.Net" Namespace="Ext.Net" TagPrefix="ext" %>
    <!DOCTYPE html>
    <html>
    <head runat="server">
        <meta name="viewport" content="width=device-width" />
        <title>Graph</title>
        <script type="text/javascript">
            function tipRenderer(storeItem, item) {
                var total = 0;
             
                App.Chart1.getStore().each(function (rec) {
                    total += rec.get('Data');
                });
                this.setTitle(storeItem.get('Name') + ': ' + Math.round(storeItem.get('Data') / total * 100) + '%');
            }
        </script>
    </head>
    <body>
        <ext:ResourceManager runat="server" />
        <div>
            <ext:Panel ID="_pnl" runat="server" Title="Graph" Layout="FitLayout" Height="550">
                <Loader ID="Loader1" runat="server" Url="/ViewEngine/LoadChart" DisableCaching="true"
                    Mode="Html" Scripts="true">
                    <Params>
                        <ext:Parameter Name="containerID" Value="#{_pnl}" Mode="Value" />
                    </Params>
                </Loader>
            </ext:Panel>
        </div>
    </body>
    </html>
    Last edited by Daniil; Dec 19, 2012 at 3:31 PM. Reason: [CLOSED]
  2. #2
    Hi @Daly_AF,

    A legend appears for me.

    Could you post a screenshot how it looks on your side?

    Please also clarify what Ext.NET sources are you testing with?
  3. #3
    Hi,
    This is a screen shot :
    Click image for larger version. 

Name:	Sans titre.png 
Views:	83 
Size:	34.0 KB 
ID:	5277

    PS: I use Ext.NET 2.1 DLL's.
  4. #4
    I am getting this in FireFox with Ext.NET 2.1.0 release.

    Click image for larger version. 

Name:	1.JPG 
Views:	105 
Size:	40.5 KB 
ID:	5278

    What is the browser you are testing in?
  5. #5
    I am using FireFox 17.0.1, IE8 and Google Chrome Version 23.0.1271.97 m
    Are you sure you did not change the source code I have posted? This is really weird.
  6. #6
    Yes, I didn't change anything.

    Please post the Page Sources, responses of the LoadChart and the GenerateGraphData actions.
  7. #7
    Hi,
    This is the code that loads data :
           public StoreResult GenerateGraphData()
           {
               StoreResult store = new StoreResult();
               List<ChartData> charts = new List<ChartData>();
               Random random = new Random();
               for (int i = 1; i <= 6; i++)
               {
                   ChartData chart = new ChartData();
                   chart.Name = SetName()[i % 6];
                   chart.Data = i;
                   charts.Add(chart);
               }
               store.Data = charts;
               return store;
     
           }
     
           private static String[] SetName()
           {
               String[] tab = new String[10];
               tab[0] = "name 1";
               tab[1] = "name 2";
               tab[2] = "name 3";
               tab[3] = "name 4";
               tab[4] = "name 5";
               tab[5] = "name 6";
               return tab;
           }
    This is the action that loads chart:
           public ContentResult LoadChart(String containerID)
           {
               ContentResult contentResult = new ContentResult();
               contentResult.Content = string.Format("<script>{0}</script>", GeneratePieChart().ToScript(RenderMode.AddTo, containerID));
               return contentResult;
           }
    And this is the method that Generates graph:
    public Chart GeneratePieChart()
           {
               Chart chart = new Chart();
               chart.ID = "Chart1";
               chart.Animate = true;
               chart.Shadow = true;
               chart.InsetPadding = 60;
               chart.Html = "</br><center><b>Pie Chart Example</b></center>";
               chart.Theme = "Base:gradients";
               chart.Legend = true;
               ChartLegend cl = new ChartLegend();
               cl.Position = LegendPosition.Top;
               cl.Visible = true;
               chart.LegendConfig = cl;
     
               Store store = new Store();
               store.ID = "Store1";
               store.AutoDataBind = true;
     
               Model model = new Model();
     
     
               ModelField modelField = new ModelField();
               modelField.Name = "Name";
               ModelField modelField0 = new ModelField();
               modelField0.Name = "Data";
               model.Fields.Add(modelField);
               model.Fields.Add(modelField0);
               store.Model.Add(model);
     
               AjaxProxy ajaxProxy = new AjaxProxy();
               ajaxProxy.Url = "/Home/GenerateGraphData";
     
               JsonReader jsonReader = new JsonReader();
               jsonReader.Root = "data";
               ajaxProxy.Reader.Add(jsonReader);
               store.Proxy.Add(ajaxProxy);
     
               PieSeries pieSeries = new PieSeries();
               pieSeries.AngleField = "Data";
               pieSeries.ShowInLegend = true;
               pieSeries.Highlight = true;
               pieSeries.HighlightSegmentMargin = 20;
                
     
               ChartTip tip = new ChartTip();
     
               tip.Width = 140;
               tip.Height = 28;
               tip.TrackMouse = true;
               tip.Renderer.Fn = "tipRenderer";
               pieSeries.Tips = tip;
     
               SeriesLabel label = new SeriesLabel();
               String[] tab = { "Data", "Name" };
               label.Field = tab;
               label.Display = SeriesLabelDisplay.Rotate;
               label.Contrast = true;
               label.Font = "18px Arial";
               pieSeries.Label = label;
               chart.Series.Add(pieSeries);
               chart.Store.Add(store);
                
               return chart;
           }
  8. #8
    Yes, you posted it before, but I asked for:
    Quote Originally Posted by Daniil View Post
    Please post the Page Sources, responses of the LoadChart and the GenerateGraphData actions.
    To get Page Sources, you can press Ctrl+U in FireFox. To inspect responses you can use FireBug. The same is possible in other browsers.
  9. #9
    This is the source code when I press Ctrl+U in FireFox
    
    <!DOCTYPE html>
    <html>
    <head>
        <link type="text/css" rel="stylesheet" href="/extjs/resources/css/ext-all-embedded-css/ext.axd?v=17681" id="ext-theme" />
        <link type="text/css" rel="stylesheet" href="/extnet/resources/css/extnet-all-embedded-css/ext.axd?v=17681" />
        <script type="text/javascript" src="/extjs/ext-all-js/ext.axd?v=17681"></script>
        <script type="text/javascript" src="/extnet/extnet-all-js/ext.axd?v=17681"></script>
    <meta name="viewport" content="width=device-width" />
        <title>Graph</title>
        
        <script type="text/javascript">
            function tipRenderer(storeItem, item) {
                var total = 0;
             
                App.Chart1.getStore().each(function (rec) {
                    total += rec.get('data');
                });
                this.setTitle(storeItem.get('status_id') + ': ' + Math.round(storeItem.get('data') / total * 100) + '%');
            }
        </script>
    
        <script type="text/javascript">
        //<![CDATA[
            Ext.net.ResourceMgr.init({id:"ctl01",isMVC:true});Ext.onReady(function(){Ext.create("Ext.panel.Panel",{id:"_pnl",height:550,loader:{id:"Loader1",paramsFn:function(){ return {"containerID":"App._pnl"}; },scripts:true,url:"/ViewEngine/LoadChart"},renderTo:"App._pnl_Container",layout:"fit",title:"Graph"});});
        //]]>
        </script>
    </head>
    <body>
        
        <div>
            <div id="App._pnl_Container"></div>
        </div>
    </body>
    </html>
  10. #10
    Ok, it looks good.

    What about the responses?
Page 1 of 2 12 LastLast

Similar Threads

  1. [CLOSED] Legend in Column Chart
    By Tactem in forum 2.x Premium Help
    Replies: 4
    Last Post: Nov 08, 2013, 12:29 PM
  2. [CLOSED] Is there any way we can give custom legend label in chart
    By advBackOffice in forum 2.x Premium Help
    Replies: 2
    Last Post: Dec 05, 2012, 5:15 PM
  3. [CLOSED] Chart Legend Names
    By cwolcott in forum 2.x Premium Help
    Replies: 6
    Last Post: Nov 05, 2012, 4:39 PM
  4. chart legend
    By koma in forum 2.x Help
    Replies: 0
    Last Post: Sep 12, 2012, 4:09 AM
  5. Replies: 2
    Last Post: Aug 13, 2012, 3:12 PM

Posting Permissions