I have a GridView
control where I aneed to show some information regarding some important variable of mine. These variables vary in time and I would like to plot their trend in the table as the last column using a Chart
control.
Here's a generic view of the code:
<asp:GridView runat="server" ID="Variables_GridView" CssClass="grid" AutoGenerateColumns="false" Width="100%">
<FooterStyle BackColor="White" ForeColor="#000066" />
<HeaderStyle CssClass="gridheader" />
<RowStyle ForeColor="#000066" />
<SelectedRowStyle BackColor="#669999" Font-Bold="True" ForeColor="White" />
<SortedAscendingCellStyle BackColor="#F1F1F1" />
<SortedAscendingHeaderStyle BackColor="#007DBB" />
<SortedDescendingCellStyle BackColor="#CAC9C9" />
<SortedDescendingHeaderStyle BackColor="#00547E" />
<Columns>
<asp:BoundField DataField="VariableName" HeaderText="Name" />
<asp:BoundField DataField="VariableType" HeaderText="Type" />
<asp:BoundField DataField="VariableDescription" HeaderText="Description" />
<asp:TemplateField HeaderText="Latest values">
<ItemTemplate>
<asp:Chart ID="Values_Chart" runat="server" Width="150" Height="50">
<Series>
<asp:Series Name="Values_Series" XAxisType="Primary" XValueType="Int32" ChartType="Line"></asp:Series>
</Series>
<ChartAreas>
<asp:ChartArea Name="Values_ChartArea"></asp:ChartArea>
</ChartAreas>
</asp:Chart>
</ItemTemplate>
</asp:TemplateField>
</Columns>
</asp:GridView>
In my codebehind you can find this type, the one used for mapping properties (the ones I specified):
public class VariableRepresentation {
private string variableName;
private string variableType;
private string variableDescription;
private float[] variableValues;
public string VariableName {
get { return this.variableName; }
set { this.variableName = value; }
}
public string VariableType {
get { return this.variableType; }
set { this.variableType = value; }
}
public string VariableDescription {
get { return this.variableDescription; }
set { this.variableDescription = value; }
}
public float[] VariableValues {
get { return this.variableValues; }
set { this.variableValues = value; }
}
public VariableRepresentation(string name, string type, string description) {
this.variableName = name;
this.variableType = type;
this.variableDescription = description;
}
public VariableRepresentation(string name, string type, string description, float[] initialValues) : this(name, type, description) {
this.variableValues = initialValues;
}
}
OK!
In the loading method of this page I have the following:
protected void Page_Load(object sender, EventArgs e) {
VariableRepresentation[] vars = new VariableRepresentation[6];
vars[0] = new VariableRepresentation("Variable 1",
"Type 1", "A generic variable", new float[] { 11, 12, 13, 14, 11, 20 });
vars[1] = new VariableRepresentation("Variable 2",
"Type 2", "A generic variable", new float[] { 11, 12, 13, 14, 11, 20 });
vars[2] = new VariableRepresentation("Variable 3",
"Type 3", "A generic variable", new float[] { 11, 12, 13, 14, 11, 20 });
vars[3] = new VariableRepresentation("Variable 4",
"Type 1", "A generic variable", new float[] { 11, 12, 13, 14, 11, 20 });
vars[4] = new VariableRepresentation("Variable 5",
"Type 2", "A generic variable", new float[] { 11, 12, 13, 14, 11, 20 });
vars[5] = new VariableRepresentation("Variable 6",
"Type 3", "A generic variable", new float[] { 11, 12, 13, 14, 11, 20 });
this.Variables_GridView.DataSource = vars;
this.Variables_GridView.DataBind();
}
Well, as you could imagine, the output is a table but my chart is empty. How can I act in the .aspx file, in the xhtml markup, the first code I showed, to let this happen?
I suppose I shoild place in the template field, some data binding expression, but I do not know what to place there....
Could you help me please?
Thankyou
PS: Please note that I didn't provide a solution here, the matter is that I do not know how to connect the data to the chart, actually it is correct that the charts (one per table line) show nothing, because I did not specify any binding expressions in the aspx page nor a properly piece of code in codebehind.