[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.
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>
Regards
Praveen
1 Attachment(s)
added Image (Screenshot) for the issue
Extremely sorry for the confusion, i 've given description in the screenshot
Please find the attachment
