[CLOSED] Configure Legend of Line Chart Series

Page 3 of 4 FirstFirst 1234 LastLast
  1. #21
    Ok...Here's is the entire running test case

    Model
     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;
            }
    
        }
    //View
    @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;
        }
    
    }
    <div style="margin-top: -34%">
        @(Html.X().Container()
          .ID("container_MultiScenarioPriceTrend")
          .Height(400)
          .DefaultAnchor("100%")
          .Layout(LayoutType.Fit)
          .Control(item => this.Initchart(item))
    )
    </div>
    Javascript Function:

    <script type="text/javascript">
    
        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;
                var tempVar = '';;
                var trimmedField = '';
                me.removeItems();
                for (i = 0, li = seriesItems.length; i < li; i++) {
                    series = seriesItems[i];
    
                    if (series.yField.indexOf("1") != -1 || series.yField.indexOf("2") != -1) {
                        trimmedField = series.yField.substring(0, series.yField.length - 1);
                        if (tempVar != trimmedField) {
                            tempVar = trimmedField;
                            var a = series;
                            a.yField = tempVar;
                            if (a.showInLegend) {
                                fields = [].concat(a.yField);
    
                                for (j = 0, lj = fields.length; j < lj; j++) {
                                    item = me.createLegendItem(a, j);
                                    items.push(item);
                                }
                            }
                        }
                        trimmedField = '';
                    }
    
                }
                me.alignItems();
            }
        });
    
    </script>
    So when you tun this code in the legend box we see "Albania" and "France" but no line series.If we remove the override script we see the line series

    also please let me know if you face any issues running the test case
    Last edited by PriceRightHTML5team; Oct 11, 2013 at 6:17 AM.
  2. #22
    Thank you for the sample. Please, try the following overriding:

    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;
    
            var tempVar = '';;
            var trimmedField = '';
                
            me.removeItems();
            for (i = 0, li = seriesItems.length; i < li; i++) {
                series = seriesItems[i];
     
                if (series.yField.indexOf("2") != -1)
                    series.showInLegend = false;
                    
                if (series.showInLegend) {
                    if (series.yField.indexOf("1") != -1)
                        series.title = series.yField.substring(0, series.yField.length - 1);
                            
                    fields = [].concat(series.yField);
    
                    for (j = 0, lj = fields.length; j < lj; j++) {
                        item = me.createLegendItem(series, j);
                        items.push(item);
                    }
                }
            }
            me.alignItems();
        }
    });
  3. #23
    Quote Originally Posted by Baidaly View Post
    Thank you for the sample. Please, try the following overriding:

    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;
    
            var tempVar = '';;
            var trimmedField = '';
                
            me.removeItems();
            for (i = 0, li = seriesItems.length; i < li; i++) {
                series = seriesItems[i];
     
                if (series.yField.indexOf("2") != -1)
                    series.showInLegend = false;
                    
                if (series.showInLegend) {
                    if (series.yField.indexOf("1") != -1)
                        series.title = series.yField.substring(0, series.yField.length - 1);
                            
                    fields = [].concat(series.yField);
    
                    for (j = 0, lj = fields.length; j < lj; j++) {
                        item = me.createLegendItem(series, j);
                        items.push(item);
                    }
                }
            }
            me.alignItems();
        }
    });
    Thanks!!!!
    The given solution worked, I can now see only "Albania" , but the issue is when i click on country name in the legend box...only the one line gets hidden..How to configure the click of legend to hide both the line series from the same country...Thanks for all the support
  4. #24
    So it needs another overriding. Try the following:

    Ext.override(Ext.chart.LegendItem, {
        onMouseDown: function () {
            var me = this,
                index = me.yFieldIndex;
    
            if (!me.hiddenSeries) {
                me.series.hideAll(index);
                    
                Ext.Array.forEach(me._connectedSeries, function (item) { item.hideAll(); });
    
                me.label.setAttributes({
                    opacity: 0.5
                }, true);
            } else {
                me.series.showAll(index);
                    
                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();
        }
    });
  5. #25
    Its throwing javascript exception on following line

    Ext.Array.forEach(me._connectedSeries, function (item) { item.hideAll(); });

    exception is

    "Unable to get property 'forEach' of undenfined or null reference"
  6. #26
    Hmm, I am not sure how "Ext.Array" could be null or undefined. It is a part of ExtJS:
    http://docs.sencha.com/extjs/4.2.1/#!/api/Ext.Array
  7. #27
    Try to change forEach to the following:

    Ext.Array.each(me._connectedSeries, function (item) { item.hideAll(); });
  8. #28
    Quote Originally Posted by Baidaly View Post
    Try to change forEach to the following:

    Ext.Array.each(me._connectedSeries, function (item) { item.hideAll(); });

    I debugged the javascript:

    me._connectedSeries is undefined

    And so the forEach loop was throwing exception. And if replace it with just the each loop the result is same as previous only one line series gets hidden.

    Am i missing any property / setting since _connectedSeries is undefined ..
    thanks for all the assitance
  9. #29
    Quote Originally Posted by PriceRightHTML5team View Post
    I debugged the javascript:

    me._connectedSeries is undefined

    And so the forEach loop was throwing exception. And if replace it with just the each loop the result is same as previous only one line series gets hidden.

    Am i missing any property / setting since _connectedSeries is undefined ..
    thanks for all the assitance
    Use the following code with checking of the existence of field:

    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();
    }
    Last edited by Baidaly; Oct 17, 2013 at 8:47 PM.
  10. #30
    Unfortunately its the same result.

    Only one line series is getting hidden.
Page 3 of 4 FirstFirst 1234 LastLast

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