Well values are hidden when they are absent from the beginning or end of the line. So it is great if I could hard code the data directly, but how to build the dynamic objects based on a list of data retrieved.
this.Chart1.GetStore().Data = new object[]
{
new { Name = "Jan", Data1 = 10 },
new { Name = "Feb", Data1 = 25 },
new { Name = "Mar", Data1 = 33, Data2 = 56 },
new { Name = "Apr", Data1 = 17, Data2 = 23 },
new { Name = "May", Data1 = 51, Data2 = 34 },
new { Name = "Jun", Data1 = 22, Data2 = 66 },
new { Name = "Jul", Data1 = 87, Data2 = 45 },
new { Name = "Aug", Data1 = 67, Data2 = 92 },
new { Name = "Sep", Data1 = 12, Data2 = 77 },
new { Name = "Oct", Data1 = 55, Data2 = 66 },
new { Name = "Nov", Data2 = 65 },
new { Name = "Dec", Data2 = 33 }
};
The dbData is a sample of retrieving data from my data table. I am summing up data requests ordered by Year and Month of the request.
<%@ Page Language="C#" %>
<%@ Register Assembly="Ext.Net" Namespace="Ext.Net" TagPrefix="ext" %>
<script runat="server">
protected void Page_Load(object sender, EventArgs e)
{
if (!X.IsAjaxRequest)
{
// Data1 = 2012 data
// Data2 = 2011 data
var dbData = new object[]
{
new {Year = 2012, Month = "Jan", Requests = 10 },
new {Year = 2012, Month = "Feb", Requests = 25 },
new {Year = 2012, Month = "Mar", Requests = 33 },
new {Year = 2012, Month = "Apr", Requests = 17 },
new {Year = 2012, Month = "May", Requests = 51 },
new {Year = 2012, Month = "Jun", Requests = 22 },
new {Year = 2012, Month = "Jul", Requests = 87 },
new {Year = 2012, Month = "Aug", Requests = 67 },
new {Year = 2012, Month = "Sep", Requests = 12 },
new {Year = 2012, Month = "Oct", Requests = 55 },
new {Year = 2011, Month = "Mar", Requests = 56 },
new {Year = 2011, Month = "Apr", Requests = 23 },
new {Year = 2011, Month = "May", Requests = 34 },
new {Year = 2011, Month = "Jun", Requests = 66 },
new {Year = 2011, Month = "Jul", Requests = 45 },
new {Year = 2011, Month = "Aug", Requests = 92 },
new {Year = 2011, Month = "Sep", Requests = 77 },
new {Year = 2011, Month = "Oct", Requests = 66 },
new {Year = 2011, Month = "Nov", Requests = 65 },
new {Year = 2011, Month = "Dec", Requests = 33 }
};
this.Chart1.GetStore().Data = new object[]
{
new { Name = "Jan", Data1 = 10 },
new { Name = "Feb", Data1 = 25 },
new { Name = "Mar", Data1 = 33, Data2 = 56 },
new { Name = "Apr", Data1 = 17, Data2 = 23 },
new { Name = "May", Data1 = 51, Data2 = 34 },
new { Name = "Jun", Data1 = 22, Data2 = 66 },
new { Name = "Jul", Data1 = 87, Data2 = 45 },
new { Name = "Aug", Data1 = 67, Data2 = 92 },
new { Name = "Sep", Data1 = 12, Data2 = 77 },
new { Name = "Oct", Data1 = 55, Data2 = 66 },
new { Name = "Nov", Data2 = 65 },
new { Name = "Dec", Data2 = 33 }
};
}
}
</script>
<!DOCTYPE html>
<html>
<head id="Head1" runat="server">
<title>Line Chart - Ext.NET Examples</title>
</head>
<body>
<form id="Form1" runat="server">
<ext:ResourceManager ID="ResourceManager1" runat="server" />
<ext:Panel ID="Panel1" runat="server" Title="Line Chart" Width="800" Height="600"
Layout="FitLayout">
<Items>
<ext:Chart ID="Chart1" runat="server" StyleSpec="background:#fff;" Shadow="true"
StandardTheme="Category1" Animate="true">
<LegendConfig Position="Right" />
<Store>
<ext:Store ID="Store1" runat="server">
<Model>
<ext:Model ID="Model1" runat="server">
<Fields>
<ext:ModelField Name="Name" />
<ext:ModelField Name="Data1" />
<ext:ModelField Name="Data2" />
</Fields>
</ext:Model>
</Model>
</ext:Store>
</Store>
<Axes>
<ext:NumericAxis Position="Left" Fields="Data1,Data2" Title="Number of Hits" MinorTickSteps="1" Minimum="0" />
<ext:CategoryAxis Position="Bottom" Fields="Name" Title="Month of the Year" />
</Axes>
<Series>
<ext:LineSeries Axis="Left" XField="Name" YField="Data1" Title="2012" Smooth="3">
<Tips runat="server" TrackMouse="true">
<Renderer Handler="this.update(String(item.value[1]))" />
</Tips>
</ext:LineSeries>
<ext:LineSeries Axis="Left" XField="Name" YField="Data2" Title="2011" Smooth="3">
<Tips runat="server" TrackMouse="true">
<Renderer Handler="this.update(String(item.value[1]))" />
</Tips>
</ext:LineSeries>
</Series>
</ext:Chart>
</Items>
</ext:Panel>
</form>
</body>
</html>
Any thoughts? If not I hope that Ext JS 4.2 will allow Data1 or Data2 to be null and interpreted as undefined.