[CLOSED] Increase the legend line height

  1. #1

    [CLOSED] Increase the legend line height

    HI Daniil

    Can you please tell me how to increase the legend line height for the chart

    Please find the code and screenshot
    <%@ Page Language="C#" AutoEventWireup="true" %>
    
    <%@ Import Namespace="System.Xml" %>
    <%@ Import Namespace="System.Collections.Generic" %>
    <%@ Import Namespace="System.Data.SqlClient" %>
    <%@ Import Namespace="System.Data" %>
    <%@ Import Namespace="Ext.Net" %>
    <%@ Register Assembly="Ext.Net" Namespace="Ext.Net" TagPrefix="ext" %>
    <script runat="server"> 
        protected void Page_Load(object sender, EventArgs e)
        {
            if (!X.IsAjaxRequest)
            {
                try
                {
                    ddlCpiSpiChartScale.SetValue("3");
                    BindRecords();
                }
                catch (System.Data.SqlClient.SqlException ex)
                {
                    string strin = ex.ToString();
                }
            }
        }
    
        public void BindRecords()
        {
            DataTable dtSpiCpi = new DataTable();
            dtSpiCpi.Locale = System.Globalization.CultureInfo.InvariantCulture;
            dtSpiCpi.Columns.Add("DateName", typeof(string));
            dtSpiCpi.Columns.Add("Column1", typeof(decimal));
            dtSpiCpi.Columns.Add("Column2", typeof(decimal));
            dtSpiCpi.Columns.Add("Column3", typeof(decimal));
            dtSpiCpi.Columns.Add("Column4", typeof(decimal));
    
            DataRow objRow = null;
    
            for (int index = 1; index <= 12; index++)
            {
                objRow = dtSpiCpi.NewRow();
                objRow["DateName"] = index + "Jan15";
    
                if (index < 3)
                {
                    objRow["Column1"] = Convert.ToDecimal("2.50");
                    objRow["Column3"] = Convert.ToDecimal("2.10");
                    objRow["Column4"] = Convert.ToDecimal("2.00");
                    objRow["Column2"] = Convert.ToDecimal("1.0");
                }
                else if (index < 5)
                {
                    objRow["Column1"] = Convert.ToDecimal("1.0");
                    objRow["Column2"] = Convert.ToDecimal("2.0");
                    //objRow["Column3"] = Convert.ToDecimal("3.0");
                    objRow["Column4"] = Convert.ToDecimal("4.0");
                }
                else if (index < 7)
                {
                    //objRow["Column1"] = Convert.ToDecimal("9.0");
                    objRow["Column2"] = Convert.ToDecimal("3.0");
                    objRow["Column3"] = Convert.ToDecimal("2.0");
                    objRow["Column4"] = Convert.ToDecimal("3.0");
    
                }
                else
                {
                    objRow["Column1"] = Convert.ToDecimal("4.9");
                    objRow["Column2"] = Convert.ToDecimal("3.0");
                    objRow["Column3"] = Convert.ToDecimal("2.0");
                    objRow["Column4"] = Convert.ToDecimal("1.0");
    
                }
                dtSpiCpi.Rows.Add(objRow);
            }
            chartSpiCpi.RemoveAll(); storeSpiCpi.RemoveAll();
            DataRow drNewRow = dtSpiCpi.NewRow();
            drNewRow[0] = string.Empty;
            dtSpiCpi.Rows.InsertAt(drNewRow, 0);
            drNewRow = dtSpiCpi.NewRow();
            drNewRow[0] = string.Empty; dtSpiCpi.Rows.InsertAt(drNewRow, 13);
            storeSpiCpi.RemoveAll();
            storeSpiCpi.DataSource = dtSpiCpi;
            storeSpiCpi.DataBind();
        }
    </script>
    
    <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" 
        "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
    <html xmlns="http://www.w3.org/1999/xhtml">
    <head id="Head1" runat="server">
        <title>Submit MultiSelect Values - Ext.NET Examples</title>
        <script type="text/javascript" language="javascript">
            Ext.chart.Legend.override({
                updateItemDimensions: function () {
                    var ret = this.callParent(arguments);
                    ret.maxHeight += 150;
                    return ret;
                }
            });
        </script>
    </head>
    <body>
        <form id="Form1" runat="server">
            <ext:ResourceManager ID="ResourceManager1" runat="server" Namespace="" />
            <table border="0">
                <tr>
                    <td>
                        <ext:ChartTheme ID="ChartTheme1" runat="server" ThemeName="CustomBlue">
                            <Axis Stroke="Black" />
                            <AxisLabelLeft Font="normal 11px Arial" StrokeWidth="0.5" />
                            <AxisLabelBottom Font="normal 11px Arial" StrokeWidth="0.5" />
                        </ext:ChartTheme>
                        <ext:ComboBox runat="server" ID="ddlCpiSpiChartScale" Selectable="true" Editable="false" HideTrigger="false" Hidden="true"
                            Width="100px">
                            <Items>
                                <ext:ListItem Text="None" Value="1" />
                                <ext:ListItem Text="0 to 2" Value="2" />
                                <ext:ListItem Text="0 to 4" Value="3" />
                            </Items>
                            <Listeners>
                                <Select Handler="ShowCpiSpiChartAfter_ChangeOnSetScaleIndex();" />
                            </Listeners>
                        </ext:ComboBox>
                        <ext:Panel ID="PanelYtd" runat="server" Width="1000" Border="false" Height="500" Layout="FitLayout">
                            <Items>
                                <ext:Chart ID="chartSpiCpi" runat="server" Shadow="false" Theme="CustomBlue"
                                    Animate="true" Width="850" Height="425" Legend="true" StyleSpec="background:#fff;">
                                    <Store>
                                        <ext:Store ID="storeSpiCpi" runat="server">
                                            <Model>
                                                <ext:Model ID="Model16" runat="server">
                                                    <Fields>
                                                        <ext:ModelField Name="DateName" Type="String" />
                                                        <ext:ModelField Name="Column1">
                                                            <Convert Handler="if (value == null) {
                                                                                value = undefined;
                                                                            }                                                 
                                                                            return value;" />
                                                        </ext:ModelField>
                                                        <ext:ModelField Name="Column2">
                                                            <Convert Handler="if (value == null) {
                                                                                    value = undefined;
                                                                                }                                                 
                                                                                return value;" />
                                                        </ext:ModelField>
                                                        <ext:ModelField Name="Column3">
                                                            <Convert Handler="if (value == null) {
                                                                                    value = undefined;
                                                                                }                                                 
                                                                                return value;" />
                                                        </ext:ModelField>
                                                        <ext:ModelField Name="Column4">
                                                            <Convert Handler="if (value == null) {
                                                                                value = undefined;
                                                                            }                                                 
                                                                            return value;" />
                                                        </ext:ModelField>
                                                    </Fields>
                                                </ext:Model>
                                            </Model>
                                        </ext:Store>
                                    </Store>
                                    <Axes>
                                        <ext:NumericAxis Position="Left" Fields="Column1,Column2,Column3,Column4" Title="Y">
                                            <LabelTitle Fill="#000000" FontSize="11px" FontStyle="Normal" />
                                            <GridConfig>
                                                <Odd Opacity="0.5" Stroke="Black" Fill="White" StrokeWidth="0.1" />
                                                <Even Opacity="0.5" Stroke="Black" Fill="White" StrokeWidth="0.1" />
                                            </GridConfig>
                                        </ext:NumericAxis>
                                        <ext:CategoryAxis Position="Bottom" Fields="DateName">
                                            <LabelTitle Font="normal 11px Arial;" Stroke="Black" Fill="#000000" />
                                            <Label Font="normal 11px Arial;" Fill="#000000" />
                                        </ext:CategoryAxis>
                                    </Axes>
                                    <LegendConfig Position="Bottom" BoxStroke="white" BoxStrokeWidth="5" ItemSpacing="25" LabelFont="normal 11px Arial;">
                                    </LegendConfig>
                                    <Series>
                                        <ext:LineSeries Axis="Left" XField="DateName" YField="Column1" Title="Column1" Smooth="10" SelectionTolerance="5">
                                            <Tips ID="Tips2" runat="server" TrackMouse="false" Width="330" Anchor="right" ShowDelay="0" DismissDelay="0" HideDelay="0">
                                                <Renderer Handler="this.setTitle('Column 1: ' + item.value[1] + ' (Click here to see drill down report)');" Delay="500" />
                                            </Tips>
                                            <MarkerConfig Fill="#6A8829" Stroke="#6A8829" Type="Circle" Radius="2" StrokeWidth="2" Cursor="pointer" />
                                            <Style Stroke="#6A8829" StrokeWidth="2" />
                                            <Label Font="normal 11px Arial;" Stroke="Black" Fill="White" />
                                        </ext:LineSeries>
                                        <ext:LineSeries Axis="Left" XField="DateName" YField="Column2" Title="Column2" Smooth="10" SelectionTolerance="5">
                                            <Tips ID="Tips3" runat="server" TrackMouse="false" Width="330" Anchor="right" ShowDelay="0" DismissDelay="0" HideDelay="0">
                                                <Renderer Handler="this.setTitle('Column 2: ' + item.value[1] + ' (Click here to see drill down report)');" Delay="500" />
                                            </Tips>
                                            <MarkerConfig Fill="#E15E00" Stroke="#E15E00" Type="Circle" Radius="2" StrokeWidth="2" Cursor="pointer" />
                                            <Style Stroke="#E15E00" StrokeWidth="2" />
                                            <Label Font="normal 11px Arial;" Stroke="Black" Fill="White" />
                                        </ext:LineSeries>
                                        <ext:LineSeries Axis="Left" XField="DateName" YField="Column3" Title="Column3" Smooth="10" SelectionTolerance="5">
                                            <Tips ID="Tips4" runat="server" TrackMouse="false" Width="330" Anchor="right" ShowDelay="0" DismissDelay="0" HideDelay="0">
                                                <Renderer Handler="this.setTitle('Column 3: ' + item.value[1] + ' (Click here to see drill down report)');" Delay="500" />
                                            </Tips>
                                            <MarkerConfig Fill="#1E7A93" Stroke="#1E7A93" Type="Diamond" Radius="2" StrokeWidth="2" Cursor="pointer" />
                                            <Style Stroke="#1E7A93" StrokeWidth="2" />
                                            <Label Font="normal 11px Arial;" Stroke="Black" Fill="White" />
                                        </ext:LineSeries>
                                        <ext:LineSeries Axis="Left" XField="DateName" YField="Column4" Title="Column4" Smooth="10" SelectionTolerance="5">
                                            <Tips ID="Tips5" runat="server" TrackMouse="false" Width="330" Anchor="right" ShowDelay="0" DismissDelay="0" HideDelay="0">
                                                <Renderer Handler="this.setTitle('Column 4: ' + item.value[1] + ' (Click here to see drill down report)');" Delay="500" />
                                            </Tips>
                                            <MarkerConfig Fill="#50386E" Stroke="#50386E" Type="Diamond" Radius="2" StrokeWidth="2" Cursor="pointer" />
                                            <Style Stroke="#50386E" StrokeWidth="2" />
                                            <Label Font="normal 11px Arial;" Stroke="Black" Fill="White" />
                                        </ext:LineSeries>
                                    </Series>
                                </ext:Chart>
                            </Items>
                        </ext:Panel>
    
                    </td>
                </tr>
            </table>
    
        </form>
    </body>
    </html>

    Regards
    Praveen
    Attached Thumbnails Click image for larger version. 

Name:	LegendHeight.png 
Views:	86 
Size:	20.1 KB 
ID:	24214  
    Last edited by Daniil; Sep 15, 2015 at 7:54 PM. Reason: [CLOSED]
  2. #2
    Hi @praveencat123,

    There is the LegendItem JavaScript class that is responsible for legend items.
    http://docs.sencha.com/extjs/4.2.1/#...art.LegendItem

    I would recommend to review its sources.
    http://docs.sencha.com/extjs/4.2.1/s...art-LegendItem

    In particular, the following methods appear to be responsible for drawing that line and marker. You can try to override them adjusting the sizes. I am posting the original code.

    Ext.chart.LegendItem.override({
        createSeriesMarkers: function (config) {
            var me = this,
                index = config.yFieldIndex,
                series = me.series,
                seriesType = series.type,
                surface = me.surface,
                z = me.zIndex;
    
            // Line series - display as short line with optional marker in the middle
            if (seriesType === 'line' || seriesType === 'scatter') {
                if (seriesType === 'line') {
                    var seriesStyle = Ext.apply(series.seriesStyle, series.style);
                    me.drawLine(0.5, 0.5, 16.5, 0.5, z, seriesStyle, index);
                };
    
                if (series.showMarkers || seriesType === 'scatter') {
                    var markerConfig = Ext.apply(series.markerStyle, series.markerConfig || {}, {
                        fill: series.getLegendColor(index)
                    });
                    me.drawMarker(8.5, 0.5, z, markerConfig);
                }
            }
            // All other series types - display as filled box
            else {
                me.drawFilledBox(12, 12, z, index);
            }
        },
    
        drawLine: function (fromX, fromY, toX, toY, z, seriesStyle, index) {
            var me = this,
                surface = me.surface,
                series = me.series;
    
            return me.add('line', surface.add({
                type: 'path',
                path: 'M' + fromX + ',' + fromY + 'L' + toX + ',' + toY,
                zIndex: (z || 0) + 2,
                "stroke-width": series.lineWidth,
                "stroke-linejoin": "round",
                "stroke-dasharray": series.dash,
                stroke: seriesStyle.stroke || series.getLegendColor(index) || '#000',
                style: {
                    cursor: 'pointer'
                }
            }));
        },
    
        drawMarker: function (x, y, z, markerConfig) {
            var me = this,
                surface = me.surface,
                series = me.series;
    
            return me.add('marker', Ext.chart.Shape[markerConfig.type](surface, {
                fill: markerConfig.fill,
                x: x,
                y: y,
                zIndex: (z || 0) + 2,
                radius: markerConfig.radius || markerConfig.size,
                style: {
                    cursor: 'pointer'
                }
            }));
        }
    });

Similar Threads

  1. [CLOSED] Increase the height of legend, Change line color of chart
    By praveencat123 in forum 2.x Legacy Premium Help
    Replies: 1
    Last Post: Aug 26, 2015, 2:26 PM
  2. [CLOSED] How to increase the height of Inner-Ct
    By arjunrvasisht in forum 2.x Legacy Premium Help
    Replies: 3
    Last Post: Feb 13, 2015, 6:12 AM
  3. [CLOSED] Line chart getting shrink, due to legend box Height
    By PriceRightHTML5team in forum 2.x Legacy Premium Help
    Replies: 4
    Last Post: May 08, 2014, 9:12 AM
  4. [CLOSED] How can increase the size line of the lineSeries
    By tactime10 in forum 2.x Legacy Premium Help
    Replies: 3
    Last Post: Sep 21, 2012, 1:59 PM
  5. How we can increase the Row height of Listview
    By NishaLijo in forum 1.x Help
    Replies: 1
    Last Post: Mar 23, 2012, 1:14 PM

Tags for this Thread

Posting Permissions