Jun 21, 2013, 4:21 PM
[CLOSED] Vertical Marker on partial line series
Here is a fun one that I didn't catch until I got back to the production system. I have a line series representing this year that is from January 2013 - July 2013 (I know it is only June). When I add a line series for 2012 there is data for all 12 months.
When you move the Vertical Marker across the chart with a partial line series it stops on the last data point (June) (See the first image). I can not move the marker from July through December even though there are data points for 2012.
I can bring the cursor off the window and start on the right side (December) and move to the left. The data label for June 2013 shows and along with the Nov 2012 data label (See the second image).
Requires Trunk Revision 5215 (June 21, 2013)
When you move the Vertical Marker across the chart with a partial line series it stops on the last data point (June) (See the first image). I can not move the marker from July through December even though there are data points for 2012.
I can bring the cursor off the window and start on the right side (December) and move to the left. The data label for June 2013 shows and along with the Nov 2012 data label (See the second image).
Requires Trunk Revision 5215 (June 21, 2013)
<%@ 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 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 >= 2009; 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;
VerticalMarker vm = new VerticalMarker();
vm.Snap = true;
vm.ShowXLabel = false;
byMonthChart.Plugins.Add(vm);
// Configure: AfterRender to enable/disable Vertical Marker based on CheckMenuItem
if (ShowVerticalMarkers.Checked == true)
byMonthChart.Listeners.AfterRender.Handler += "this.plugins[0].enable();";
else
byMonthChart.Listeners.AfterRender.Handler += "this.plugins[0].disable();";
// 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);
}
// Configure: AfterRender to enable/disable Vertical Marker based on CheckMenuItem
//byMonthChart.Listeners.AfterRender.Handler += "chartTips(Ext.getCmp('ShowTips').checked);";
// 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);
if (y == 0 && m >= 7)
ri.Requests = null;
else
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;
case 2009:
theData[monthName].Y2009 = 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="false">
<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);
function chartTips(checked) {
var chart = Ext.getCmp('CrtsChart');
for (var i = 0; i < chart.series.length; i++) {
var series = chart.series.items[i];
if (checked === false) {
series.originalTooltip = series.tooltip;
delete series.tooltip;
}
else {
// Just incase we start out as true, there is nothing in the original.
if (series.originalTooltip != undefined)
series.tooltip = series.originalTooltip;
delete series.originalTooltip;
}
}
}
</script>
</HtmlBin>
<Bin>
<ext:Menu ID="CrtsChart_ContextMenu" runat="server" ClientIDMode="Static" RenderToForm="true"
Title="Chart Options" TitleAlign="Center">
<Items>
<ext:CheckMenuItem ID="ShowTips" runat="server" ClientIDMode="Static" Checked="true"
Text="Tips">
<Listeners>
<CheckChange Handler="chartTips(this.checked)" />
</Listeners>
</ext:CheckMenuItem>
<ext:CheckMenuItem ID="ShowVerticalMarkers" runat="server" ClientIDMode="Static"
Checked="true" Text="Vertical Marker">
<Listeners>
<CheckChange Handler="if (checked === true) {Ext.getCmp('CrtsChart').plugins[0].enable();} else {Ext.getCmp('CrtsChart').plugins[0].disable();};" />
</Listeners>
</ext:CheckMenuItem>
</Items>
</ext:Menu>
</Bin>
<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>
Last edited by Baidaly; Jun 26, 2013 at 7:28 PM.
Reason: [CLOSED]