[CLOSED] Configure Legend of Line Chart Series

Page 4 of 4 FirstFirst ... 234
  1. #31
    Sorry, I couldn't reproduce. I tried the following View:

    @using System.Data
    @functions
    {
       public class TestClass
       {
           public string ScenarioName { get; set; }
           public string Country { get; set; }
           public string Date { get; set; }
           public double Value { get; set; }
     
           public static List<TestClass> GetRecords()
           {
               List<TestClass> list = new List<TestClass>();
               list.Add(new TestClass() { ScenarioName = "A", Country = "Albania", Date = "Aug-2013", Value = 1.1 });
               list.Add(new TestClass() { ScenarioName = "A", Country = "Albania", Date = "Sept-2013", Value = 2.1 });
               list.Add(new TestClass() { ScenarioName = "A", Country = "Albania", Date = "Oct-2013", Value = 3.1 });
               list.Add(new TestClass() { ScenarioName = "A", Country = "Albania", Date = "Nov-2013", Value = 4.1 });
               list.Add(new TestClass() { ScenarioName = "A", Country = "France", Date = "Aug-2013", Value = 1.7 });
               list.Add(new TestClass() { ScenarioName = "A", Country = "France", Date = "Sept-2013", Value = 2.7 });
               list.Add(new TestClass() { ScenarioName = "A", Country = "France", Date = "Oct-2013", Value = 3.7 });
               list.Add(new TestClass() { ScenarioName = "A", Country = "France", Date = "Nov-2013", Value = 4.7 });
               list.Add(new TestClass() { ScenarioName = "B", Country = "Albania", Date = "Aug-2013", Value = 1.1 });
               list.Add(new TestClass() { ScenarioName = "B", Country = "Albania", Date = "Sept-2013", Value = 1.2 });
               list.Add(new TestClass() { ScenarioName = "B", Country = "Albania", Date = "Oct-2013", Value = 1.3 });
               list.Add(new TestClass() { ScenarioName = "B", Country = "Albania", Date = "Nov-2013", Value = 1.4 });
               list.Add(new TestClass() { ScenarioName = "B", Country = "France", Date = "Aug-2013", Value = 1.7});
               list.Add(new TestClass() { ScenarioName = "B", Country = "France", Date = "Sept-2013", Value = 1.8 });
               list.Add(new TestClass() { ScenarioName = "B", Country = "France", Date = "Oct-2013", Value = 1.9 });
               list.Add(new TestClass() { ScenarioName = "B", Country = "France", Date = "Nov-2013", Value = 2 });
     
               return list;
           }
     
       }
    }
    
    @functions{
    private Store CreateStore(List<string> listName)
        {
            Store store = new Store();
            store.ID = "MultiPT";
            var model = new Model();
            model.Fields.Add(new ModelField("Name", ModelFieldType.String));
            listName.ForEach(column =>
            {
                model.Fields.Add(new ModelField(column, ModelFieldType.Float)
                {
                    Convert =
                    {
                        Handler = @"
                        if (typeof value === 'number') {
                            return value;
                        }
     
                         
                        return value !== undefined && value !== null && value !== '' ?
                            parseFloat(String(value).replace(Ext.data.Types.stripRe, ''), 10) : false;"
                    }
                });
            });
            store.Model.Add(model);
     
            return store;
        }//end of create store
     
        private SeriesCollection CreateChartSeries1(DataTable dt, List<string> cdata)
        {
            SeriesCollection absSeries = new SeriesCollection();
            absSeries = new SeriesCollection();
            string toolTip = "";
            foreach (var row in cdata)
            {
                toolTip = "this.setTitle(storeItem.get('Name') + '   ,'+ storeItem.get('" + row + "'));";
                if (row.Contains("1"))
                {
                     
                    absSeries.Add(
                              Html.X().LineSeries()
                                      .Axis(Position.Left)
                                      .XField("Name")
                                      .YField(row)
                                      .HighlightConfig(new SpriteAttributes { Size = 7, Radius = 7 })
                                      .MarkerConfig(new SpriteAttributes { Type = SpriteType.Diamond, Size = 5, Radius = 5, StrokeWidth = 0 })
                                      .Tips(Html.X().ChartTip()
                                          .TrackMouse(true)
                                          .Width(80)
                                          .Height(28)
                                           .Renderer(r => r.Handler = toolTip)
                                      )
                              );
                }
                else if (row.Contains("2"))
                {
     
                    absSeries.Add(
                              Html.X().LineSeries()
                                      .Axis(Position.Left)
                                      .XField("Name")
                                      .YField(row)
                                      .HighlightConfig(new SpriteAttributes { Size = 7, Radius = 7 })
                                      .MarkerConfig(new SpriteAttributes { Type = SpriteType.Cross, Size = 5, Radius = 5, StrokeWidth = 0 })
                                      .Tips(Html.X().ChartTip()
                                          .TrackMouse(true)
                                          .Width(80)
                                          .Height(28)
                                           .Renderer(r => r.Handler = toolTip)
                                      )
                              );
                }
     
            }
     
            return absSeries;
     
        }//end of create chart series
     
        private void Initchart(Container pnlGrafico)
        {
            var result = TestClass.GetRecords();
            var dt = GenerateData(result);
     
            Ext.Net.Chart chtGrafico = new Ext.Net.Chart()
            {
                ID = "LineChart",
                Animate = true,
                Height = 300,
                Shadow = true
            };
     
            chtGrafico.LegendConfig = new ChartLegend() { Position = LegendPosition.Right };
            List<string> listName = GetColumnNames();
            var store = CreateStore(listName);
     
            store.DataSource = dt;
            chtGrafico.Store.Add(store);
     
     
            CategoryAxis categoryAxis = new CategoryAxis()
            {
                Fields = new string[] { "Name" }
            };
     
            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 = listName.ToArray(),
                GridConfig = new AxisGrid()
                {
                    Odd = new SpriteAttributes() { Opacity = 1, Fill = "#ddd", Stroke = "#bbb", StrokeWidth = 0.5 }
                },           
                Title = "Price for Pack",
                Minimum = 0.0
            };
     
            numericAxis.Position = Position.Left;
            categoryAxis.Position = Position.Bottom;
     
            chtGrafico.Axes.Add(numericAxis);
            chtGrafico.Axes.Add(categoryAxis);
     
            SeriesCollection series = new SeriesCollection();
            series = CreateChartSeries1(dt, listName);
     
            foreach (var ser in series)
            {
                chtGrafico.Series.Add(ser);
            }
     
            pnlGrafico.Items.Add(chtGrafico);
        }
     
        public List<string> GetColumnNames()
        {
            List<string> lst = new List<string>();
     
            //Here we add ColumnNames to the list i.e. 'Albania1','Albania2','France1','France2'       
            lst.Add("Albania1");
            lst.Add("Albania2");
            lst.Add("France1");
            lst.Add("France2");
     
            return lst;
     
        }//end of function for creating column names
     
        private DataTable GenerateData(IList<TestClass> result)
        {
            List<string> countryList = new List<string>();
            countryList.Add("Albania");
            countryList.Add("France");
     
            DataTable dt = new DataTable();
            var countryColumn = new DataColumn("Name");
            dt.Columns.Add(countryColumn);
            int colCount = 1;
            foreach (var rec in countryList)
            {
                int dtRowsCount = 0;
                int dtRowsCount1 = 0;
                var dataList = result.Where(s => s.ScenarioName == "A");
     
     
                var CountryName = rec + "1"; //For Scenario 1
                var countyCol = new DataColumn(CountryName);
                dt.Columns.Add(CountryName);
                if (colCount == 1)
                {
                    foreach (var item in dataList)
                    {
                        var dataRow = dt.NewRow();
                        dataRow["Name"] = item.Date;
                        dataRow[CountryName] = item.Value;
                        dt.Rows.Add(dataRow);
                    }
                }
                else
                {
     
                    foreach (var data in dataList)
                    {
                        dt.Rows[dtRowsCount][colCount] = data.Value;
                        dtRowsCount++;
                    }
                }
                colCount++;
     
                //Second Scenario
                var dataList1 = result.Where(s => s.ScenarioName == "B");
                var CountryName1 = rec + "2"; //For Scenario 2
                var countyCol1 = new DataColumn(CountryName);
                dt.Columns.Add(CountryName1);
     
                foreach (var data in dataList1)
                {
                    dt.Rows[dtRowsCount1][colCount] = data.Value;
                    dtRowsCount1++;
                }
                colCount++;
            }
            return dt;
        }
     
    }
    
    @Html.X().ResourceManager()
    
    <script>
        Ext.override(Ext.chart.LegendItem, {
            onMouseDown: function () {
                var me = this,
                    index = me.yFieldIndex;
    
                if (!me.hiddenSeries) {
                    me.series.hideAll(index);
                    if (me._connectedSeries != undefined)
                        Ext.Array.forEach(me._connectedSeries, function (item) { item.hideAll(); });
    
                    me.label.setAttributes({
                        opacity: 0.5
                    }, true);
                } else {
                    me.series.showAll(index);
                    if (me._connectedSeries != undefined)
                        Ext.Array.forEach(me._connectedSeries, function (item) { item.showAll(); });
    
                    me.label.setAttributes({
                        opacity: 1
                    }, true);
                }
                me.hiddenSeries = !me.hiddenSeries;
                me.legend.chart.redraw();
            }
        });
    
        Ext.override(Ext.chart.Legend, {
            createItems: function () {
                var me = this,
                    seriesItems = me.chart.series.items,
                    items = me.items,
                    fields, i, li, j, lj, series, item;
    
                me.removeItems();
                for (i = 0, li = seriesItems.length; i < li; i++) {
                    series = seriesItems[i];
    
                    if (series.yField[series.yField.length - 1] == '2')
                        series.showInLegend = false;
    
                    if (series.showInLegend) {
                        var connectedSeries = [];
                        if (series.yField[series.yField.length - 1] == '1') {
                            series.title = series.yField.substring(0, series.yField.length - 1);
    
                            connectedSeries = seriesItems.filter(function (item) {
                                if (item.yField == series.yField.substring(0, series.yField.length - 1) + '2') {
                                    return item;
                                }
                            });
                        }
    
                        fields = [].concat(series.yField);
    
                        for (j = 0, lj = fields.length; j < lj; j++) {
                            item = me.createLegendItem(series, j);
                            items.push(item);
                        }
    
                        item._connectedSeries = connectedSeries;
                    }
                }
                me.alignItems();
            }
        });
    </script>
    
    @(Html.X().Container()
        .ID("container_MultiScenarioPriceTrend")
        .Height(400)
        .DefaultAnchor("100%")
        .Layout(LayoutType.Fit)
        .Control(item => this.Initchart(item))
    )
  2. #32
    Ohh... i had the wrong override of createItems on my side. Yes its working.

    Thanks
Page 4 of 4 FirstFirst ... 234

Similar Threads

  1. Replies: 5
    Last Post: Mar 11, 2014, 3:03 PM
  2. [CLOSED] Handle null values in line chart series
    By PriceRightHTML5team in forum 2.x Legacy Premium Help
    Replies: 12
    Last Post: Jul 29, 2013, 8:50 AM
  3. How to use Line series Chart in version 1.3
    By Binai in forum 1.x Help
    Replies: 1
    Last Post: May 08, 2013, 12:46 PM
  4. [CLOSED] [#8] Chart: Hide Line Series values
    By cwolcott in forum 2.x Legacy Premium Help
    Replies: 12
    Last Post: Mar 14, 2013, 5:41 AM
  5. [OPEN] [#77] Chart legend problems with large amount of series
    By MWM2Dev in forum 2.x Legacy Premium Help
    Replies: 14
    Last Post: Dec 21, 2012, 4:23 AM

Tags for this Thread

Posting Permissions