PDA

View Full Version : [CLOSED] I need to create charts from code behind, but how to?



feanor91
May 21, 2012, 12:31 PM
Hello

Return from hollydays, bad for you :)

I begin to deal with the charts thing.

Until now, as I work in Ext.NET 1.3 I have to use Ext.JS 4.0 to create my charts (I have 25 charts to deal with, dashboard thing).

Now, as I have migrate under Ext.NET V2, I want to change my mind and I have to create all my chart from code behind. My mind is to create a class in which I will pass parameters to create chart I want. The goal of this, is that I will have the 25 existing charts, but my customers wants to be able to arrange their data in the form they wants so I will have to create dynamic charts on the fly depending of parameters they chooses...

I inspire myself from this examplehttp://examples2.ext.net/#/XRender/Advanced/Parent_Add_Children/

To create my object. I begin by a window, then continue with the chart, but I'm quicly stopped because I want to add axis and series to my chart but the 2 properties are read only, I look for a chart config item, but seem not existing, I look for a "addAxes" or "addSeries" function, fail, I look for same with "set" in place of "add", fail.

Question : is it possible to achieve want I want (I think so but...) and if yes, a liitle help from my friend will be welcommed.

Thanks in advance.

Daniil
May 21, 2012, 1:24 PM
Hi,

Glad to see you again on the forums:)

Yes, it's possible to create a Chart from server.

Regarding to the problem with Axes and Series.

Example

Chart c = new Chart();
c.Axes.Add(new NumericAxis());
c.Series.Add(new AreaSeries());

feanor91
May 21, 2012, 1:38 PM
Hi,

Glad to see you again on the forums:)

Yes, it's possible to create a Chart from server.

Regarding to the problem with Axes and Series.

Example

Chart c = new Chart();
c.Axes.Add(new NumericAxis());
c.Series.Add(new AreaSeries());

Hi,

too late, I see the collection things and found by myself just now...lol. I think I must dig into more deeper before posting silly question, I will show myself less foolish.

I progress little by little, I hope it will work as I think , it will simplify my code a lot.

tanky65
May 31, 2012, 4:52 PM
Hi,
I had some tests about creation of charts in behind code getting data from db
I defined only the chart and the store in aspx file.
Axis, Store Model and Series are created as default in PageLoad and by user request (ReloadData).
Fields of AxesY are defined by user and can be more than one (stacked in one Serie) (for instance: nr. of items producted in the time by one or more production line, the user says the code of prod.line he wants to analyze, so these can change for every request)
Everything seems to work good, but if I change the names of the columns and i make a new request, even if i create again the structure, the chart is no more displayed, only axes, the legend if i render the chart
Works good if the new request is a subset of the first one i did .... sigh!!
any idea?

Thanks



// DirectClick of the Querybutton
protected void ReloadData(object sender, DirectEventArgs e)
{
bindData();

ChartConfig(true);
}

protected void bindData()
{
try
{
var store = Chart1.GetStore();

object[] myData= SelectData();

// Clear Collections to remove old Data and Models
store.Model.Clear();
store.Reader.Clear();

// Reconfigure Store creating new Model
Model m = new Model();
m.Name = "Model1";

ArrayList cols = Data.ChartData.getGraphColumnsGrid(myData);
for (int g = 0; g < cols.Count; g++)
{
if (g == 0)
m.Fields.Add(new ModelField((string)cols[g]));
else
m.Fields.Add(new ModelField((string)cols[g], ModelFieldType.Int));
}
store.Model.Add(m);

store.DataSource = objects;
store.DataBind();
}
catch (Exception x)
{
string smx = x.Message;
}

}

protected void ChartConfig(bool rendy)
{

try
{
CategoryAxis AxesX = new CategoryAxis();
NumericAxis AxesY = new NumericAxis();

Chart1.Axes.RemoveAt(0);
Chart1.Axes.RemoveAt(0);
Chart1.Series.RemoveAt(0);

AxesY.Fields = getGroupChutes();
AxesY.Grid = true;
AxesY.Title = "Unloaded Items";
AxesY.Minimum = 0;
AxesY.Maximum = null;

AxesX.Fields = new string[] { "Name" };
AxesX.Position = Ext.Net.Position.Bottom;
AxesX.Title = "Selected Period";

ColumnSeries MySerie = new ColumnSeries();
MySerie.SeriesID = "IdSerie";
MySerie.Axis = Position.Left;
MySerie.Highlight = true;
MySerie.Stacked = true;
MySerie.XField = new string [] {"Name"};
MySerie.YField = getGroupChutes();
// MySerie.Title = "Test";

// Chart1.ID = "Chart1";
Chart1.Shadow = true;
Chart1.StyleSpec = "background:#fff";
Chart1.Width = 1200;
Chart1.Height = 400;
Chart1.Animate = true;
Chart1.Legend = true;

Chart1.StoreID = "Store1";

Chart1.Series.Add(MySerie);
Chart1.Legend = true;
Chart1.Axes.Add(AxesY);
Chart1.Axes.Add(AxesX);
AxesX.SetTitle("Selected Period");

// should be rendered only when the legend is updated
if ( rendy ) Chart1.Render();
}
catch (Exception x)
{
string smx = x.Message;
}
}

Daniil
Jun 06, 2012, 11:29 AM
Hi,

I think you should re-bind a data to the Chart Store if you rerender that Chart.

Example

<%@ 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)
{
this.BindData();
}
}

protected void ChangeLegend(object sender, DirectEventArgs e)
{
this.Chart1.LegendConfig.LabelColor = "red";
BindData();
this.Chart1.Render();
}

private void BindData()
{
Store store = this.Chart1.GetStore();
store.DataSource = new object[]
{
new
{
x = 0,
y = 0
},
new
{
x = 50,
y = 50
},
new
{
x = 100,
y = 100
}
};
store.DataBind();
}
</script>

<!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>Ext.NET v2 Example</title>
</head>
<body>
<ext:ResourceManager runat="server" />

<ext:Panel
ID="Panel1"
runat="server"
Width="400"
Height="400"
Layout="FitLayout">
<Items>
<ext:Chart ID="Chart1" runat="server">
<Store>
<ext:Store runat="server">
<Model>
<ext:Model runat="server">
<Fields>
<ext:ModelField Name="x" />
<ext:ModelField Name="y" />
</Fields>
</ext:Model>
</Model>
</ext:Store>
</Store>
<Axes>
<ext:NumericAxis Title="X" Fields="x" Position="Bottom" />
<ext:NumericAxis Title="Y" Fields="y" Position="Left" />
</Axes>
<Series>
<ext:LineSeries Title="LineSeries" XField="x" YField="y" />
</Series>
<LegendConfig LabelColor="Green" />
</ext:Chart>
</Items>
</ext:Panel>

<ext:Button runat="server" Text="Change legend" OnDirectClick="ChangeLegend" />
</body>
</html>