Sep 08, 2015, 12:57 PM
[CLOSED] Increase the legend line height
HI Daniil
Can you please tell me how to increase the legend line height for the chart
Please find the code and screenshot
Regards
Praveen
Can you please tell me how to increase the legend line height for the chart
Please find the code and screenshot
<%@ 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 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("2.50");
objRow["Column3"] = Convert.ToDecimal("2.10");
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();
DataRow drNewRow = dtSpiCpi.NewRow();
drNewRow[0] = string.Empty;
dtSpiCpi.Rows.InsertAt(drNewRow, 0);
drNewRow = dtSpiCpi.NewRow();
drNewRow[0] = string.Empty; dtSpiCpi.Rows.InsertAt(drNewRow, 13);
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>
<script type="text/javascript" language="javascript">
Ext.chart.Legend.override({
updateItemDimensions: function () {
var ret = this.callParent(arguments);
ret.maxHeight += 150;
return ret;
}
});
</script>
</head>
<body>
<form id="Form1" runat="server">
<ext:ResourceManager ID="ResourceManager1" runat="server" Namespace="" />
<table border="0">
<tr>
<td>
<ext:ChartTheme ID="ChartTheme1" runat="server" ThemeName="CustomBlue">
<Axis Stroke="Black" />
<AxisLabelLeft Font="normal 11px Arial" StrokeWidth="0.5" />
<AxisLabelBottom Font="normal 11px Arial" StrokeWidth="0.5" />
</ext:ChartTheme>
<ext:ComboBox runat="server" ID="ddlCpiSpiChartScale" Selectable="true" Editable="false" HideTrigger="false" Hidden="true"
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" Border="false" Height="500" Layout="FitLayout">
<Items>
<ext:Chart ID="chartSpiCpi" runat="server" Shadow="false" Theme="CustomBlue"
Animate="true" Width="850" Height="425" Legend="true" StyleSpec="background:#fff;">
<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">
<Convert Handler="if (value == null) {
value = undefined;
}
return value;" />
</ext:ModelField>
<ext:ModelField Name="Column2">
<Convert Handler="if (value == null) {
value = undefined;
}
return value;" />
</ext:ModelField>
<ext:ModelField Name="Column3">
<Convert Handler="if (value == null) {
value = undefined;
}
return value;" />
</ext:ModelField>
<ext:ModelField Name="Column4">
<Convert Handler="if (value == null) {
value = undefined;
}
return value;" />
</ext:ModelField>
</Fields>
</ext:Model>
</Model>
</ext:Store>
</Store>
<Axes>
<ext:NumericAxis Position="Left" Fields="Column1,Column2,Column3,Column4" Title="Y">
<LabelTitle Fill="#000000" FontSize="11px" FontStyle="Normal" />
<GridConfig>
<Odd Opacity="0.5" Stroke="Black" Fill="White" StrokeWidth="0.1" />
<Even Opacity="0.5" Stroke="Black" Fill="White" StrokeWidth="0.1" />
</GridConfig>
</ext:NumericAxis>
<ext:CategoryAxis Position="Bottom" Fields="DateName">
<LabelTitle Font="normal 11px Arial;" Stroke="Black" Fill="#000000" />
<Label Font="normal 11px Arial;" Fill="#000000" />
</ext:CategoryAxis>
</Axes>
<LegendConfig Position="Bottom" BoxStroke="white" BoxStrokeWidth="5" ItemSpacing="25" LabelFont="normal 11px Arial;">
</LegendConfig>
<Series>
<ext:LineSeries Axis="Left" XField="DateName" YField="Column1" Title="Column1" Smooth="10" SelectionTolerance="5">
<Tips ID="Tips2" runat="server" TrackMouse="false" Width="330" Anchor="right" ShowDelay="0" DismissDelay="0" HideDelay="0">
<Renderer Handler="this.setTitle('Column 1: ' + item.value[1] + ' (Click here to see drill down report)');" Delay="500" />
</Tips>
<MarkerConfig Fill="#6A8829" Stroke="#6A8829" Type="Circle" Radius="2" StrokeWidth="2" Cursor="pointer" />
<Style Stroke="#6A8829" StrokeWidth="2" />
<Label Font="normal 11px Arial;" Stroke="Black" Fill="White" />
</ext:LineSeries>
<ext:LineSeries Axis="Left" XField="DateName" YField="Column2" Title="Column2" Smooth="10" SelectionTolerance="5">
<Tips ID="Tips3" runat="server" TrackMouse="false" Width="330" Anchor="right" ShowDelay="0" DismissDelay="0" HideDelay="0">
<Renderer Handler="this.setTitle('Column 2: ' + item.value[1] + ' (Click here to see drill down report)');" Delay="500" />
</Tips>
<MarkerConfig Fill="#E15E00" Stroke="#E15E00" Type="Circle" Radius="2" StrokeWidth="2" Cursor="pointer" />
<Style Stroke="#E15E00" StrokeWidth="2" />
<Label Font="normal 11px Arial;" Stroke="Black" Fill="White" />
</ext:LineSeries>
<ext:LineSeries Axis="Left" XField="DateName" YField="Column3" Title="Column3" Smooth="10" SelectionTolerance="5">
<Tips ID="Tips4" runat="server" TrackMouse="false" Width="330" Anchor="right" ShowDelay="0" DismissDelay="0" HideDelay="0">
<Renderer Handler="this.setTitle('Column 3: ' + item.value[1] + ' (Click here to see drill down report)');" Delay="500" />
</Tips>
<MarkerConfig Fill="#1E7A93" Stroke="#1E7A93" Type="Diamond" Radius="2" StrokeWidth="2" Cursor="pointer" />
<Style Stroke="#1E7A93" StrokeWidth="2" />
<Label Font="normal 11px Arial;" Stroke="Black" Fill="White" />
</ext:LineSeries>
<ext:LineSeries Axis="Left" XField="DateName" YField="Column4" Title="Column4" Smooth="10" SelectionTolerance="5">
<Tips ID="Tips5" runat="server" TrackMouse="false" Width="330" Anchor="right" ShowDelay="0" DismissDelay="0" HideDelay="0">
<Renderer Handler="this.setTitle('Column 4: ' + item.value[1] + ' (Click here to see drill down report)');" Delay="500" />
</Tips>
<MarkerConfig Fill="#50386E" Stroke="#50386E" Type="Diamond" Radius="2" StrokeWidth="2" Cursor="pointer" />
<Style Stroke="#50386E" StrokeWidth="2" />
<Label Font="normal 11px Arial;" Stroke="Black" Fill="White" />
</ext:LineSeries>
</Series>
</ext:Chart>
</Items>
</ext:Panel>
</td>
</tr>
</table>
</form>
</body>
</html>
Regards
Praveen
Last edited by Daniil; Sep 15, 2015 at 7:54 PM.
Reason: [CLOSED]