[CLOSED] "SeriesLabel" in Line Chart not displaying properly

  1. #1

    [CLOSED] "SeriesLabel" in Line Chart not displaying properly

    Hi,

    I am having a dynamic Line Chart where i am displaying a custom text on Line series marker, Say i want to display "A" or "P" on line series "Diamond" marker. I have achieved this by using "SeriesLabel" option of "LineSeries". I have added the 2 model fields which contain "A" and "P" and assigned it to SeriesLabel based on the condition.

    But the issue i have facing is, Line Chart is displaying either "A" or "P" on marker for the all line series but not both simultaneously.

    Here is the sample snapshot which will give you better idea


    Below it sample code:

    This example contains 2 series one is for Albania and second is for France country, for Albania text "A" should be displayed and for France text "P" should display on line series in Diamond marker, but Line chart is displaying "P" for both the series.

    //Controller & Model

    
      public class GrpColumns
            {
                public string Country { get; set; }
                public string IsScheduled { get; set; }
                public bool? isProvisional { get; set; }
                public string MonthName { get; set; }
                public double Value { get; set; }
            }
    
            public ActionResult Index()
            {
                return View(GenerateData());
            }
    
            public List<GrpColumns> GetRecords()
            {
                List<GrpColumns> lst = new List<GrpColumns>();
              
                    GrpColumns obj = new GrpColumns();
    
                    obj.Country = "Albania";
                    obj.MonthName = "Step-13";
                    obj.Value = 120.56;
                    obj.isProvisional = false;
                    obj.IsScheduled = "True";
                    lst.Add(obj);
    
                    obj = new GrpColumns();
                    obj.Country = "Albania";
                    obj.MonthName = "Oct-13";
                    obj.Value = 220.56;
                    obj.isProvisional = false;
                    obj.IsScheduled = "True";
                    lst.Add(obj);
    
                    obj = new GrpColumns();
                    obj.Country = "Albania";
                    obj.MonthName = "Nov-13";
                    obj.Value = 320.56;
                    obj.isProvisional = false;
                    obj.IsScheduled = "True";
                    lst.Add(obj);
    
                    obj = new GrpColumns();
                    obj.Country = "Albania";
                    obj.MonthName = "Dec-13";
                    obj.Value = 420.56;
                    obj.isProvisional = false;
                    obj.IsScheduled = "True";
                    lst.Add(obj);
    
                    // @@@ France Data @@@ //
                    obj = new GrpColumns();
                    obj.Country = "France";
                    obj.MonthName = "Step-13";
                    obj.Value = 520.56;
                    obj.isProvisional = true;
                    obj.IsScheduled = "True";
                    lst.Add(obj);
    
                    obj = new GrpColumns();
                    obj.Country = "France";
                    obj.MonthName = "Oct-13";
                    obj.Value = 620.56;
                    obj.isProvisional = true;
                    obj.IsScheduled = "True";
                    lst.Add(obj);
    
                    obj = new GrpColumns();
                    obj.Country = "France";
                    obj.MonthName = "Nov-13";
                    obj.Value = 720.56;
                    obj.isProvisional = true;
                    obj.IsScheduled = "True";
                    lst.Add(obj);
    
                    obj = new GrpColumns();
                    obj.Country = "France";
                    obj.MonthName = "Dec-13";
                    obj.Value = 820.56;
                    obj.isProvisional = true;
                    obj.IsScheduled = "True";
                    lst.Add(obj);
                 
    
    
               
                return lst;
    
            }
    
            public ExpandoObject[] GenerateData()
            {
                List<ExpandoObject> dataList = new List<ExpandoObject>();
                var records = GetRecords();
                foreach (var item in records.GroupBy(c => c.MonthName))
                {
                    var exp = new ExpandoObject();
                    (exp as IDictionary<String, Object>).Add("MonthName", item.Key);
                    foreach (var val in item)
                    {
                        (exp as IDictionary<String, Object>).Add(val.Country, val.Value / 5);
                        if (val.isProvisional == true)
                            (exp as IDictionary<String, Object>).Add("SeriesLabel" + val.Country, "P");
                        else
                            (exp as IDictionary<String, Object>).Add("SeriesLabel" + val.Country, "A");
                    }
                    (exp as IDictionary<String, Object>).Add("Data", item);
                    dataList.Add(exp);
                }
    
                return dataList.ToArray();
            }

    //Index View

    @using System.Web.Optimization;
    @using System.Drawing;
    @using System.Data;
    @using System.Dynamic;
    @{
        ViewBag.Title = "Home Page";
        var X = Html.X();
    }
    @model ExpandoObject[] 
    @(Html.X().ResourceManager(ViewBag.ManagerConfig as MvcResourceManagerConfig))
        
    
    
    @functions{
      
        private Store CreateStore(List<string> listColumns)
        {
            Store store = new Store();
            store.ID = "MultiPT";
            var model = new Model();
            model.Fields.Add(new ModelField("MonthName", ModelFieldType.String));
    
            listColumns.ForEach(column =>
            {
                model.Fields.Add(new ModelField(column, ModelFieldType.Float));
                model.Fields.Add(new ModelField("SeriesLabel" + column, ModelFieldType.String));
            });
    
            store.Model.Add(model);
            store.DataBound += store_DataBound;
    
            return store;
        }
    
    
        private void store_DataBound(object sender, EventArgs e)
        {
            (sender as Store).Reader.Clear();
        }
    
        
        private SeriesCollection CreateChartSeries(List<string> cdata)
        {
            SeriesCollection absSeries = new SeriesCollection();
            absSeries = new SeriesCollection();
            foreach (var row in cdata)
            {
                
                string[] arrColumn = { "" };
                arrColumn[0] = "SeriesLabel" + row;
               
                arrColumn[0] = "SeriesLabelFrance";
                absSeries.Add(
                            Html.X().LineSeries()
                                    .Axis(Position.Left)
                                    .XField("MonthName")
                                    .YField(row)
                                    .HighlightConfig(new SpriteAttributes { Size = 7, Radius = 7 })
                                    .MarkerConfig(new SpriteAttributes { Type = SpriteType.Diamond, Size = 7, Radius = 8, StrokeWidth = 0 })
                                    .Label(new SeriesLabel()
                                    {
                                        Display = SeriesLabelDisplay.Middle,
                                        Contrast = false,
                                        Field = arrColumn,
                                        Color = "#fdfdf9",
                                        StrokeWidth = 0,
                                        Stroke = "#fdfdf9",
                                        ZIndex = 100000
                                    })
    
                            );
               
                
                   
    
            }
    
            return absSeries;
    
        }//end of create chart series
    
        private void Initchart(Container pnlGrafico)
        {
    
            Ext.Net.Chart chtGrafico = new Ext.Net.Chart()
            {
                ID = "LineChart",
                Animate = true,
                Height = 300,
                Shadow = true
            };
    
            chtGrafico.LegendConfig = new ChartLegend() { Position = LegendPosition.Bottom };
            
            List<string> ColumnList = new List<string>();
    
            ColumnList.Add("Albania");
            ColumnList.Add("France");
    
            var store = CreateStore(ColumnList);
            store.DataSource = Model;
            chtGrafico.Store.Add(store);
    
            CategoryAxis categoryAxis = new CategoryAxis()
            {
                Fields = new string[] { "MonthName" }
            };
    
            string handlerTips = " var stringValue = EUR Ext.util.Format.number(value, '0.0000'); return stringValue;";
            AxisLabel l = new AxisLabel();
            l.Renderer.Handler = handlerTips;
    
            NumericAxis numericAxis = new NumericAxis()
            {
                Fields = ColumnList.ToArray(),
                GridConfig = new AxisGrid()
                {
                    Odd = new SpriteAttributes() { Opacity = 1, Fill = "#ddd", Stroke = "#bbb", StrokeWidth = 0.5 }
                },
                Title = "Prices",
                Minimum = 0.0
            };
    
            numericAxis.Position = Position.Left;
            categoryAxis.Position = Position.Bottom;
    
            chtGrafico.Axes.Add(numericAxis);
            chtGrafico.Axes.Add(categoryAxis);
    
            SeriesCollection series = new SeriesCollection();
            series = CreateChartSeries(ColumnList);
    
            foreach (var ser in series)
            {
                chtGrafico.Series.Add(ser);
            }
    
            pnlGrafico.Items.Add(chtGrafico);
        }
    
    }
    <div">
        @(Html.X().Container()
          .ID("container_MultiScenarioPriceTrend")
          .Height(400)
          .DefaultAnchor("100%")
          .Layout(LayoutType.Fit)
          .Control(item => this.Initchart(item))
    )
    </div>

    So can you please tell me what i doing wrong.


    Thanks
    Attached Thumbnails Test.png  
    Last edited by Daniil; Oct 07, 2014 at 6:43 AM. Reason: [CLOSED]
  2. #2
    Hi @,

    Your test case renders the following:
    Ext.net.ResourceMgr.init({
        isMVC: true
    });
    Ext.onReady(function () {
        Ext.create("Ext.container.Container", {
            id: "container_MultiScenarioPriceTrend",
            height: 400,
            renderTo: "App.container_MultiScenarioPriceTrend_Container",
            defaultAnchor: "100%",
            items: [{
                id: "LineChart",
                height: 300,
                xtype: "chart",
                axes: [{
                    grid: {
                        odd: {
                            "fill": "#ddd",
                            "stroke": "#bbb",
                            "stroke-width": 0.5
                        }
                    },
                    position: "left",
                    title: "Prices",
                    fields: ["Albania", "France"],
                    type: "Numeric",
                    minimum: 0.0
                }, {
                    position: "bottom",
                    fields: ["MonthName"],
                    type: "Category"
                }],
                animate: true,
                legend: {},
                series: [{
                    highlight: {
                        "radius": 7,
                        "size": 7
                    },
                    label: {
                        "stroke": "#fdfdf9",
                        "stroke-width": 0.0,
                        "zIndex": 100000,
                        "display": "middle",
                        "color": "#fdfdf9",
                        "field": "SeriesLabelFrance"
                    },
                    xField: "MonthName",
                    yField: "Albania",
                    type: "line",
                    markerConfig: {
                        "type": "diamond",
                        "radius": 8,
                        "size": 7,
                        "stroke-width": 0.0
                    }
                }, {
                    highlight: {
                        "radius": 7,
                        "size": 7
                    },
                    label: {
                        "stroke": "#fdfdf9",
                        "stroke-width": 0.0,
                        "zIndex": 100000,
                        "display": "middle",
                        "color": "#fdfdf9",
                        "field": "SeriesLabelFrance"
                    },
                    xField: "MonthName",
                    yField: "France",
                    type: "line",
                    markerConfig: {
                        "type": "diamond",
                        "radius": 8,
                        "size": 7,
                        "stroke-width": 0.0
                    }
                }],
                store: {
                    model: Ext.define(Ext.id(), {
                        extend: "Ext.data.Model",
                        fields: [{
                            name: "MonthName",
                            type: "string"
                        }, {
                            name: "Albania",
                            type: "float"
                        }, {
                            name: "SeriesLabelAlbania",
                            type: "string"
                        }, {
                            name: "France",
                            type: "float"
                        }, {
                            name: "SeriesLabelFrance",
                            type: "string"
                        }]
                    }),
                    storeId: "MultiPT",
                    autoLoad: true,
                    proxy: {
                        data: [{
                            "MonthName": "Step-13",
                            "Albania": 24.112000000000002,
                            "SeriesLabelAlbania": "A",
                            "France": 104.112,
                            "SeriesLabelFrance": "P",
                            "Data": [{
                                "Country": "Albania",
                                "IsScheduled": "True",
                                "isProvisional": false,
                                "MonthName": "Step-13",
                                "Value": 120.56
                            }, {
                                "Country": "France",
                                "IsScheduled": "True",
                                "isProvisional": true,
                                "MonthName": "Step-13",
                                "Value": 520.56
                            }]
                        }, {
                            "MonthName": "Oct-13",
                            "Albania": 44.112,
                            "SeriesLabelAlbania": "A",
                            "France": 124.112,
                            "SeriesLabelFrance": "P",
                            "Data": [{
                                "Country": "Albania",
                                "IsScheduled": "True",
                                "isProvisional": false,
                                "MonthName": "Oct-13",
                                "Value": 220.56
                            }, {
                                "Country": "France",
                                "IsScheduled": "True",
                                "isProvisional": true,
                                "MonthName": "Oct-13",
                                "Value": 620.56
                            }]
                        }, {
                            "MonthName": "Nov-13",
                            "Albania": 64.112,
                            "SeriesLabelAlbania": "A",
                            "France": 144.112,
                            "SeriesLabelFrance": "P",
                            "Data": [{
                                "Country": "Albania",
                                "IsScheduled": "True",
                                "isProvisional": false,
                                "MonthName": "Nov-13",
                                "Value": 320.56
                            }, {
                                "Country": "France",
                                "IsScheduled": "True",
                                "isProvisional": true,
                                "MonthName": "Nov-13",
                                "Value": 720.56
                            }]
                        }, {
                            "MonthName": "Dec-13",
                            "Albania": 84.112,
                            "SeriesLabelAlbania": "A",
                            "France": 164.112,
                            "SeriesLabelFrance": "P",
                            "Data": [{
                                "Country": "Albania",
                                "IsScheduled": "True",
                                "isProvisional": false,
                                "MonthName": "Dec-13",
                                "Value": 420.56
                            }, {
                                "Country": "France",
                                "IsScheduled": "True",
                                "isProvisional": true,
                                "MonthName": "Dec-13",
                                "Value": 820.56
                            }]
                        }],
                        type: 'memory'
                    }
                }
            }],
            layout: "fit"
        });
    });
    As far as you can see both the Series are rendered with the same label configuration including the "field" which a label's text comes from.
    label: {
        "stroke": "#fdfdf9",
        "stroke-width": 0.0,
        "zIndex": 100000,
        "display": "middle",
        "color": "#fdfdf9",
        "field": "SeriesLabelFrance"
    }
    I guess there is a logical error in the C# code. Please investigate.
  3. #3
    Sorry for late reply.

    Yes, in sample example which i posted there was issue sorry for that, but in real application there was no logical error.

    Anyway by changing the approach problem has been solved.

    Thanks..

Similar Threads

  1. [CLOSED] "Stop running script" message in IE 8 in line chart
    By PriceRightHTML5team in forum 2.x Premium Help
    Replies: 3
    Last Post: Apr 24, 2014, 6:54 AM
  2. Replies: 1
    Last Post: Nov 06, 2013, 4:52 PM
  3. Replies: 6
    Last Post: May 31, 2013, 4:04 AM
  4. Replies: 5
    Last Post: May 02, 2012, 6:37 PM
  5. Replies: 6
    Last Post: Jan 08, 2012, 5:06 AM

Posting Permissions