[CLOSED] Configure Legend of Line Chart Series

Page 1 of 4 123 ... LastLast
  1. #1

    [CLOSED] Configure Legend of Line Chart Series

    Hi Ext.Net Team,

    I need to configure the Legend part in the Line chart series.

    My source looks like

    Name : Aug-13, Albania1 : 1.1, Albania2: 1.1
    Name : Sep-13, Albania1 : 2.1, Albania2: 2.1
    Name : Oct-13, Albania1 : 3.1, Albania2: 3.1

    So once the line chart gets rendered we will get two line series overlapping .But in the legend it will show

    Albania1 and Albania 2

    Can i configure this legend to only show as "Albania"

    Please let me know if this is possible.

    Thanks
    Last edited by Baidaly; Oct 19, 2013 at 5:21 AM. Reason: [CLOSED]
  2. #2
    Hi @PriceRightHTML5team,

    Unfortunately, there is no such functionality out of the box.

    You can investigate the Legend's sources. Maybe, it is possible to override it achieving your requirement.
    http://docs.sencha.com/extjs/4.2.1/s...t-chart-Legend
  3. #3
    Quote Originally Posted by Daniil View Post
    Hi @PriceRightHTML5team,

    Unfortunately, there is no such functionality out of the box.

    You can investigate the Legend's sources. Maybe, it is possible to override it achieving your requirement.
    http://docs.sencha.com/extjs/4.2.1/s...t-chart-Legend
    Hi.. sorry i am not much aware on how to override the ExtJs can you give me the starting point just a brief snippet and how to do.

    Thanks
  4. #4
    Probably (not sure), you will need to override a Legend's createItems method. Here is the original code. You can change it as you need. Then put it a page's <head> wrapping in a script tag.
    Ext.chart.Legend.override({
        createItems: function() {
            var me = this,
                seriesItems = me.chart.series.items,
                items = me.items,
                fields, i, li, j, lj, series, item;
    
            //remove all legend items
            me.removeItems();
            
            // Create all the item labels
            for (i = 0, li = seriesItems.length; i < li; i++) {
                series = seriesItems[i];
                
                if (series.showInLegend) {
                    fields = [].concat(series.yField);
                    
                    for (j = 0, lj = fields.length; j < lj; j++) {
                        item = me.createLegendItem(series, j);
                        items.push(item);
                    }
                }
            }
            
            me.alignItems();
        }
    });
    Last edited by Daniil; Mar 11, 2014 at 2:50 PM.
  5. #5
    Here's what i have implemented. I do manage to change the legend to "Albania" but there no lines generated:

    My Data Source is:

    Name Albania1 Albania2

    Aug-13 1.1 1.2
    Sept-13 2.1 2.2 and so on..............

    Below is the JS code

    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();
            }
        });
    Any idea what might be wrong/ missing
  6. #6
    Is there any JavaScript error?
  7. #7
    Quote Originally Posted by Daniil View Post
    Is there any JavaScript error?
    No..there is no JS error.
    Is it due to that my datasource has no column with name "Albania".

    If that's the case how do i configure to make the graph working.

    Any ideas would be of great help
  8. #8
    So, do you mean that it renders a chart correctly with the Legend override?
  9. #9
    Quote Originally Posted by Daniil View Post
    So, do you mean that it renders a chart correctly with the Legend override?
    I see the Chart with its X-Axis and Y-Axis along with the legend box bu don't see the lines on the graph
  10. #10
    So, is a chart rendered without the Legend override?
Page 1 of 4 123 ... 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