[CLOSED] Increase the height of legend, Change line color of chart

  1. #1

    [CLOSED] Increase the height of legend, Change line color of chart

    HI Daniil


    We have a existing application which is using ASP.NET charts and we are replacing ASP.NET with Ext.net charts

    According to you client Ext.net chart should match with ASP.NET chart (UI)

    Following are the issue we are facing can you please help on this

    1) Increase the height of legend as shown in screenshot
    2) First value need to start from index 1 instead of index 0 as shown in screenshot
    3) Change the line color to Black for the chart (axis filed color) as showing in screenshot


    Below is the code


    <%@ 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 BtnReset_Click(object sender, DirectEventArgs e)
        {
            //chartSpiCpi.Legend = false;
    
            //chartSpiCpi.Items.Clear();
            ddlCpiSpiChartScale.SetValue("3");
            BindRecords();
            chartSpiCpi.ReRender();
        }
    
        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("4.00");
                    objRow["Column3"] = Convert.ToDecimal("3.00");
                    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();
            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>
        <link href="../../../../resources/css/examples.css" rel="stylesheet" type="text/css" />
        <style type="text/css">
            .x-ie8m .my-marker {
                cursor: pointer;
            }
        </style>
        <ext:XScript ID="XScript1" runat="server">
    
            <script type="text/javascript">  
                function ShowCpiSpiChartAfter_ChangeOnSetScaleIndex() {    
                    if(#{ddlCpiSpiChartScale}.getValue() == "1")
                    {                   
    
                        #{chartSpiCpi}.axes.getAt(0).minimum = 0 ; 
                        #{chartSpiCpi}.axes.getAt(0).maximum  = 5; 
                        #{chartSpiCpi}.redraw();
                    }
                    else  if(#{ddlCpiSpiChartScale}.getValue() == "2")
                    {
                        #{chartSpiCpi}.axes.getAt(0).minimum = 0;
                        #{chartSpiCpi}.axes.getAt(0).maximum  = 2;
                        #{chartSpiCpi}.redraw();
                    }
                    else  if(#{ddlCpiSpiChartScale}.getValue() == "3")
                    {
                        #{chartSpiCpi}.axes.getAt(0).minimum = 0;
                        #{chartSpiCpi}.axes.getAt(0).maximum  = 4;
                        #{chartSpiCpi}.redraw();
                    }
                    
                       #{chartSpiCpi}.redraw();
                        #{chartSpiCpi}.refresh();
                        #{chartSpiCpi}.forceRefresh(); 
                    //Ext.net.Mask.hide();   
                    //setTimeout("delay(3000); Ext.net.Mask.hide();", 0);
                }
        </script>
            
            
    
        </ext:XScript>
        <script type="text/javascript" language="javascript">
    
    
             
        </script>
    </head>
    <body>
        <form id="Form1" runat="server">
            <ext:ResourceManager ID="ResourceManager1" runat="server" Namespace="" />
            <table border="1">
                <tr>
                    <td>
                        
                        <ext:ComboBox runat="server" ID="ddlCpiSpiChartScale" Selectable="true" Editable="false" HideTrigger="false"
                            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" Height="500" Layout="FitLayout">
                            <Items>
                                <ext:Chart ID="chartSpiCpi" runat="server" Shadow="true"  
                                    Animate="true" Width="850" Height="425" >
                                    <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">
                                                        </ext:ModelField>
                                                        <ext:ModelField Name="Column2">
                                                        </ext:ModelField>
                                                        <ext:ModelField Name="Column3">
                                                        </ext:ModelField>
                                                        <ext:ModelField Name="Column4">
                                                        </ext:ModelField>
                                                    </Fields>
                                                </ext:Model>
                                            </Model>
                                        </ext:Store>
                                    </Store>
                                    <Axes>
                                        <ext:NumericAxis Position="Left" Fields="Column1,Column2,Column3,Column4" Title="Y" Grid="true" AdjustEnd="true"   >
                                            <LabelTitle Font="normal 11px Arial;" Fill="Black" />
                                            <Label Font="normal 11px Arial;" Fill="Black" />
                                            <GridConfig>
                                                <Odd Stroke="#000000" />
                                                <Even Stroke="#000000" />
                                            </GridConfig>
                                        </ext:NumericAxis>
                                        <ext:CategoryAxis Position="Bottom" Fields="DateName" Title="x" AdjustEnd="true">
                                            <Label Font="normal 11px Arial;" Fill="Black" />
                                        </ext:CategoryAxis>
                                    </Axes>
                                    <LegendConfig Position="Bottom" BoxStroke="false" ItemSpacing="2" Padding="2" LabelFont="normal 11px Arial;">
                                    </LegendConfig>
    
                                    <Series>
                                        <ext:LineSeries Axis="Left" XField="DateName" YField="Column1" Title="Column1" Smooth="10">
                                            <Tips ID="Tips2" runat="server" TrackMouse="true" Width="330" Anchor="right" BodyStyle="color:Red" StyleSpec="color:Red">
                                                <Renderer Handler="this.setTitle('Column 1: ' + item.value[1] + ' (Click here to see drill down report)');" />
    
                                            </Tips>
                                            <MarkerConfig Fill="#6A8829" Stroke="#6A8829" Type="Circle" Radius="2" StrokeWidth="2" Cursor="pointer" />
                                            <Style Stroke="#6A8829" StrokeWidth="2" />
                                            <Label Font="normal 11px Arial;" />
                                        </ext:LineSeries>
    
                                        <ext:LineSeries Axis="Left" XField="DateName" YField="Column2" Title="Column2" Smooth="10">
                                            <Tips ID="Tips3" runat="server" TrackMouse="true" Width="330" Anchor="right" BodyStyle="color:Red" StyleSpec="color:Red">
                                                <Renderer Handler="this.setTitle('Column 2: ' + item.value[1] + ' (Click here to see drill down report)');" />
                                            </Tips>
                                            <MarkerConfig Fill="#E15E00" Stroke="#E15E00" Type="Circle" Radius="2" StrokeWidth="2" Cursor="pointer" />
                                            <Style Stroke="#E15E00" StrokeWidth="2" />
                                            <Label Font="normal 11px Arial;" />
                                        </ext:LineSeries>
    
    
                                        <ext:LineSeries Axis="Left" XField="DateName" YField="Column3" Title="Column3" Smooth="10">
                                            <Tips ID="Tips4" runat="server" TrackMouse="true" Width="330" Anchor="right" BodyStyle="color:Red" StyleSpec="color:Red">
                                                <Renderer Handler="this.setTitle('Column 3: ' + item.value[1] + ' (Click here to see drill down report)');" />
                                            </Tips>
                                            <MarkerConfig Fill="#1E7A93" Stroke="#1E7A93" Type="Diamond" Radius="2" StrokeWidth="2" Cursor="pointer" />
                                            <Style Stroke="#1E7A93" StrokeWidth="2" />
                                            <Label Font="normal 11px Arial;" />
                                        </ext:LineSeries>
    
                                        <ext:LineSeries Axis="Left" XField="DateName" YField="Column4" Title="Column4" Smooth="10">
                                            <Tips ID="Tips5" runat="server" TrackMouse="true" Width="330" Anchor="right" BodyStyle="color:Red" StyleSpec="color:Red">
                                                <Renderer Handler="this.setTitle('Column 4: ' + item.value[1] + ' (Click here to see drill down report)');" />
                                            </Tips>
                                            <MarkerConfig Fill="#50386E" Stroke="#50386E" Type="Diamond" Radius="2" StrokeWidth="2" Cursor="pointer" />
                                            <Style Stroke="#50386E" StrokeWidth="2" />
                                            <Label Font="normal 11px Arial;" />
                                        </ext:LineSeries>
                                    </Series>
                                </ext:Chart>
                            </Items>
                        </ext:Panel>
    
                    </td>
                </tr>
            </table>
    
        </form>
    </body>
    </html>
    Last edited by Daniil; Sep 04, 2015 at 5:10 PM. Reason: [CLOSED]
  2. #2
    Hi @praveencat123,

    1) Increase the height of legend as shown in screenshot
    This override increases the height for 50 pixels, but I guess it doesn't produce change that you need, i.e. it doesn't increase the size of items. Just a legend's container element is being increased.
    Ext.chart.Legend.override({
        updateItemDimensions: function() {
            var ret = this.callParent(arguments);
                    
            ret.maxHeight += 50;
    
            return ret;
        }
    });
    2) First value need to start from index 1 instead of index 0 as shown in screenshot
    3) Change the line color to Black for the chart (axis filed color) as showing in screenshot
    Please keep one issue per thread.
    Last edited by Daniil; Sep 01, 2015 at 10:58 PM.

Similar Threads

  1. Replies: 2
    Last Post: Aug 25, 2015, 5:35 PM
  2. Replies: 2
    Last Post: Jul 23, 2014, 1:02 PM
  3. [CLOSED] Line chart getting shrink, due to legend box Height
    By PriceRightHTML5team in forum 2.x Premium Help
    Replies: 4
    Last Post: May 08, 2014, 9:12 AM
  4. Replies: 1
    Last Post: May 06, 2014, 5:48 AM
  5. [CLOSED] Configure Legend of Line Chart Series
    By PriceRightHTML5team in forum 2.x Premium Help
    Replies: 31
    Last Post: Oct 19, 2013, 4:32 AM

Tags for this Thread

Posting Permissions