4 Attachment(s)
[CLOSED] Render a Chart on a DirectEvent
I have a south panel that I recreate a chart for based on the user selecting which Request Years to include. The initial Page Load displays the chart properly, but when I select an additional year the legend is updated, but the axis scale is not correct and the line series do not show up. When I resize the splitter bar the chart shows correctly.
What am I doing wrong in the direct event? Sorry for the code being so long.
I have commented out the masking because I thought that might be the problem, but it was not.
Attachment 6341Attachment 6342Attachment 6343Attachment 6344
Code:
<%@ Page Language="C#" %>
<%@ Register Assembly="Ext.Net" Namespace="Ext.Net" TagPrefix="ext" %>
<%@ Import Namespace="System.Collections.Generic" %>
<%@ Import Namespace="System.Globalization" %>
<script runat="server">
public class ChartByMonth
{
public string Name { get; set; }
public double? Y2013 { get; set; }
public double? Y2012 { get; set; }
public double? Y2011 { get; set; }
public double? Y2010 { get; set; }
public double? Y2009 { get; set; }
public double? Y2008 { get; set; }
public double? Y2007 { get; set; }
public double? Y2006 { get; set; }
public double? Y2005 { get; set; }
public double? Y2004 { get; set; }
public double? Y2003 { get; set; }
public static Dictionary<String, ChartByMonth> GenerateData(int n = 12)
{
var data = new Dictionary<String, ChartByMonth>();
for (int i = 0; i < n; i++)
{
string month = CultureInfo.InvariantCulture.DateTimeFormat.GetAbbreviatedMonthName(i + 1);
data.Add(month, new ChartByMonth { Name = month });
}
return data;
}
}
public class RequestsInfo
{
public int RequestMonth { get; set; }
public int RequestYear { get; set; }
public int Requests { get; set; }
}
protected void Page_Init(object sender, EventArgs e)
{
BuildChartYearCheckBoxes();
((Ext.Net.Checkbox)ChartYearsCbGroup.Items[0]).Checked = true;
}
protected void Page_Load(Object sender, EventArgs e)
{
if (X.IsAjaxRequest)
return;
BuildChart();
}
private void BuildChartYearCheckBoxes()
{
// Just hardcode years for this example
for (int year = 2013; year >= 2003; year--)
{
ChartYearsCbGroup.Items.Add(new Ext.Net.Checkbox
{
ID = "Y" + year.ToString(),
BoxLabel = year.ToString(),
InputValue = year.ToString(),
StyleSpec = "StyleSpec='font-size: 11px;'",
ClientIDMode = ClientIDMode.Static
});
}
}
protected void ChartYearsChange(object sender, DirectEventArgs e)
{
BuildChart();
}
private void BuildChart()
{
if (ChartPanelSouth.Hidden) return;
CheckboxGroup cbGroup = X.GetCmp<CheckboxGroup>("ChartYearsCbGroup");
List<Checkbox> yrsSelected = cbGroup.CheckedItems;
if (yrsSelected.Count == 0)
{
ChartPanel.RemoveAll();
ChartPanel.Update("<Select a Request Year to display a chart.</p>");
ChartPanel.BodyStyle = "text-align: center; display: table-cell; vertical-align: middle;";
ChartPanelSouth.Title = "Charts";
Ext.Net.X.Mask.Hide();
return;
}
else
{
//ChartPanel.ClearContent();
ChartPanel.BodyStyle = "text-align: left; display:inline; vertical-align: top;";
}
ChartRequestsByMonth(yrsSelected);
}
private void ChartRequestsByMonth(List<Checkbox> yrsSelected)
{
int yrsSelectedCount = yrsSelected.Count();
string[] yFields = new string[yrsSelectedCount];
string[] yTitles = new string[yrsSelectedCount];
for (int i = 0; i < yrsSelectedCount; i++)
{
yFields[i] = "Y" + yrsSelected[i].InputValue;
yTitles[i] = yrsSelected[i].InputValue;
}
// Create: Line Chart (Requests by Months)
Chart byMonthChart = new Chart();
byMonthChart.ID = "CrtsChart";
byMonthChart.ClientIDMode = ClientIDMode.Static;
byMonthChart.StyleSpec = "background:#fff";
byMonthChart.StandardTheme = StandardChartTheme.Category1;
byMonthChart.ContextMenuID = "CrtsChart_ContextMenu";
//if (!(Ext.Net.RequestManager.IsIE7 || Ext.Net.RequestManager.IsIE8))
//{
// byMonthChart.Animate = true;
// byMonthChart.AnimateConfig = new AnimConfig { Easing = Easing.EaseIn, Duration = 1000 };
// byMonthChart.AnimateConfig.Listeners.AfterAnimate.Fn = "chartAnimateComplete";
//}
//else
// byMonthChart.Listeners.AfterRender.Handler = "Ext.net.Mask.hide();";
// Configure: Chart Legend
byMonthChart.LegendConfig = new ChartLegend();
byMonthChart.LegendConfig.Position = LegendPosition.Right;
// Create: Category Axis
CategoryAxis cAxis = new CategoryAxis();
cAxis.Position = Position.Bottom;
cAxis.Title = "Month";
cAxis.Fields = new String[] { "Name" };
byMonthChart.Axes.Add(cAxis);
// Create: Numeric Axis
NumericAxis nAxis = new NumericAxis();
nAxis.Position = Position.Left;
nAxis.Title = "Requests";
nAxis.Fields = yFields;
nAxis.MinorTickSteps = 1;
nAxis.Minimum = 0;
nAxis.Grid = true;
nAxis.GridConfig = new AxisGrid { Odd = new SpriteAttributes { Opacity = 1, Fill = "#ddd", Stroke = "#bbb", StrokeWidth = 0.5 } };
byMonthChart.Axes.Add(nAxis);
// Create: Line series for each year
for (int i = 0; i < yrsSelectedCount; i++)
{
LineSeries lSeries = new LineSeries();
lSeries.Axis = Position.Left;
lSeries.XField = new string[] { "Name" };
lSeries.YField = new string[] { "Y" + yrsSelected[i].InputValue };
lSeries.Title = yrsSelected[i].InputValue;
lSeries.HighlightConfig = new SpriteAttributes { Size = 7, Radius = 7 };
lSeries.MarkerConfig = new SpriteAttributes { Size = 4, Radius = 4, StrokeWidth = 0 };
// Configure: Line Series Tips
lSeries.Tips = new ChartTip();
lSeries.Tips.TrackMouse = true;
lSeries.Tips.BodyStyle = "text-align: center; font-size: 9px; ";
lSeries.Tips.Renderer.Handler = "this.update('<b>' + storeItem.get('Name') + ' ' + item.series.title + '<br/>Requests</b><hr><font color=blue>' + String(item.value[1]) + '</font>');";
byMonthChart.Series.Add(lSeries);
}
// Create: Store
Store store = new Store();
store.ID = "ChartStore";
store.ClientIDMode = ClientIDMode.Static;
// Create: Model based on the years checked and add it to the store.
store.Model.Add(createModel(yrsSelected));
// Populate: Build the data for the store
store.DataSource = generateData(yrsSelected).Values.ToList();
//store.DataBind();
byMonthChart.Store.Add(store);
ChartPanel.RemoveAll();
byMonthChart.AddTo(ChartPanel);
ChartPanelSouth.Title = "Requests by Month";
}
// Create a model based on the years checked
private Model createModel(List<Checkbox> yrsSelected)
{
Model model = new Model();
model.ID = "ModelByMonth";
model.Fields.Add("Name");
for (int i = 0; i < yrsSelected.Count(); i++)
{
ModelField field = new ModelField();
field.Name = "Y" + yrsSelected[i].InputValue;
field.Type = ModelFieldType.Float;
// Allow special interpretation of the data only for this line chart.
field.Convert.Handler = "if (value === null) {value = undefined;} return value;";
model.Fields.Add(field);
}
return model;
}
private Dictionary<String, ChartByMonth> generateData(List<Checkbox> yrsSelected)
{
var theData = ChartByMonth.GenerateData();
Random random = new Random();
double p = (random.NextDouble() * 11) + 1;
RequestsInfo[] byMonthRequests = new RequestsInfo[yrsSelected.Count() * 12];
for (int y = 0; y < yrsSelected.Count(); y++)
{
for (int m = 0; m < 12; m++)
{
RequestsInfo ri = new RequestsInfo();
ri.RequestMonth = m + 1;
ri.RequestYear = Convert.ToInt32(yrsSelected[y].InputValue);
ri.Requests = Convert.ToInt32(Math.Floor(Math.Max(random.NextDouble() * 100, 0)));
byMonthRequests[y * 12 + m] = ri;
}
}
foreach (var reqCnts in byMonthRequests)
{
string monthName = CultureInfo.InvariantCulture.DateTimeFormat.GetAbbreviatedMonthName(reqCnts.RequestMonth);
switch (reqCnts.RequestYear)
{
case 2013:
theData[monthName].Y2013 = reqCnts.Requests;
break;
case 2012:
theData[monthName].Y2012 = reqCnts.Requests;
break;
case 2011:
theData[monthName].Y2011 = reqCnts.Requests;
break;
case 2010:
theData[monthName].Y2010 = reqCnts.Requests;
break;
default:
break;
}
};
return theData;
}
</script>
<!DOCTYPE html >
<html>
<head id="Head1" runat="server">
<title>Window issue IE7</title>
</head>
<body>
<form id="Form1" runat="server">
<ext:ResourceManager ID="ResourceManager1" runat="server" />
<ext:Viewport ID="Viewport1" runat="server" Layout="BorderLayout">
<Items>
<ext:Panel ID="Center" runat="server" Region="Center" Title="Center" />
<ext:Panel ID="ChartPanelSouth" runat="server" ClientIDMode="Static" Region="South"
Title="Charts" TitleAlign="Center" Icon="ChartBar" Height="240" Split="true"
Collapsible="true" Layout="BorderLayout" Collapsed="true">
<HtmlBin>
<script type="text/javascript">
function commonChartInit() {
Ext.net.Mask.show({ el: Ext.get('ChartPanel'), msg: 'Building Chart ...' });
}
var chartAnimateComplete = Ext.Function.createBuffered(function () { Ext.net.Mask.hide(); }, 1200);
</script>
</HtmlBin>
<DockedItems>
<ext:Toolbar runat="server" Dock="Left" Vertical="true">
<Items>
<ext:Button ID="ChartYears" runat="server" ToolTip="years" Icon="Calendar" ArrowAlign="Right"
MenuAlign="tl-tr" AutoShow="true">
<Menu>
<ext:Menu ID="ChartYearsMenu" runat="server" Title="Request Years" TitleAlign="Center"
ShowSeparator="false" RenderToForm="true">
<Items>
<ext:CheckboxGroup ID="ChartYearsCbGroup" runat="server" ClientIDMode="Static" ColumnsWidths="80,80"
Vertical="true">
<%--<Listeners>
<Change Fn="commonChartInit" />
</Listeners>--%>
<DirectEvents>
<Change OnEvent="ChartYearsChange" />
</DirectEvents>
</ext:CheckboxGroup>
</Items>
</ext:Menu>
</Menu>
</ext:Button>
</Items>
</ext:Toolbar>
</DockedItems>
<Items>
<ext:Panel ID="ChartPanel" runat="server" ClientIDMode="Static" Region="Center" Layout="BorderLayout">
<Items>
</Items>
</ext:Panel>
</Items>
</ext:Panel>
</Items>
</ext:Viewport>
</form>
</body>
</html>
