Jul 25, 2012, 8:09 AM
Updatepanel and ext:Chart
Hey everyone,
I have an issue with the asp:updatepanel and ext chart object.
if I update the chart object with the code below the chart dissapears I don't really get what I'm doing wrong as its pretty much the example code copied. Is there an issue with updatepanels and chart objects?
tried to add a default asp control that gets added through code to see if that works, and that seems to work just fine.
markup (yes there is a master page but its the default one microsoft puts in projects that you make with the default template):
I have an issue with the asp:updatepanel and ext chart object.
if I update the chart object with the code below the chart dissapears I don't really get what I'm doing wrong as its pretty much the example code copied. Is there an issue with updatepanels and chart objects?
tried to add a default asp control that gets added through code to see if that works, and that seems to work just fine.
markup (yes there is a master page but its the default one microsoft puts in projects that you make with the default template):
<asp:Content ID="Content2" ContentPlaceHolderID="MainContent" runat="server">
<ext:ResourceManager ID="ResourceManager1" runat="server" DisableViewState="False"></ext:ResourceManager>
<asp:UpdatePanel runat="server" ID="update1">
<ContentTemplate>
<h2>
<asp:Label runat="server" ID="label1"></asp:Label>
</h2>
<div>
<ext:Chart runat="server" ID="chart1" Animate="True" >
<LegendConfig Position="Right" />
</ext:Chart>
</div>
<div>
<asp:Button runat="server" ID="btn1" OnClick="Test" Text="Test"/>
<asp:DropDownList runat="server" ID="ddl" OnSelectedIndexChanged="Test" AutoPostBack="True">
<asp:ListItem Value="1">test1</asp:ListItem>
<asp:ListItem Value="2">test2</asp:ListItem>
</asp:DropDownList>
</div>
</ContentTemplate>
</asp:UpdatePanel>
</asp:Content>
backend code: protected void Page_Load(object sender, EventArgs e)
{
update1.ContentTemplateContainer.Controls.Add(new Literal { ID = "Test", Text = "TEST" });
Store store = new Store();
store.ID = "store1";
chart1.Width = 500;
chart1.Height = 500;
var model = new Model();
model.ID = "model";
model.Fields.Add("periode");
model.Fields.Add("periode2");
model.Fields.Add("data");
model.Fields.Add("data2");
store.Model.Add(model);
store.Data = createDT();
store.DataBind();
var caxs = new CategoryAxis();
caxs.Fields = new[] { "periode" };
chart1.Axes.Add(caxs);
var naxs = new NumericAxis();
naxs.Fields = new[] { "data", "data2" };
chart1.Axes.Add(naxs);
var lineTips = new ChartTip { TrackMouse = true };
lineTips.Renderer.Handler = "this.setTitle('Gemiddelde:' + '<br />' + storeItem.get('data'));";
lineTips.Width = new Unit(120);
var serie = new LineSeries();
serie.SeriesID = "line1";
serie.YField = new[] { "data" };
serie.XField = new[] { "periode" };
serie.Axis = Position.Left;
serie.Tips = lineTips;
chart1.Series.Add(serie);
lineTips = new ChartTip { TrackMouse = true };
lineTips.Renderer.Handler = "this.setTitle('Gemiddelde:' + '<br />' + storeItem.get('data2'));";
lineTips.Width = new Unit(120);
serie = new LineSeries();
serie.SeriesID = "line2";
serie.YField = new[] { "data2" };
serie.XField = new[] { "periode2" };
serie.Axis = Position.Left;
serie.Tips = lineTips;
chart1.Series.Add(serie);
chart1.Store.Add(store);
chart1.DataBind();
}
/// <summary>
/// The create dt.
/// </summary>
/// <returns>
/// The System.Data.DataTable.
/// </returns>
private DataTable createDT()
{
var rand = new Random();
var dt = new DataTable();
dt.Columns.Add("periode");
dt.Columns.Add("periode2");
dt.Columns.Add("data", typeof(int));
dt.Columns.Add("data2", typeof(int));
var row = dt.NewRow();
row["periode"] = "1-3-2012";
row["data"] = rand.Next(0, 40);
dt.Rows.Add(row);
row = dt.NewRow();
row["periode"] = "1-4-2012";
row["periode2"] = "1-4-2012";
row["data"] = rand.Next(0, 40);
row["data2"] = rand.Next(0, 40);
dt.Rows.Add(row);
row = dt.NewRow();
row["periode"] = "1-5-2012";
row["periode2"] = "1-5-2012";
row["data"] = rand.Next(0, 40);
row["data2"] = rand.Next(0, 40);
dt.Rows.Add(row);
row = dt.NewRow();
row["periode"] = "1-6-2012";
row["periode2"] = "1-6-2012";
row["data"] = rand.Next(0, 40);
row["data2"] = rand.Next(0, 40);
dt.Rows.Add(row);
return dt;
}
protected void Test(object sender, EventArgs e)
{
label1.Text = ddl.SelectedValue;
var store = this.chart1.GetStore();
store.Data = createDT();
store.DataBind();
}
Last edited by Frenks; Jul 25, 2012 at 10:07 AM.