[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
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>
