PDA

View Full Version : [CLOSED] Line chart is Crossing the chart number axis



praveencat123
Aug 25, 2015, 6:33 PM
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

Daniil
Aug 26, 2015, 7:16 AM
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.

praveencat123
Aug 26, 2015, 7:54 AM
Extremely sorry for the confusion, i 've given description in the screenshot



Please find the attachment

Daniil
Aug 26, 2015, 9:11 AM
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.