PDA

View Full Version : [CLOSED] Increase the legend line height



praveencat123
Sep 08, 2015, 12:57 PM
HI Daniil

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

Daniil
Sep 08, 2015, 3:04 PM
Hi @praveencat123,

There is the LegendItem JavaScript class that is responsible for legend items.
http://docs.sencha.com/extjs/4.2.1/#!/api/Ext.chart.LegendItem

I would recommend to review its sources.
http://docs.sencha.com/extjs/4.2.1/source/LegendItem.html#Ext-chart-LegendItem

In particular, the following methods appear to be responsible for drawing that line and marker. You can try to override them adjusting the sizes. I am posting the original code.


Ext.chart.LegendItem.override({
createSeriesMarkers: function (config) {
var me = this,
index = config.yFieldIndex,
series = me.series,
seriesType = series.type,
surface = me.surface,
z = me.zIndex;

// Line series - display as short line with optional marker in the middle
if (seriesType === 'line' || seriesType === 'scatter') {
if (seriesType === 'line') {
var seriesStyle = Ext.apply(series.seriesStyle, series.style);
me.drawLine(0.5, 0.5, 16.5, 0.5, z, seriesStyle, index);
};

if (series.showMarkers || seriesType === 'scatter') {
var markerConfig = Ext.apply(series.markerStyle, series.markerConfig || {}, {
fill: series.getLegendColor(index)
});
me.drawMarker(8.5, 0.5, z, markerConfig);
}
}
// All other series types - display as filled box
else {
me.drawFilledBox(12, 12, z, index);
}
},

drawLine: function (fromX, fromY, toX, toY, z, seriesStyle, index) {
var me = this,
surface = me.surface,
series = me.series;

return me.add('line', surface.add({
type: 'path',
path: 'M' + fromX + ',' + fromY + 'L' + toX + ',' + toY,
zIndex: (z || 0) + 2,
"stroke-width": series.lineWidth,
"stroke-linejoin": "round",
"stroke-dasharray": series.dash,
stroke: seriesStyle.stroke || series.getLegendColor(index) || '#000',
style: {
cursor: 'pointer'
}
}));
},

drawMarker: function (x, y, z, markerConfig) {
var me = this,
surface = me.surface,
series = me.series;

return me.add('marker', Ext.chart.Shape[markerConfig.type](surface, {
fill: markerConfig.fill,
x: x,
y: y,
zIndex: (z || 0) + 2,
radius: markerConfig.radius || markerConfig.size,
style: {
cursor: 'pointer'
}
}));
}
});