Unable to use direct method to load data in Chart
Hi,
I've been trying create a chart in code behind and then load data to it, currently I'm able to create the chart but unable to load the data using a DirectMethod
Please help.
Sample:
Code:
<%@ Page Language="C#" AutoEventWireup="true" %>
<%@ Register assembly="Ext.Net" namespace="Ext.Net" tagprefix="ext" %>
<!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 runat="server">
<title></title>
<script runat="server" type="text/C#">
static Random rand = new Random((int)DateTime.Now.Ticks);
public class TestData
{
public string Name { get; set; }
public int Data1 { get; set; }
public int Data2 { get; set; }
public int Data3 { get; set; }
}
protected void Page_Load(object sender, EventArgs e)
{
}
[DirectMethod]
public IEnumerable<TestData> GetData()
{
List<TestData> data = new List<TestData>();
for (int i = 1; i <= 12; i++)
{
TestData t = new TestData();
t.Name = new DateTime(2013, i, 1).ToString("MMMM");
t.Data1 = rand.Next(100);
t.Data2 = rand.Next(100);
t.Data3 = rand.Next(100);
data.Add(t);
}
return data;
}
[DirectMethod()]
public string LoadChart()
{
var builder = new Chart.Builder();
var chart = builder.StandardTheme(StandardChartTheme.Category1)
.StyleSpec("background:#fff;")
.Shadow(true)
.Animate(true)
.Store(new Store.Builder()
.Model(new Model.Builder()
.Fields("Name", "Data1", "Data2", "Data3").ToComponent())
.Proxy(new DirectProxy.Builder().API(fn => fn.Read = "App.direct.GetData"))
.AutoLoad(true)
.ToComponent())
.Axes(
new NumericAxis.Builder()
.Fields(new string[] { "Data1", "Data2", "Data3" })
.Title("Number of hits")
.MinorTickSteps(1)
.Minimum(0)
.GridConfig(new AxisGrid.Builder()
.Odd(new SpriteAttributes.Builder().Opacity(1).Fill("#ddd").Stroke("#bbb").StrokeWidth(0.5).ToComponent())
.ToComponent())
.ToComponent(),
new CategoryAxis.Builder()
.Position(Position.Bottom)
.Fields("Name")
.Title("Month of the year")
.ToComponent())
.Series(
new LineSeries.Builder()
.Axis(Position.Left)
.XField("Name")
.YField("Data1")
.HighlightConfig(new SpriteAttributes.Builder().Size(7).Radius(7).ToComponent())
.MarkerConfig(new SpriteAttributes.Builder().Type(SpriteType.Cross).Size(4).Radius(4).StrokeWidth(0).ToComponent()),
new LineSeries.Builder()
.Axis(Position.Left)
.Smooth(3)
.XField("Name")
.YField("Data2")
.HighlightConfig(new SpriteAttributes.Builder().Size(7).Radius(7).ToComponent())
.MarkerConfig(new SpriteAttributes.Builder().Type(SpriteType.Circle).Size(4).Radius(4).StrokeWidth(0).ToComponent()),
new LineSeries.Builder()
.Axis(Position.Left)
.Smooth(3)
.Fill(true)
.XField("Name")
.YField("Data3")
.HighlightConfig(new SpriteAttributes.Builder().Size(7).Radius(7).ToComponent())
.MarkerConfig(new SpriteAttributes.Builder().Type(SpriteType.Circle).Size(4).Radius(4).StrokeWidth(0).ToComponent())
).ToComponent();
return chart.ToConfig();
}
</script>
</head>
<body>
<form id="form1" runat="server">
<div>
<ext:ResourceManager runat="server" ScriptMode="Debug"></ext:ResourceManager>
<ext:Viewport runat="server" Layout="FitLayout">
<Items>
<ext:Panel runat="server" Layout="FitLayout">
<Loader Mode="Component" runat="server" DirectMethod="App.direct.LoadChart">
</Loader>
</ext:Panel>
</Items>
</ext:Viewport>
</div>
</form>
</body>
</html>
