[CLOSED] Line chart is Crossing the chart number axis

  1. #1

    [CLOSED] Line chart is Crossing the chart number axis

    HI

    In the page there is line chart and Scale dropdownlist, on selection of dropdownlist(0 to 2) then the lines are crossing the chart number axis

    Can you please tell me how to fix this issue.


    <%@ 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>

    Regards
    Praveen
    Last edited by Daniil; Sep 01, 2015 at 10:59 PM. Reason: [CLOSED]
  2. #2
    Hi @praveencat123,

    then the lines are crossing the chart number axis
    Either I don't see this issue or don't understand. Please post a screenshot pointing out the issue.
  3. #3

    added Image (Screenshot) for the issue

    Extremely sorry for the confusion, i 've given description in the screenshot



    Please find the attachment
    Attached Thumbnails NewIssue.png  
  4. #4
    Thank you for clarification, I see the issue now.

    Digging the Charts package for while I, unfortunately, could not find a solution.

    The only thing I can say is that it appears to be not happening with Ext.NET v3.

Similar Threads

  1. [CLOSED] Dotted line renders as solid line in line chart image
    By PriceRightHTML5team in forum 2.x Premium Help
    Replies: 1
    Last Post: Apr 01, 2014, 5:28 PM
  2. Line Chart issues in IE
    By Pradip in forum 2.x Help
    Replies: 9
    Last Post: Mar 21, 2014, 5:53 AM
  3. Replies: 2
    Last Post: Nov 07, 2013, 1:03 PM
  4. [CLOSED] Chart Line
    By pdcase in forum 2.x Premium Help
    Replies: 9
    Last Post: Aug 14, 2012, 3:25 PM
  5. How to change a line style on the chart?
    By Natalie in forum 2.x Help
    Replies: 3
    Last Post: May 16, 2012, 11:15 AM

Tags for this Thread

Posting Permissions