[Solved] BarCharts / Label, ToolTip Error, Legendconfig / Code Behind
Hello,
I was trying to make the barchart example working building it completely from code behind. But I am running in some troubles about the Label/ToolTip/LegendConfig tags: As soon as I uncomment one of them I get a "Object reference not set to an instance of an object.".
Can anyone give me a clue why that is? How to I have to create those from code behind to avoid this error?
Thank you very much,
best regards!
Code:
<%@ Page Language="C#" %>
<script runat="server">
protected void Page_Load(object sender, EventArgs e)
{
List<object> objList = new List<object>
{
new { Month = "Jan", Data1 = 20, Data2 = 37, Data3 = 35, Data4 = 4 },
new { Month = "Feb", Data1 = 20, Data2 = 37, Data3 = 36, Data4 = 5 },
new { Month = "Mar", Data1 = 19, Data2 = 36, Data3 = 37, Data4 = 4 },
new { Month = "Apr", Data1 = 18, Data2 = 36, Data3 = 38, Data4 = 5 },
new { Month = "May", Data1 = 18, Data2 = 35, Data3 = 39, Data4 = 4 },
new { Month = "Jun", Data1 = 17, Data2 = 34, Data3 = 42, Data4 = 4 },
new { Month = "Jul", Data1 = 16, Data2 = 34, Data3 = 43, Data4 = 4 },
new { Month = "Aug", Data1 = 16, Data2 = 33, Data3 = 44, Data4 = 4 },
new { Month = "Sep", Data1 = 16, Data2 = 32, Data3 = 44, Data4 = 4 },
new { Month = "Oct", Data1 = 16, Data2 = 32, Data3 = 45, Data4 = 4 },
new { Month = "Nov", Data1 = 15, Data2 = 31, Data3 = 46, Data4 = 4 },
new { Month = "Dec", Data1 = 15, Data2 = 31, Data3 = 47, Data4 = 4 }
};
Ext.Net.Panel pnl = new Ext.Net.Panel
{
Width = 650,
Layout = "AnchorLayout",
DefaultAnchor = "100%",
Items =
{
new CartesianChart
{
ID = "Chart",
Height = 460,
InsetPaddingSpec = "10 40 40 40",
Store =
{
new Store
{
Model =
{
new Model
{
Fields =
{
new ModelField { Name = "Month", Type = ModelFieldType.Auto },
new ModelField { Name = "Data1", Type = ModelFieldType.Auto },
new ModelField { Name = "Data2", Type = ModelFieldType.Auto },
new ModelField { Name = "Data3", Type = ModelFieldType.Auto },
new ModelField { Name = "Data4", Type = ModelFieldType.Auto }
}
}
},
DataSource = objList
}
},
// LegendConfig = { Dock = Dock.Top },
Axes =
{
new NumericAxis
{
Position = Position.Left,
Fields = new string[] { "Data1" },
Grid = true,
Minimum = 0,
Renderer = { Handler = "return label.toFixed(label < 10 ? 1: 0) + '%';" }
},
new CategoryAxis
{
Position = Position.Bottom,
Fields = new string[] { "Month" },
//Label = { RotationDegrees = -45 }
}
},
Series =
{
new BarSeries
{
XField = "Month",
YField = new string[] { "Data1", "Data2", "Data3", "Data4" },
Stacked = false,
Titles = new string[] { "IE", "FF", "Chrome", "Safari" },
StyleSpec = { new Sprite { Opacity = 0.8 } },
HighlightConfig = { new Sprite { FillStyle = "yellow" } },
//Tooltip = { TrackMouse = true, Renderer = { Handler="var browser = context.series.getTitle()[Ext.Array.indexOf(context.series.getYField(), context.field)]; toolTip.setHtml(browser + ' for ' + record.get('Month') + ': ' + record.get(context.field) + '%');" } }
}
}
}
}
};
this.PlaceHolderPanel.Controls.Add(pnl);
}
</script>
<!DOCTYPE html>
<html>
<head runat="server">
<title>Column Chart - Ext.NET Examples</title>
<link href="/resources/css/examples.css" rel="stylesheet" />
</head>
<body>
<form runat="server">
<ext:ResourceManager runat="server" />
<asp:PlaceHolder runat="server" ID="PlaceHolderPanel"></asp:PlaceHolder>
</form>
</body>
</html>
